fix: BottomNavigation warn when shifting with the wrong number of tabs

src/components/BottomNavigation/BottomNavigation.tsx

@@ -58,7 +58,7 @@ export type Props = {
   /**
    * Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label.
    *
-   * By default, this is `true` when you have more than 3 tabs.
+   * By default, this is `true` when you have more than 3 tabs. Note that you need at least 2 tabs be able to run this animation.
    * Pass `shifting={false}` to explicitly disable this animation, or `shifting={true}` to always use this animation.
    */
   shifting?: boolean;
@@ -352,6 +352,14 @@ const BottomNavigation = ({
 }: Props) => {
   const { scale } = theme.animation;
 
+  if (shifting && navigationState.routes.length < 2) {
+    shifting = false;
+
+    console.warn(
+      'BottomNavigation needs at least 2 tabs to run shifting animation'
+    );
+  }
+
   const focusedKey = navigationState.routes[navigationState.index].key;
 
   /**

src/components/__tests__/BottomNavigation.test.js

@@ -75,6 +75,25 @@ it('renders non-shifting bottom navigation', () => {
   expect(tree).toMatchSnapshot();
 });
 
+it('does not crash when shifting is true and the number of tabs in the navigationState is less than 2', () => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+  render(
+    <BottomNavigation
+      shifting={true}
+      navigationState={createState(0, 1)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+    />
+  );
+
+  expect(console.warn).toHaveBeenCalledWith(
+    'BottomNavigation needs at least 2 tabs to run shifting animation'
+  );
+
+  jest.restoreAllMocks();
+});
+
 it('renders custom icon and label in shifting bottom navigation', () => {
   const tree = renderer
     .create(