fix: avoid opacity change in tab bar due to overswipe to left

Author: satya164

src/TabBarIndicator.js

@@ -13,15 +13,14 @@ export type Props<T> = {|
   style?: ViewStyleProp,
 |};
 
+const { max, min, multiply } = Animated;
+
 export default function TabBarIndicator<T: Route>(props: Props<T>) {
   const { width, position, navigationState, style } = props;
   const { routes } = navigationState;
-  const translateX = Animated.multiply(
-    Animated.interpolate(position, {
-      inputRange: [0, routes.length - 1],
-      outputRange: [0, routes.length - 1],
-      extrapolate: 'clamp',
-    }),
+
+  const translateX = multiply(
+    max(min(position, routes.length - 1), 0),
     width * (I18nManager.isRTL ? -1 : 1)
   );
 

src/TabBarItem.js

@@ -69,18 +69,27 @@ export default function TabBarItem<T: Route>({
   const tabIndex = navigationState.routes.indexOf(route);
   const isFocused = navigationState.index === tabIndex;
 
-  // Prepend '-1', so there are always at least 2 items in inputRange
-  const inputRange = [-1, ...navigationState.routes.map((x, i) => i)];
-
-  const activeOpacity = Animated.interpolate(position, {
-    inputRange,
-    outputRange: inputRange.map(i => (i === tabIndex ? 1 : 0)),
-  });
-
-  const inactiveOpacity = Animated.interpolate(position, {
-    inputRange,
-    outputRange: inputRange.map(i => (i === tabIndex ? 0 : 1)),
-  });
+  let activeOpacity;
+  let inactiveOpacity;
+
+  if (navigationState.routes.length > 1) {
+    const inputRange = navigationState.routes.map((x, i) => i);
+
+    activeOpacity = Animated.interpolate(position, {
+      inputRange,
+      outputRange: inputRange.map(i => (i === tabIndex ? 1 : 0)),
+    });
+
+    inactiveOpacity = Animated.interpolate(position, {
+      inputRange,
+      outputRange: inputRange.map(i => (i === tabIndex ? 0 : 1)),
+    });
+  } else {
+    // When there's only one tab, we can't use interpolate
+    // Coz inputRange can't have only one item
+    activeOpacity = 1;
+    inactiveOpacity = 0;
+  }
 
   let icon = null;
   let label = null;