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

Research direction

Start with the BottomNavigation sample in MyComponent.js and trace the active pill's horizontal scale animation, especially the outputRange shown in the issue. Reproduce the behavior on iOS with shifting={false}, compare it with Android, and verify that the active indicator keeps the same display without changing shifting behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.