fix(bottomNavigation): fix bottom navigation to allow unselected state

example/src/Examples/BottomNavigationExample.tsx

@@ -140,6 +140,13 @@ const BottomNavigationExample = ({ navigation }: Props) => {
             }}
             title="Scene animation: opacity"
           />
+          <Menu.Item
+            trailingIcon={sceneAnimation === 'opacity' ? 'check' : undefined}
+            onPress={() => {
+              setIndex(-1);
+            }}
+            title="Unselect menu items"
+          />
         </Menu>
       </Appbar.Header>
       <BottomNavigation

example/src/Examples/DialogExample.tsx

@@ -3,6 +3,8 @@ import { Platform, StyleSheet } from 'react-native';
 
 import { Button } from 'react-native-paper';
 
+import { useExampleTheme } from '..';
+import ScreenWrapper from '../ScreenWrapper';
 import {
   DialogWithCustomColors,
   DialogWithDismissableBackButton,
@@ -12,8 +14,6 @@ import {
   DialogWithRadioBtns,
   UndismissableDialog,
 } from './Dialogs';
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
 
 type ButtonVisibility = {
   [key: string]: boolean | undefined;

src/components/BottomNavigation/BottomNavigation.tsx

@@ -353,6 +353,9 @@ const BottomNavigation = <Route extends BaseRoute>({
 }: Props<Route>) => {
   const theme = useInternalTheme(themeOverrides);
   const { scale } = theme.animation;
+  const isValidIndex =
+    navigationState.index >= 0 &&
+    navigationState.index < navigationState.routes.length;
   const compact = compactProp ?? !theme.isV3;
   let shifting =
     shiftingProp ?? (theme.isV3 ? false : navigationState.routes.length > 3);
@@ -364,7 +367,9 @@ const BottomNavigation = <Route extends BaseRoute>({
     );
   }
 
-  const focusedKey = navigationState.routes[navigationState.index].key;
+  const focusedKey = isValidIndex
+    ? navigationState.routes[navigationState.index].key
+    : '';
 
   /**
    * Active state of individual tab item positions:
@@ -400,6 +405,7 @@ const BottomNavigation = <Route extends BaseRoute>({
 
   const animateToIndex = React.useCallback(
     (index: number) => {
+      if (index < 0 || index > navigationState.routes.length) return;
       Animated.parallel([
         ...navigationState.routes.map((_, i) =>
           Animated.timing(tabsPositionAnims[i], {

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -456,6 +456,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
 
   const animateToIndex = React.useCallback(
     (index: number) => {
+      if (index < 0 || index > navigationState.routes.length) return;
       // Reset the ripple to avoid glitch if it's currently animating
       rippleAnim.setValue(MIN_RIPPLE_SCALE);
 

src/components/__tests__/BottomNavigation.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated, Easing, Platform, StyleSheet } from 'react-native';
+import { Animated, Easing, Platform, StyleSheet, Text } from 'react-native';
 
 import { act, fireEvent, render } from '@testing-library/react-native';
 import color from 'color';
@@ -656,3 +656,79 @@ it("allows customizing Route's type via generics", () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('renders all icons as unfocused when index is -1', () => {
+  const navigationState = {
+    index: -1,
+    routes: Array.from({ length: 3 }, (_, i) => ({
+      key: `key-${i}`,
+      icon: icons[i],
+      title: `Route: ${i}`,
+    })),
+  };
+
+  const component = render(
+    <BottomNavigation
+      shifting={false}
+      navigationState={navigationState}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+      renderIcon={({ route, focused, color }) => (
+        <Text testID={`icon-${route.key}`} style={{ color }}>
+          {focused ? 'focused' : 'unfocused'}
+        </Text>
+      )}
+    />
+  );
+  const { container } = component;
+  const iconNodes0 = container.findAll(
+    (node) => node.props.testID === 'icon-key-0'
+  );
+  const visibleIcon0 = iconNodes0.find((node) => {
+    // node.parent it's an Animated.View wrapping the icon so we can check that its style.opacity equals 1.
+    const parentStyle = node.parent?.props.style;
+    if (Array.isArray(parentStyle)) {
+      return parentStyle.some((style) => style && style.opacity === 1);
+    }
+    return parentStyle && parentStyle.opacity === 1;
+  });
+  expect(visibleIcon0!.props.children).toBe('unfocused');
+});
+
+it('renders all icons as unfocused when index is greater than the the routes length', () => {
+  const navigationState = {
+    index: 4,
+    routes: Array.from({ length: 3 }, (_, i) => ({
+      key: `key-${i}`,
+      icon: icons[i],
+      title: `Route: ${i}`,
+    })),
+  };
+
+  const component = render(
+    <BottomNavigation
+      shifting={false}
+      navigationState={navigationState}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+      renderIcon={({ route, focused, color }) => (
+        <Text testID={`icon-${route.key}`} style={{ color }}>
+          {focused ? 'focused' : 'unfocused'}
+        </Text>
+      )}
+    />
+  );
+  const { container } = component;
+  const iconNodes0 = container.findAll(
+    (node) => node.props.testID === 'icon-key-2'
+  );
+  const visibleIcon2 = iconNodes0.find((node) => {
+    // node.parent it's an Animated.View wrapping the icon so we can check that its style.opacity equals 1.
+    const parentStyle = node.parent?.props.style;
+    if (Array.isArray(parentStyle)) {
+      return parentStyle.some((style) => style && style.opacity === 1);
+    }
+    return parentStyle && parentStyle.opacity === 1;
+  });
+  expect(visibleIcon2!.props.children).toBe('unfocused');
+});

src/styles/fonts.tsx

@@ -1,7 +1,7 @@
 import { Platform, PlatformOSType } from 'react-native';
 
-import { typescale } from './themes/v3/tokens';
 import type { Fonts, MD3Type, MD3Typescale, MD3TypescaleKey } from '../types';
+import { typescale } from './themes/v3/tokens';
 
 export const fontConfig = {
   web: {