diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
index 7f7ee367e4..1db1553ac0 100644
--- 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
index 78dfa95270..6be520b535 100644
--- 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();
+})