callstack / callstack/react-native-paper

BottomNavigationBar shifting={false} display bug on iOS

未关闭
#4,819 3 条评论 3 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

### 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

贡献指南

打开贡献指南

调研方向

从 MyComponent.js 中的 BottomNavigation 示例开始,跟踪 active pill 的水平缩放动画,尤其是 issue 中显示的 outputRange。在 iOS 上使用 shifting={false} 重现该行为,将其与 Android 进行比较,并验证 active indicator 在不改变 shifting 行为的情况下保持相同的显示效果。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native
领域
mobile
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。