callstack / callstack/react-native-paper

BottomNavigationBar shifting={false} display bug on iOS

Đang mở
#4,819 3 bình luận 3 reaction 0 người được giao Xem trên GitHub
bug
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

Mở 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.