From 1cf2613171c9a97fac01664d9c79758eaa365806 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 21 Sep 2023 16:59:30 +0700
Subject: [PATCH 01/26] Separate pressable with animated.view, add hover color
 to tabitem

---
 src/components/TabSelector/TabSelector.js     |  3 +-
 src/components/TabSelector/TabSelectorItem.js | 44 ++++++++++++-------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index 79cd1a6dd17d..e36eff4abd12 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -82,7 +82,7 @@ const getBackgroundColor = (position, routesLength, tabIndex) => {
 
 function TabSelector({state, navigation, onTabPress, position}) {
     const {translate} = useLocalize();
-
+    const hoverBackgroundColor = themeColors.border;
     return (
         <View style={styles.tabSelector}>
             {_.map(state.routes, (route, index) => {
@@ -120,6 +120,7 @@ function TabSelector({state, navigation, onTabPress, position}) {
                         activeOpacity={activeOpacity}
                         inactiveOpacity={inactiveOpacity}
                         backgroundColor={backgroundColor}
+                        hoverBackgroundColor={hoverBackgroundColor}
                     />
                 );
             })}
diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index d0ea8fcc773b..36aed843fc24 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -20,6 +20,10 @@ const propTypes = {
     // eslint-disable-next-line
     backgroundColor: PropTypes.any,
 
+    /** Hovered background color value for the tab button */
+    // eslint-disable-next-line
+    backgroundColor: PropTypes.string,
+
     /** Animated opacity value while the label is inactive state */
     // eslint-disable-next-line
     inactiveOpacity: PropTypes.any,
@@ -34,31 +38,37 @@ const defaultProps = {
     icon: () => {},
     title: '',
     backgroundColor: '',
+    hoverBackgroundColor: '',
     inactiveOpacity: 1,
     activeOpacity: 0,
 };
 
-const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(PressableWithFeedback);
-
-function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity, inactiveOpacity}) {
+function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackgroundColor, activeOpacity, inactiveOpacity}) {
     return (
-        <AnimatedPressableWithFeedback
+        <PressableWithFeedback
             accessibilityLabel={title}
-            style={[styles.tabSelectorButton, {backgroundColor}]}
             wrapperStyle={[styles.flex1]}
             onPress={onPress}
-        >
-            <TabIcon
-                icon={icon}
-                activeOpacity={activeOpacity}
-                inactiveOpacity={inactiveOpacity}
-            />
-            <TabLabel
-                title={title}
-                activeOpacity={activeOpacity}
-                inactiveOpacity={inactiveOpacity}
-            />
-        </AnimatedPressableWithFeedback>
+        >{({hovered})=>(
+            <Animated.View
+                style={[
+                    styles.tabSelectorButton,
+                    { backgroundColor: Boolean(hoverBackgroundColor) && hovered ? hoverBackgroundColor : backgroundColor },
+                ]}
+            >
+                <TabIcon
+                    icon={icon}
+                    activeOpacity={hovered ? 1 : activeOpacity}
+                    inactiveOpacity={hovered ? 0 : inactiveOpacity}
+                />
+                <TabLabel
+                    title={title}
+                    activeOpacity={hovered ? 1 : activeOpacity}
+                    inactiveOpacity={hovered ? 0 : inactiveOpacity}
+                />
+            </Animated.View>
+        )}
+        </PressableWithFeedback>
     );
 }
 

From e3b8121b516b58cba57e41a5b8324e8604775427 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 22 Sep 2023 10:25:01 +0700
Subject: [PATCH 02/26] make tab label always strong

---
 src/styles/styles.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 842d4aa5b902..473778fb7367 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3420,8 +3420,8 @@ const styles = (theme) => ({
 
     tabText: (isSelected) => ({
         marginLeft: 8,
-        fontFamily: isSelected ? fontFamily.EXP_NEUE_BOLD : fontFamily.EXP_NEUE,
-        fontWeight: isSelected ? fontWeightBold : 400,
+        fontFamily: fontFamily.EXP_NEUE_BOLD,
+        fontWeight: fontWeightBold,
         color: isSelected ? theme.textLight : theme.textSupporting,
     }),
 

From 6a4c8879f3dac1658e707309c2109e75f4920788 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 22 Sep 2023 14:29:35 +0700
Subject: [PATCH 03/26] prettier and lint

---
 src/components/TabSelector/TabSelector.js     |  3 +-
 src/components/TabSelector/TabSelectorItem.js | 42 +++++++++----------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index e36eff4abd12..f6ff76818d0f 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -82,7 +82,7 @@ const getBackgroundColor = (position, routesLength, tabIndex) => {
 
 function TabSelector({state, navigation, onTabPress, position}) {
     const {translate} = useLocalize();
-    const hoverBackgroundColor = themeColors.border;
+    const hoverBackgroundColor = themeColors.highlightBG;
     return (
         <View style={styles.tabSelector}>
             {_.map(state.routes, (route, index) => {
@@ -121,6 +121,7 @@ function TabSelector({state, navigation, onTabPress, position}) {
                         inactiveOpacity={inactiveOpacity}
                         backgroundColor={backgroundColor}
                         hoverBackgroundColor={hoverBackgroundColor}
+                        isFocused={isFocused}
                     />
                 );
             })}
diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 36aed843fc24..290729559f9a 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -22,7 +22,7 @@ const propTypes = {
 
     /** Hovered background color value for the tab button */
     // eslint-disable-next-line
-    backgroundColor: PropTypes.string,
+    hoverBackgroundColor: PropTypes.string,
 
     /** Animated opacity value while the label is inactive state */
     // eslint-disable-next-line
@@ -31,6 +31,9 @@ const propTypes = {
     /** Animated opacity value while the label is in active state */
     // eslint-disable-next-line
     activeOpacity: PropTypes.any,
+
+    /** Whether this tab is active */
+    isFocused: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -41,33 +44,30 @@ const defaultProps = {
     hoverBackgroundColor: '',
     inactiveOpacity: 1,
     activeOpacity: 0,
+    isFocused: false,
 };
 
-function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackgroundColor, activeOpacity, inactiveOpacity}) {
+function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
     return (
         <PressableWithFeedback
             accessibilityLabel={title}
             wrapperStyle={[styles.flex1]}
             onPress={onPress}
-        >{({hovered})=>(
-            <Animated.View
-                style={[
-                    styles.tabSelectorButton,
-                    { backgroundColor: Boolean(hoverBackgroundColor) && hovered ? hoverBackgroundColor : backgroundColor },
-                ]}
-            >
-                <TabIcon
-                    icon={icon}
-                    activeOpacity={hovered ? 1 : activeOpacity}
-                    inactiveOpacity={hovered ? 0 : inactiveOpacity}
-                />
-                <TabLabel
-                    title={title}
-                    activeOpacity={hovered ? 1 : activeOpacity}
-                    inactiveOpacity={hovered ? 0 : inactiveOpacity}
-                />
-            </Animated.View>
-        )}
+        >
+            {({hovered}) => (
+                <Animated.View style={[styles.tabSelectorButton, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : backgroundColor}]}>
+                    <TabIcon
+                        icon={icon}
+                        activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
+                        inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
+                    />
+                    <TabLabel
+                        title={title}
+                        activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
+                        inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
+                    />
+                </Animated.View>
+            )}
         </PressableWithFeedback>
     );
 }

From ad0eb5769a0e08ea1c9abedeafe4dd78399b88cc Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 26 Sep 2023 21:41:22 +0700
Subject: [PATCH 04/26] Keep AnimatedPressableWithFeedback for optimum
 performance

---
 src/components/TabSelector/TabSelectorItem.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 290729559f9a..7f5a2add5117 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -1,4 +1,4 @@
-import {Animated} from 'react-native';
+import {Animated, View, StyleSheet} from 'react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
@@ -47,15 +47,22 @@ const defaultProps = {
     isFocused: false,
 };
 
+const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(PressableWithFeedback);
+
 function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
     return (
-        <PressableWithFeedback
+        <AnimatedPressableWithFeedback
             accessibilityLabel={title}
+            style={[styles.tabSelectorButton, {backgroundColor}]}
             wrapperStyle={[styles.flex1]}
             onPress={onPress}
         >
-            {({hovered}) => (
-                <Animated.View style={[styles.tabSelectorButton, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : backgroundColor}]}>
+            {({ hovered }) => (
+                <View style={[
+                    styles.tabSelectorButton,
+                    StyleSheet.absoluteFill,
+                    { backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : {} }
+                ]}>
                     <TabIcon
                         icon={icon}
                         activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
@@ -66,9 +73,9 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackground
                         activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
                         inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
                     />
-                </Animated.View>
+                </View>
             )}
-        </PressableWithFeedback>
+        </AnimatedPressableWithFeedback>
     );
 }
 

From 919c15db3b7213e9562a445bfabcda12bce07504 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 27 Sep 2023 08:00:41 +0700
Subject: [PATCH 05/26] change to undefined instead of empty object

---
 src/components/TabSelector/TabSelectorItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 7f5a2add5117..0b7392c17234 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -61,7 +61,7 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackground
                 <View style={[
                     styles.tabSelectorButton,
                     StyleSheet.absoluteFill,
-                    { backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : {} }
+                    { backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : undefined }
                 ]}>
                     <TabIcon
                         icon={icon}

From 395d6d84c3db16f5b4c68639e220204782728b28 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 28 Sep 2023 07:36:38 +0700
Subject: [PATCH 06/26] run prettier

---
 src/components/TabSelector/TabSelectorItem.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 0b7392c17234..55ae41342807 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -57,12 +57,10 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackground
             wrapperStyle={[styles.flex1]}
             onPress={onPress}
         >
-            {({ hovered }) => (
-                <View style={[
-                    styles.tabSelectorButton,
-                    StyleSheet.absoluteFill,
-                    { backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : undefined }
-                ]}>
+            {({hovered}) => (
+                <View
+                    style={[styles.tabSelectorButton, StyleSheet.absoluteFill, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : undefined}]}
+                >
                     <TabIcon
                         icon={icon}
                         activeOpacity={hovered && !isFocused ? 1 : activeOpacity}

From 941e1cae56ac42c872d49636c8ea6614443baafa Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 28 Sep 2023 08:28:42 +0700
Subject: [PATCH 07/26] remove unnecessary comment

---
 src/components/TabSelector/TabSelectorItem.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 55ae41342807..2eded6748a5d 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -21,7 +21,6 @@ const propTypes = {
     backgroundColor: PropTypes.any,
 
     /** Hovered background color value for the tab button */
-    // eslint-disable-next-line
     hoverBackgroundColor: PropTypes.string,
 
     /** Animated opacity value while the label is inactive state */

From 5373a25f42ba4fcbdb357953ba0bbbf224a453d6 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 28 Sep 2023 17:30:34 +0700
Subject: [PATCH 08/26] change view to animated.view

---
 src/components/TabSelector/TabSelectorItem.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 2eded6748a5d..5b738bf6660d 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -1,4 +1,4 @@
-import {Animated, View, StyleSheet} from 'react-native';
+import {Animated, StyleSheet} from 'react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
@@ -57,7 +57,7 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackground
             onPress={onPress}
         >
             {({hovered}) => (
-                <View
+                <Animated.View
                     style={[styles.tabSelectorButton, StyleSheet.absoluteFill, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : undefined}]}
                 >
                     <TabIcon
@@ -70,7 +70,7 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackground
                         activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
                         inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
                     />
-                </View>
+                </Animated.View>
             )}
         </AnimatedPressableWithFeedback>
     );

From f2dd9976525ce3285b7c6f7b464d6d3018974b00 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 29 Sep 2023 01:15:01 +0700
Subject: [PATCH 09/26] remove unnecessary variable

---
 src/components/TabSelector/TabSelector.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index f6ff76818d0f..477ab9c5d47f 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -82,7 +82,6 @@ const getBackgroundColor = (position, routesLength, tabIndex) => {
 
 function TabSelector({state, navigation, onTabPress, position}) {
     const {translate} = useLocalize();
-    const hoverBackgroundColor = themeColors.highlightBG;
     return (
         <View style={styles.tabSelector}>
             {_.map(state.routes, (route, index) => {
@@ -120,7 +119,7 @@ function TabSelector({state, navigation, onTabPress, position}) {
                         activeOpacity={activeOpacity}
                         inactiveOpacity={inactiveOpacity}
                         backgroundColor={backgroundColor}
-                        hoverBackgroundColor={hoverBackgroundColor}
+                        hoverBackgroundColor={themeColors.highlightBG}
                         isFocused={isFocused}
                     />
                 );

From a9a1a00c79fddee4119356ce79dff648dce0109c Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 29 Sep 2023 22:24:17 +0700
Subject: [PATCH 10/26] add Hoverable component

---
 src/components/TabSelector/TabSelectorItem.js | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 5b738bf6660d..30bc81b1a236 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -1,10 +1,11 @@
-import {Animated, StyleSheet} from 'react-native';
+import {Animated, StyleSheet, View} from 'react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import PressableWithFeedback from '../Pressable/PressableWithFeedback';
 import TabIcon from './TabIcon';
 import TabLabel from './TabLabel';
+import Hoverable from '../Hoverable';
 
 const propTypes = {
     /** Function to call when onPress */
@@ -50,29 +51,28 @@ const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(Pressable
 
 function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
     return (
-        <AnimatedPressableWithFeedback
-            accessibilityLabel={title}
-            style={[styles.tabSelectorButton, {backgroundColor}]}
-            wrapperStyle={[styles.flex1]}
-            onPress={onPress}
-        >
-            {({hovered}) => (
-                <Animated.View
-                    style={[styles.tabSelectorButton, StyleSheet.absoluteFill, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : undefined}]}
-                >
-                    <TabIcon
-                        icon={icon}
-                        activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
-                        inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
-                    />
-                    <TabLabel
-                        title={title}
-                        activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
-                        inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
-                    />
-                </Animated.View>
-            )}
-        </AnimatedPressableWithFeedback>
+        <View style={[styles.flex1]}>
+            <Hoverable>
+                {(hovered) => (
+                    <AnimatedPressableWithFeedback
+                        accessibilityLabel={title}
+                        style={[styles.tabSelectorButton, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : backgroundColor}]}
+                        onPress={onPress}
+                    >
+                        <TabIcon
+                            icon={icon}
+                            activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
+                            inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
+                        />
+                        <TabLabel
+                            title={title}
+                            activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
+                            inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
+                        />
+                    </AnimatedPressableWithFeedback>
+                )}
+            </Hoverable>
+        </View>
     );
 }
 

From 21ee1d2abf2e812d869de9b05ac61c56329f8e09 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 29 Sep 2023 22:32:01 +0700
Subject: [PATCH 11/26] remove unused import

---
 src/components/TabSelector/TabSelectorItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 30bc81b1a236..f090321b048c 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -1,4 +1,4 @@
-import {Animated, StyleSheet, View} from 'react-native';
+import {Animated, View} from 'react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';

From c3074236f860672d0f5716b02b75c85ad04e1028 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 29 Sep 2023 23:04:17 +0700
Subject: [PATCH 12/26] remove hoverBackgroundColor props, create tabBackground
 style function

---
 src/components/TabSelector/TabSelector.js     | 1 -
 src/components/TabSelector/TabSelectorItem.js | 9 +++------
 src/styles/styles.js                          | 4 ++++
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index 477ab9c5d47f..4efa033c60d0 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -119,7 +119,6 @@ function TabSelector({state, navigation, onTabPress, position}) {
                         activeOpacity={activeOpacity}
                         inactiveOpacity={inactiveOpacity}
                         backgroundColor={backgroundColor}
-                        hoverBackgroundColor={themeColors.highlightBG}
                         isFocused={isFocused}
                     />
                 );
diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index f090321b048c..9f5ac1a71867 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -21,9 +21,6 @@ const propTypes = {
     // eslint-disable-next-line
     backgroundColor: PropTypes.any,
 
-    /** Hovered background color value for the tab button */
-    hoverBackgroundColor: PropTypes.string,
-
     /** Animated opacity value while the label is inactive state */
     // eslint-disable-next-line
     inactiveOpacity: PropTypes.any,
@@ -41,7 +38,7 @@ const defaultProps = {
     icon: () => {},
     title: '',
     backgroundColor: '',
-    hoverBackgroundColor: '',
+    : '',
     inactiveOpacity: 1,
     activeOpacity: 0,
     isFocused: false,
@@ -49,14 +46,14 @@ const defaultProps = {
 
 const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(PressableWithFeedback);
 
-function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
+function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
     return (
         <View style={[styles.flex1]}>
             <Hoverable>
                 {(hovered) => (
                     <AnimatedPressableWithFeedback
                         accessibilityLabel={title}
-                        style={[styles.tabSelectorButton, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : backgroundColor}]}
+                        style={[styles.tabSelectorButton, styles.tabBackground(hovered, isFocused, backgroundColor)]}
                         onPress={onPress}
                     >
                         <TabIcon
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 7dd842ccb846..48c72d9b257c 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3440,6 +3440,10 @@ const styles = (theme) => ({
         color: isSelected ? theme.textLight : theme.textSupporting,
     }),
 
+    tabBackground: (hovered, isFocused, backgroundColor) => ({
+        backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
+    }),
+
     /**
      * @param {String} backgroundColor
      * @param {Number} height

From 79ec65c7c39fa9877ad1fa76de8dea7eee550353 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 29 Sep 2023 23:05:11 +0700
Subject: [PATCH 13/26] remove defaultprops unnecessary code

---
 src/components/TabSelector/TabSelectorItem.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 9f5ac1a71867..7e600e1898ee 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -38,7 +38,6 @@ const defaultProps = {
     icon: () => {},
     title: '',
     backgroundColor: '',
-    : '',
     inactiveOpacity: 1,
     activeOpacity: 0,
     isFocused: false,

From e523fe9e3423c78320b617c7313a0f01d12bd33c Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 29 Sep 2023 23:57:04 +0700
Subject: [PATCH 14/26] add tabActiveOpacity and tabInactiveOpacity

---
 src/components/TabSelector/TabSelectorItem.js | 8 ++++----
 src/styles/styles.js                          | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 7e600e1898ee..d9fb9d2a5f68 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -57,13 +57,13 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity,
                     >
                         <TabIcon
                             icon={icon}
-                            activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
-                            inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
+                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity)}
+                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, inactiveOpacity)}
                         />
                         <TabLabel
                             title={title}
-                            activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
-                            inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
+                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity)}
+                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, inactiveOpacity)}
                         />
                     </AnimatedPressableWithFeedback>
                 )}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 48c72d9b257c..6d50e4354ac5 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3444,6 +3444,10 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
+    tabActiveOpacity: (hovered, isFocused, activeOpacity) => hovered && !isFocused ? 1 : activeOpacity,
+
+    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => hovered && !isFocused ? 1 : inactiveOpacity,
+        
     /**
      * @param {String} backgroundColor
      * @param {Number} height

From 74b15c4e8a92c532e5b947698221402a511afef0 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 30 Sep 2023 00:03:46 +0700
Subject: [PATCH 15/26] run prettier

---
 src/styles/styles.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 6d50e4354ac5..2a6e44f9585f 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3444,10 +3444,10 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
-    tabActiveOpacity: (hovered, isFocused, activeOpacity) => hovered && !isFocused ? 1 : activeOpacity,
+    tabActiveOpacity: (hovered, isFocused, activeOpacity) => (hovered && !isFocused ? 1 : activeOpacity),
+
+    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? 1 : inactiveOpacity),
 
-    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => hovered && !isFocused ? 1 : inactiveOpacity,
-        
     /**
      * @param {String} backgroundColor
      * @param {Number} height

From 610fcb03c908ac4c0b3ce8bb08fe16885257a592 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 30 Sep 2023 04:56:03 +0700
Subject: [PATCH 16/26] fix tabInactiveOpacity

---
 src/styles/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 2a6e44f9585f..f6deceaf519b 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3446,7 +3446,7 @@ const styles = (theme) => ({
 
     tabActiveOpacity: (hovered, isFocused, activeOpacity) => (hovered && !isFocused ? 1 : activeOpacity),
 
-    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? 1 : inactiveOpacity),
+    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? 0 : inactiveOpacity),
 
     /**
      * @param {String} backgroundColor

From 3b9681688f808b085239df146f73782568f81a67 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 5 Oct 2023 18:58:25 +0700
Subject: [PATCH 17/26] fix tab opacity

---
 src/components/TabSelector/TabIcon.js  | 8 ++++----
 src/components/TabSelector/TabLabel.js | 8 ++++----
 src/styles/styles.js                   | 8 ++++++--
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/TabSelector/TabIcon.js b/src/components/TabSelector/TabIcon.js
index 85f1cd912ff6..f197fa7131fd 100644
--- a/src/components/TabSelector/TabIcon.js
+++ b/src/components/TabSelector/TabIcon.js
@@ -19,20 +19,20 @@ const propTypes = {
 
 const defaultProps = {
     icon: '',
-    inactiveOpacity: 1,
-    activeOpacity: 0,
+    inactiveOpacity: {opacity: 1},
+    activeOpacity: {opacity: 0},
 };
 
 function TabIcon({icon, activeOpacity, inactiveOpacity}) {
     return (
         <View>
-            <Animated.View style={{opacity: inactiveOpacity}}>
+            <Animated.View style={inactiveOpacity}>
                 <Icon
                     src={icon}
                     fill={themeColors.icon}
                 />
             </Animated.View>
-            <Animated.View style={[StyleSheet.absoluteFill, {opacity: activeOpacity}]}>
+            <Animated.View style={[StyleSheet.absoluteFill, activeOpacity]}>
                 <Icon
                     src={icon}
                     fill={themeColors.iconMenu}
diff --git a/src/components/TabSelector/TabLabel.js b/src/components/TabSelector/TabLabel.js
index 32c8a384d814..819b766b1731 100644
--- a/src/components/TabSelector/TabLabel.js
+++ b/src/components/TabSelector/TabLabel.js
@@ -18,17 +18,17 @@ const propTypes = {
 
 const defaultProps = {
     title: '',
-    inactiveOpacity: 1,
-    activeOpacity: 0,
+    inactiveOpacity: {opacity: 1},
+    activeOpacity: {opacity: 0},
 };
 
 function TabLabel({title, activeOpacity, inactiveOpacity}) {
     return (
         <View>
-            <Animated.View style={[{opacity: activeOpacity}]}>
+            <Animated.View style={[activeOpacity]}>
                 <Text style={styles.tabText(true)}>{title}</Text>
             </Animated.View>
-            <Animated.View style={[StyleSheet.absoluteFill, {opacity: inactiveOpacity}]}>
+            <Animated.View style={[StyleSheet.absoluteFill, inactiveOpacity]}>
                 <Text style={styles.tabText(false)}>{title}</Text>
             </Animated.View>
         </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 75d5375dae27..c84875aeee68 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3454,9 +3454,13 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
-    tabActiveOpacity: (hovered, isFocused, activeOpacity) => (hovered && !isFocused ? 1 : activeOpacity),
+    tabActiveOpacity: (hovered, isFocused, activeOpacity) => ({
+        opacity: hovered && !isFocused ? 1 : activeOpacity,
+    }),
 
-    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? 0 : inactiveOpacity),
+    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => ({
+        opacity: hovered && !isFocused ? 0 : inactiveOpacity,
+    }),
 
     /**
      * @param {String} backgroundColor

From 2dccca98fea2a0f062f8e3e022310519794e18ff Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 5 Oct 2023 19:38:50 +0700
Subject: [PATCH 18/26] extract style logic outside the style object

---
 src/styles/styles.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index c84875aeee68..63b9c93af247 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3454,13 +3454,9 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
-    tabActiveOpacity: (hovered, isFocused, activeOpacity) => ({
-        opacity: hovered && !isFocused ? 1 : activeOpacity,
-    }),
+    tabActiveOpacity: (hovered, isFocused, activeOpacity) => (hovered && !isFocused ? { opacity: 1 } : { opacity: activeOpacity }),
 
-    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => ({
-        opacity: hovered && !isFocused ? 0 : inactiveOpacity,
-    }),
+    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? { opacity: 0 } : { opacity: inactiveOpacity }),
 
     /**
      * @param {String} backgroundColor

From d3d77875601f04aabc55d252c88e94819daf24ad Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 5 Oct 2023 21:23:22 +0700
Subject: [PATCH 19/26] run prettier

---
 src/styles/styles.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 63b9c93af247..fc796d564d2a 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3454,9 +3454,9 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
-    tabActiveOpacity: (hovered, isFocused, activeOpacity) => (hovered && !isFocused ? { opacity: 1 } : { opacity: activeOpacity }),
+    tabActiveOpacity: (hovered, isFocused, activeOpacity) => (hovered && !isFocused ? {opacity: 1} : {opacity: activeOpacity}),
 
-    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? { opacity: 0 } : { opacity: inactiveOpacity }),
+    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? {opacity: 0} : {opacity: inactiveOpacity}),
 
     /**
      * @param {String} backgroundColor

From c4ff0e27504d519e989b2b250677627e2cf5c843 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 5 Oct 2023 21:46:19 +0700
Subject: [PATCH 20/26] add activeOpacity, inactiveOpacity to tabOpacity style
 function

---
 src/components/TabSelector/TabSelectorItem.js | 8 ++++----
 src/styles/styles.js                          | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index d9fb9d2a5f68..e95386fcf11c 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -57,13 +57,13 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity,
                     >
                         <TabIcon
                             icon={icon}
-                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity)}
-                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, inactiveOpacity)}
+                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
                         />
                         <TabLabel
                             title={title}
-                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity)}
-                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, inactiveOpacity)}
+                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
                         />
                     </AnimatedPressableWithFeedback>
                 )}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index fc796d564d2a..40c1ab878ac6 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3454,9 +3454,9 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
-    tabActiveOpacity: (hovered, isFocused, activeOpacity) => (hovered && !isFocused ? {opacity: 1} : {opacity: activeOpacity}),
+    tabActiveOpacity: (hovered, isFocused, activeOpacity, inactiveOpacity) => (hovered && !isFocused ? {opacity: inactiveOpacity} : {opacity: activeOpacity}),
 
-    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? {opacity: 0} : {opacity: inactiveOpacity}),
+    tabInactiveOpacity: (hovered, isFocused,  activeOpacity, inactiveOpacity) => (hovered && !isFocused ? {opacity: activeOpacity} : {opacity: inactiveOpacity}),
 
     /**
      * @param {String} backgroundColor

From cb4c757eb3352eb785fbea79b7645ec630127314 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 5 Oct 2023 21:51:33 +0700
Subject: [PATCH 21/26] run prettier

---
 src/styles/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 40c1ab878ac6..faa9b395a928 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3456,7 +3456,7 @@ const styles = (theme) => ({
 
     tabActiveOpacity: (hovered, isFocused, activeOpacity, inactiveOpacity) => (hovered && !isFocused ? {opacity: inactiveOpacity} : {opacity: activeOpacity}),
 
-    tabInactiveOpacity: (hovered, isFocused,  activeOpacity, inactiveOpacity) => (hovered && !isFocused ? {opacity: activeOpacity} : {opacity: inactiveOpacity}),
+    tabInactiveOpacity: (hovered, isFocused, activeOpacity, inactiveOpacity) => (hovered && !isFocused ? {opacity: activeOpacity} : {opacity: inactiveOpacity}),
 
     /**
      * @param {String} backgroundColor

From d1208c4e3a1f7cd3b01d10c490145f42075f3645 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 5 Oct 2023 23:35:22 +0700
Subject: [PATCH 22/26] unify tabOpacity style function

---
 src/components/TabSelector/TabSelectorItem.js | 8 ++++----
 src/styles/styles.js                          | 4 +---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index e95386fcf11c..fc047c993205 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -57,13 +57,13 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity,
                     >
                         <TabIcon
                             icon={icon}
-                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
-                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                            activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                            inactiveOpacity={styles.tabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)}
                         />
                         <TabLabel
                             title={title}
-                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
-                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                            activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                            inactiveOpacity={styles.tabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)}
                         />
                     </AnimatedPressableWithFeedback>
                 )}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index faa9b395a928..28d9015616f4 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3454,9 +3454,7 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
-    tabActiveOpacity: (hovered, isFocused, activeOpacity, inactiveOpacity) => (hovered && !isFocused ? {opacity: inactiveOpacity} : {opacity: activeOpacity}),
-
-    tabInactiveOpacity: (hovered, isFocused, activeOpacity, inactiveOpacity) => (hovered && !isFocused ? {opacity: activeOpacity} : {opacity: inactiveOpacity}),
+    tabOpacity: (hovered, isFocused, activeOpacityValue, inactiveOpacityValue) => (hovered && !isFocused ? {opacity: inactiveOpacityValue} : {opacity: activeOpacityValue}),
 
     /**
      * @param {String} backgroundColor

From 8bf5ead3b45a135132ec9f5fef55bed5424991f6 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 5 Oct 2023 23:46:25 +0700
Subject: [PATCH 23/26] Revert "fix tab opacity"

This reverts commit 3b9681688f808b085239df146f73782568f81a67.
---
 src/components/TabSelector/TabIcon.js  | 8 ++++----
 src/components/TabSelector/TabLabel.js | 8 ++++----
 src/styles/styles.js                   | 2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/TabSelector/TabIcon.js b/src/components/TabSelector/TabIcon.js
index f197fa7131fd..85f1cd912ff6 100644
--- a/src/components/TabSelector/TabIcon.js
+++ b/src/components/TabSelector/TabIcon.js
@@ -19,20 +19,20 @@ const propTypes = {
 
 const defaultProps = {
     icon: '',
-    inactiveOpacity: {opacity: 1},
-    activeOpacity: {opacity: 0},
+    inactiveOpacity: 1,
+    activeOpacity: 0,
 };
 
 function TabIcon({icon, activeOpacity, inactiveOpacity}) {
     return (
         <View>
-            <Animated.View style={inactiveOpacity}>
+            <Animated.View style={{opacity: inactiveOpacity}}>
                 <Icon
                     src={icon}
                     fill={themeColors.icon}
                 />
             </Animated.View>
-            <Animated.View style={[StyleSheet.absoluteFill, activeOpacity]}>
+            <Animated.View style={[StyleSheet.absoluteFill, {opacity: activeOpacity}]}>
                 <Icon
                     src={icon}
                     fill={themeColors.iconMenu}
diff --git a/src/components/TabSelector/TabLabel.js b/src/components/TabSelector/TabLabel.js
index 819b766b1731..32c8a384d814 100644
--- a/src/components/TabSelector/TabLabel.js
+++ b/src/components/TabSelector/TabLabel.js
@@ -18,17 +18,17 @@ const propTypes = {
 
 const defaultProps = {
     title: '',
-    inactiveOpacity: {opacity: 1},
-    activeOpacity: {opacity: 0},
+    inactiveOpacity: 1,
+    activeOpacity: 0,
 };
 
 function TabLabel({title, activeOpacity, inactiveOpacity}) {
     return (
         <View>
-            <Animated.View style={[activeOpacity]}>
+            <Animated.View style={[{opacity: activeOpacity}]}>
                 <Text style={styles.tabText(true)}>{title}</Text>
             </Animated.View>
-            <Animated.View style={[StyleSheet.absoluteFill, inactiveOpacity]}>
+            <Animated.View style={[StyleSheet.absoluteFill, {opacity: inactiveOpacity}]}>
                 <Text style={styles.tabText(false)}>{title}</Text>
             </Animated.View>
         </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 28d9015616f4..2da270a332d0 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3454,7 +3454,7 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
-    tabOpacity: (hovered, isFocused, activeOpacityValue, inactiveOpacityValue) => (hovered && !isFocused ? {opacity: inactiveOpacityValue} : {opacity: activeOpacityValue}),
+    tabOpacity: (hovered, isFocused, activeOpacityValue, inactiveOpacityValue) => (hovered && !isFocused ? inactiveOpacityValue : activeOpacityValue),
 
     /**
      * @param {String} backgroundColor

From 00945f4f8416c70f69c639e2398910b6f2874add Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 7 Oct 2023 06:33:07 +0700
Subject: [PATCH 24/26] Resolve issue hover not working after pressing back
 from another screen

---
 src/components/TabSelector/TabSelectorItem.js | 46 +++++++++----------
 src/styles/styles.js                          |  4 +-
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index fc047c993205..168a783ad659 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -1,11 +1,10 @@
-import {Animated, View} from 'react-native';
+import {Animated, View, StyleSheet} from 'react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import PressableWithFeedback from '../Pressable/PressableWithFeedback';
 import TabIcon from './TabIcon';
 import TabLabel from './TabLabel';
-import Hoverable from '../Hoverable';
 
 const propTypes = {
     /** Function to call when onPress */
@@ -47,28 +46,27 @@ const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(Pressable
 
 function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
     return (
-        <View style={[styles.flex1]}>
-            <Hoverable>
-                {(hovered) => (
-                    <AnimatedPressableWithFeedback
-                        accessibilityLabel={title}
-                        style={[styles.tabSelectorButton, styles.tabBackground(hovered, isFocused, backgroundColor)]}
-                        onPress={onPress}
-                    >
-                        <TabIcon
-                            icon={icon}
-                            activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
-                            inactiveOpacity={styles.tabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)}
-                        />
-                        <TabLabel
-                            title={title}
-                            activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
-                            inactiveOpacity={styles.tabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)}
-                        />
-                    </AnimatedPressableWithFeedback>
-                )}
-            </Hoverable>
-        </View>
+        <AnimatedPressableWithFeedback
+            accessibilityLabel={title}
+            style={[styles.tabSelectorButton, {backgroundColor}]}
+            wrapperStyle={[styles.flex1]}
+            onPress={onPress}
+        >
+            {({hovered}) => (
+                <View style={[styles.tabSelectorButton, StyleSheet.absoluteFill, styles.tabBackground(hovered, isFocused, undefined)]}>
+                    <TabIcon
+                        icon={icon}
+                        activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                        inactiveOpacity={styles.tabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)}
+                    />
+                    <TabLabel
+                        title={title}
+                        activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                        inactiveOpacity={styles.tabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)}
+                    />
+                </View>
+            )}
+        </AnimatedPressableWithFeedback>
     );
 }
 
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 2da270a332d0..81b3b139dcd6 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3450,8 +3450,8 @@ const styles = (theme) => ({
         color: isSelected ? theme.textLight : theme.textSupporting,
     }),
 
-    tabBackground: (hovered, isFocused, backgroundColor) => ({
-        backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
+    tabBackground: (hovered, isFocused) => ({
+        backgroundColor: hovered && !isFocused ? theme.highlightBG : undefined,
     }),
 
     tabOpacity: (hovered, isFocused, activeOpacityValue, inactiveOpacityValue) => (hovered && !isFocused ? inactiveOpacityValue : activeOpacityValue),

From bab483bd9c85bae4ce042e1d0950e2936d21c9ff Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 7 Oct 2023 20:10:35 +0700
Subject: [PATCH 25/26] tidy up code

---
 src/components/TabSelector/TabSelectorItem.js | 16 +++++++---------
 src/styles/styles.js                          |  4 ++--
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 168a783ad659..30675de538ae 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -1,4 +1,4 @@
-import {Animated, View, StyleSheet} from 'react-native';
+import {Animated, StyleSheet} from 'react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
@@ -42,18 +42,16 @@ const defaultProps = {
     isFocused: false,
 };
 
-const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(PressableWithFeedback);
-
 function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
     return (
-        <AnimatedPressableWithFeedback
+        <PressableWithFeedback
             accessibilityLabel={title}
-            style={[styles.tabSelectorButton, {backgroundColor}]}
+            style={[styles.tabSelectorButton]}
             wrapperStyle={[styles.flex1]}
             onPress={onPress}
         >
-            {({hovered}) => (
-                <View style={[styles.tabSelectorButton, StyleSheet.absoluteFill, styles.tabBackground(hovered, isFocused, undefined)]}>
+            {({ hovered }) => (
+                <Animated.View style={[styles.tabSelectorButton, StyleSheet.absoluteFill, styles.tabBackground(hovered, isFocused, backgroundColor)]}>
                     <TabIcon
                         icon={icon}
                         activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
@@ -64,9 +62,9 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity,
                         activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
                         inactiveOpacity={styles.tabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)}
                     />
-                </View>
+                </Animated.View>
             )}
-        </AnimatedPressableWithFeedback>
+        </PressableWithFeedback>
     );
 }
 
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 8afdd83e0672..d4aacfff96aa 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3491,8 +3491,8 @@ const styles = (theme) => ({
         color: isSelected ? theme.textLight : theme.textSupporting,
     }),
 
-    tabBackground: (hovered, isFocused) => ({
-        backgroundColor: hovered && !isFocused ? theme.highlightBG : undefined,
+    tabBackground: (hovered, isFocused, background) => ({
+        backgroundColor: hovered && !isFocused ? theme.highlightBG : background,
     }),
 
     tabOpacity: (hovered, isFocused, activeOpacityValue, inactiveOpacityValue) => (hovered && !isFocused ? inactiveOpacityValue : activeOpacityValue),

From e2f3650a5b96fcd83ebba3395172a9ffec631939 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 7 Oct 2023 20:22:48 +0700
Subject: [PATCH 26/26] run prettier

---
 src/components/TabSelector/TabSelectorItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 30675de538ae..6611b8acf914 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -50,7 +50,7 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity,
             wrapperStyle={[styles.flex1]}
             onPress={onPress}
         >
-            {({ hovered }) => (
+            {({hovered}) => (
                 <Animated.View style={[styles.tabSelectorButton, StyleSheet.absoluteFill, styles.tabBackground(hovered, isFocused, backgroundColor)]}>
                     <TabIcon
                         icon={icon}