fix(regression): BottomNavigation can't render a single tab (#3415)

callstack · Oct 18, 2022 · 31e9037 · 31e9037
1 parent 2b1c1df
commit 31e9037
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
@@ -609,14 +609,14 @@ const BottomNavigation = ({
     ? overlay(elevation, colors?.surface)
     : colors?.primary;
 
-  const v2BackgroundColorInterpolation = indexAnim.interpolate({
+  const v2BackgroundColorInterpolation = shifting ? indexAnim.interpolate({
     inputRange: routes.map((_, i) => i),
     // FIXME: does outputRange support ColorValue or just strings?
     // @ts-expect-error
     outputRange: routes.map(
       (route) => getColor({ route }) || approxBackgroundColor
     ),
-  });
+  }) : approxBackgroundColor;
 
   const backgroundColor = isV3
     ? customBackground || theme.colors.elevation.level2

diff --git a/src/components/__tests__/BottomNavigation.test.js b/src/components/__tests__/BottomNavigation.test.js
@@ -337,3 +337,17 @@ it('renders custom background color passed to barStyle property', () => {
   const wrapper = getByTestId('bottom-navigation-bar-content');
   expect(wrapper).toHaveStyle({ backgroundColor: red300 });
 });
+
+it('renders a single tab', () => {
+  const { queryByTestId } = render(
+    <BottomNavigation
+      shifting={false}
+      navigationState={createState(0, 1)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+      testID={'bottom-navigation'}
+    />
+  );
+
+  expect(queryByTestId('bottom-navigation')).not.toBeNull();
+})