callstack / callstack/react-native-paper
BottomNavigationBar shifting={false} display bug on iOS
- Ngôn ngữ chính
- TypeScript
- Star
- 14.5k
- Fork
- 2.2k
- Merge trung bình
- 5 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 12
Mô tả
### Current behaviour
When using component. On iOS (26) the active state's background is sometimes squashed.
This behaviour is not present on Android (36).
If `shifting={true}` is passed then the issue is resolved. It is only if `shifting={false}`
### Expected behaviour
Same display on both platforms
### How to reproduce?
from snack
app.js
```
import { PaperProvider } from "react-native-paper";
// You can import supported modules from npm
import MyComponent from './components/MyComponent';
export default function App() {
return (
);
}
```
MyComponent.js is sample code from https://callstack.github.io/react-native-paper/docs/components/BottomNavigation
Using `"react-native-paper": "^5.14.5",`
### Preview
https://github.com/user-attachments/assets/2a1bb86c-d1cd-4c2b-aadf-acba06c4ec61
### What have you tried so far?
I have tried various combinations of these attributes
```
shifting={false}
compact={true}
labeled={false}
```
I have also tried setting the style manually using
```
activeIndicatorStyle={{
width: 123 // any number basically
height: 32,
borderRadius: 16,
}}
```
I have also tried decreasing the number of tabs to see if it was a space issue.
The only setting that fixed on iOS was `shifting={true}` but obviously this changes the behaviour entirely.
Android is unaffected by this bug it seems.
**Update**
This seems to be related to the animation not playing on iOS. From reading the code it seems like the pill is supposed to start in a narrow state and expand outwards however this is not happening (on either platform)
If I set the output range to 1,1 then the pill is the correct size
```
// Scale horizontally the outline pill
const outlineScale = focused
? active.interpolate({
inputRange: [0, 1],
outputRange: [1, 1],
})
: 0;
```
### Your Environment
| software | version
| --------------------- | -------
| ios | 26
| android | 36
| react-native | 19.1.0
| react-native-paper | 5.14.5
| node | 24.9.0
| npm or yarn | 11.6.0
| expo sdk | 54.0.10
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với sample BottomNavigation trong MyComponent.js và theo dõi animation scale theo chiều ngang của pill đang active, đặc biệt là outputRange được hiển thị trong issue. Tái hiện hành vi trên iOS với shifting={false}, so sánh với Android và xác minh rằng indicator đang active vẫn giữ cùng cách hiển thị mà không thay đổi hành vi của shifting.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react-native
- Lĩnh vực
- mobile
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 45/100