From e2874ef8993ebf39fb24264f38198cbcd6fb265e Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 15 Aug 2024 15:31:54 +0800
Subject: [PATCH] fix blue outline is almost not visible

---
 .../TabSelector/TabSelectorItem.tsx           | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.tsx b/src/components/TabSelector/TabSelectorItem.tsx
index 635b9deddcfe..4117046d86ef 100644
--- a/src/components/TabSelector/TabSelectorItem.tsx
+++ b/src/components/TabSelector/TabSelectorItem.tsx
@@ -1,5 +1,5 @@
-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';
@@ -7,6 +7,8 @@ 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>
     );
 }