callstack / callstack/react-native-paper

BottomNavigationBar shifting={false} display bug on iOS

Abierto
#4,819 3 comentarios 3 reacciones 0 asignados Ver en GitHub
bug
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.2k
Merge medio
5 d 23 h
PR fusionados (30 d)
12

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.