From 09a597a932b6c2d06504d424a3ff5f35cbc8e5b1 Mon Sep 17 00:00:00 2001
From: Bruno Castro <bruno.castro@codeminer42.com>
Date: Tue, 11 Oct 2022 13:59:26 -0300
Subject: [PATCH] fix: BottomNavigation warn when shifting with the wrong
 number of tabs

---
 .../BottomNavigation/BottomNavigation.tsx     |  9 +++++++++
 .../__tests__/BottomNavigation.test.js        | 19 +++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
index 1db1553ac0..7b930bdea4 100644
--- a/src/components/BottomNavigation/BottomNavigation.tsx
+++ b/src/components/BottomNavigation/BottomNavigation.tsx
@@ -65,6 +65,7 @@ export type Props = {
    *
    * By default, this is `false` with theme version 3 and `true` when you have more than 3 tabs.
    * Pass `shifting={false}` to explicitly disable this animation, or `shifting={true}` to always use this animation.
+   * Note that you need at least 2 tabs be able to run this animation.
    */
   shifting?: boolean;
   /**
@@ -387,6 +388,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;
 
   /**
diff --git a/src/components/__tests__/BottomNavigation.test.js b/src/components/__tests__/BottomNavigation.test.js
index 6be520b535..c2209c3019 100644
--- a/src/components/__tests__/BottomNavigation.test.js
+++ b/src/components/__tests__/BottomNavigation.test.js
@@ -175,6 +175,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(