refactor: adjust icons opacity

callstack · Feb 8, 2022 · 4b3e3a4 · 4b3e3a4
1 parent 9936468
commit 4b3e3a4
Showing 1 changed file with 8 additions and 9 deletions.
diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
@@ -759,16 +759,13 @@ const BottomNavigation = ({
               // This trick gives the illusion that we are animating between active and inactive colors.
               // This is to ensure that we can use native driver, as colors cannot be animated with native driver.
               const activeOpacity = active;
-              const inactiveOpacityInterpolation = active.interpolate({
+              const inactiveOpacity = active.interpolate({
                 inputRange: [0, 1],
                 outputRange: [1, 0],
               });
 
-              const inactiveOpacity = !isV3
-                ? inactiveOpacityInterpolation
-                : focused
-                ? inactiveOpacityInterpolation
-                : 1;
+              const v3ActiveOpacity = focused ? 1 : 0;
+              const v3InactiveOpacity = focused ? 0 : 1;
 
               // Scale horizontally the outline pill
               const outlineScale = focused
@@ -785,7 +782,7 @@ const BottomNavigation = ({
                 route,
                 borderless: true,
                 centered: true,
-                rippleColor: touchColor,
+                rippleColor: isV3 ? 'transparent' : touchColor,
                 onPress: () => handleTabPress(index),
                 testID: getTestID({ route }),
                 accessibilityLabel: getAccessibilityLabel({ route }),
@@ -835,7 +832,7 @@ const BottomNavigation = ({
                         style={[
                           styles.iconWrapper,
                           isV3 && styles.v3IconWrapper,
-                          { opacity: activeOpacity },
+                          { opacity: isV3 ? v3ActiveOpacity : activeOpacity },
                         ]}
                       >
                         {renderIcon ? (
@@ -856,7 +853,9 @@ const BottomNavigation = ({
                         style={[
                           styles.iconWrapper,
                           isV3 && styles.v3IconWrapper,
-                          { opacity: inactiveOpacity },
+                          {
+                            opacity: isV3 ? v3InactiveOpacity : inactiveOpacity,
+                          },
                         ]}
                       >
                         {renderIcon ? (