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

Author: studioromeo

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -671,12 +671,10 @@ const BottomNavigationBar = <Route extends BaseRoute>({
               : 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 = <Route extends BaseRoute>({
                       },
                     ]}
                   >
-                    {isV3 && focused && (
+                    {isV3 && (
                       <Animated.View
                         style={[
                           styles.outline,