From 685a997f7f5c107ad89bb99f28cf4b54d53436d7 Mon Sep 17 00:00:00 2001 From: Robert Rhoades Date: Fri, 17 Oct 2025 12:23:45 +0100 Subject: [PATCH] fix: bottom navigation shifting={false} active pill display When the bottom nav has the attribute shifting={false} the pill shape is misformed on the active tabs. On clicking around this seems inconsistent. (See https://github.com/callstack/react-native-paper/issues/4819) This appears to be because the animated view is added / removed as the tab is focused causing the animation to not play or half play. Since it starts at 0.5 scaleX this appears to the user as a squashed pill shape. The intended animation is to expand out from the center. This commit fixes this by ensuring the animation is always present and simply varies the outputRange of the animation depending on the focused state. --- .../BottomNavigation/BottomNavigationBar.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx index 05264c610a..8bb4dfe2c3 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -671,12 +671,10 @@ const BottomNavigationBar = ({ : 1; // Scale horizontally the outline pill - const outlineScale = focused - ? active.interpolate({ - inputRange: [0, 1], - outputRange: [0.5, 1], - }) - : 0; + const outlineScale = active.interpolate({ + inputRange: [0, 1], + outputRange: focused ? [0.5, 1] : [0, 0], + }); const badge = getBadge({ route }); @@ -740,7 +738,7 @@ const BottomNavigationBar = ({ }, ]} > - {isV3 && focused && ( + {isV3 && (