Merge pull request Expensify#47485 from bernhardoj/fix/47381-blue-out…

…line-is-very-light Fix blue outline is almost not visible in tab bar button
tienifr · Aug 16, 2024 · 5d09846 · 5d09846
2 parents cf897a0 + e2874ef
commit 5d09846
Showing 1 changed file with 21 additions and 19 deletions.
diff --git a/src/components/TabSelector/TabSelectorItem.tsx b/src/components/TabSelector/TabSelectorItem.tsx
@@ -1,12 +1,14 @@
-import React from 'react';
-import {Animated, StyleSheet} from 'react-native';
+import React, {useState} from 'react';
+import {Animated} from 'react-native';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type IconAsset from '@src/types/utils/IconAsset';
 import TabIcon from './TabIcon';
 import TabLabel from './TabLabel';
 
+const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(PressableWithFeedback);
+
 type TabSelectorItemProps = {
     /** Function to call when onPress */
     onPress?: () => void;
@@ -32,29 +34,29 @@ type TabSelectorItemProps = {
 
 function TabSelectorItem({icon, title = '', onPress = () => {}, backgroundColor = '', activeOpacity = 0, inactiveOpacity = 1, isActive = false}: TabSelectorItemProps) {
     const styles = useThemeStyles();
+    const [isHovered, setIsHovered] = useState(false);
+
     return (
-        <PressableWithFeedback
+        <AnimatedPressableWithFeedback
             accessibilityLabel={title}
-            style={[styles.tabSelectorButton]}
+            style={[styles.tabSelectorButton, styles.tabBackground(isHovered, isActive, backgroundColor)]}
             wrapperStyle={[styles.flex1]}
             onPress={onPress}
+            onHoverIn={() => setIsHovered(true)}
+            onHoverOut={() => setIsHovered(false)}
             role={CONST.ROLE.BUTTON}
         >
-            {({hovered}) => (
-                <Animated.View style={[styles.tabSelectorButton, StyleSheet.absoluteFill, styles.tabBackground(hovered, isActive, backgroundColor)]}>
-                    <TabIcon
-                        icon={icon}
-                        activeOpacity={styles.tabOpacity(hovered, isActive, activeOpacity, inactiveOpacity).opacity}
-                        inactiveOpacity={styles.tabOpacity(hovered, isActive, inactiveOpacity, activeOpacity).opacity}
-                    />
-                    <TabLabel
-                        title={title}
-                        activeOpacity={styles.tabOpacity(hovered, isActive, activeOpacity, inactiveOpacity).opacity}
-                        inactiveOpacity={styles.tabOpacity(hovered, isActive, inactiveOpacity, activeOpacity).opacity}
-                    />
-                </Animated.View>
-            )}
-        </PressableWithFeedback>
+            <TabIcon
+                icon={icon}
+                activeOpacity={styles.tabOpacity(isHovered, isActive, activeOpacity, inactiveOpacity).opacity}
+                inactiveOpacity={styles.tabOpacity(isHovered, isActive, inactiveOpacity, activeOpacity).opacity}
+            />
+            <TabLabel
+                title={title}
+                activeOpacity={styles.tabOpacity(isHovered, isActive, activeOpacity, inactiveOpacity).opacity}
+                inactiveOpacity={styles.tabOpacity(isHovered, isActive, inactiveOpacity, activeOpacity).opacity}
+            />
+        </AnimatedPressableWithFeedback>
     );
 }