diff --git a/src/views/TabView/TabBarBottom.js b/src/views/TabView/TabBarBottom.js
index e4ebba5..85e4058 100644
--- a/src/views/TabView/TabBarBottom.js
+++ b/src/views/TabView/TabBarBottom.js
@@ -61,7 +61,9 @@ export default class TabBarBottom extends PureComponent<DefaultProps, Props, voi
       inactiveTintColor,
     } = this.props;
     const { index } = scene;
-    const inputRange = navigationState.routes.map((x: any, i: number) => i);
+    const { routes } = navigationState;
+    // Prepend '-1', so there are always at least 2 items in inputRange
+    const inputRange = [-1, ...routes.map((x: *, i: number) => i)];
     const outputRange = inputRange.map((inputIndex: number) =>
       (inputIndex === index ? activeTintColor : inactiveTintColor)
     );
@@ -106,7 +108,9 @@ export default class TabBarBottom extends PureComponent<DefaultProps, Props, voi
       inactiveBackgroundColor,
       style,
     } = this.props;
-    const inputRange = navigationState.routes.map((x: any, i: number) => i);
+    const { routes } = navigationState;
+    // Prepend '-1', so there are always at least 2 items in inputRange
+    const inputRange = [-1, ...routes.map((x: *, i: number) => i)];
     return (
       <View style={[styles.tabBar, style]}>
         {navigationState.routes.map((route: NavigationRoute, index: number) => {
diff --git a/src/views/TabView/TabBarIcon.js b/src/views/TabView/TabBarIcon.js
index 6aca347..ff0d91e 100644
--- a/src/views/TabView/TabBarIcon.js
+++ b/src/views/TabView/TabBarIcon.js
@@ -42,7 +42,9 @@ export default class TabBarIcon extends PureComponent<void, Props, void> {
       style,
     } = this.props;
     const { route, index } = scene;
-    const inputRange = navigationState.routes.map((x: any, i: number) => i);
+    const { routes } = navigationState;
+    // Prepend '-1', so there are always at least 2 items in inputRange
+    const inputRange = [-1, ...routes.map((x: *, i: number) => i)];
     const activeOpacity = position.interpolate({
       inputRange,
       outputRange: inputRange.map((i: number) => (i === index ? 1 : 0)),
diff --git a/src/views/TabView/TabBarTop.js b/src/views/TabView/TabBarTop.js
index 1df9a64..7dc5d59 100644
--- a/src/views/TabView/TabBarTop.js
+++ b/src/views/TabView/TabBarTop.js
@@ -67,7 +67,9 @@ export default class TabBarTop extends PureComponent<DefaultProps, Props, void>
       return null;
     }
     const { index } = scene;
-    const inputRange = navigationState.routes.map((x: any, i: number) => i);
+    const { routes } = navigationState;
+    // Prepend '-1', so there are always at least 2 items in inputRange
+    const inputRange = [-1, ...routes.map((x: *, i: number) => i)];
     const outputRange = inputRange.map((inputIndex: number) =>
       (inputIndex === index ? activeTintColor : inactiveTintColor)
     );