BottomNavigationBar shifting={false} display bug on iOS

[studioromeo]

Current behaviour

When using <BottomNavigationBar> 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 (
    <PaperProvider>
      <MyComponent></MyComponent>
    </PaperProvider>
  );
}

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

[ravindraguptacapgemini]

@studioromeo I am also seeing this issue, is there any workaround for now? I have used multiple versions of react-native-paper and getting the same issue on multiple iOS version. Tried versions 5.12.0...5.14.5, and iOS version as iOS 18.3 and iOS 17.2

[ravindraguptacapgemini]

For now, I am relying on this Patch https://github.com/callstack/react-native-paper/pull/4820/files

[studioromeo]

I have raised a potential fix for this https://github.com/callstack/react-native-paper/pull/4821 but it needs validation