callstack / callstack/react-native-paper

BottomNavigationBar shifting={false} display bug on iOS

Open
#4,819 3 comments 3 reactions 0 assignees View on GitHub
bug
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.