callstack / callstack/react-native-paper
BottomNavigationBar shifting={false} display bug on iOS
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### 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
Contributor guide
Assessment
This issue has not been assessed yet.