From e4f5852a1365aa1ec8619231f3c7d0987ed38486 Mon Sep 17 00:00:00 2001
From: kuzkokov <kuzkokov@gmail.com>
Date: Sat, 27 Apr 2024 19:09:39 +0300
Subject: [PATCH] MUK001: Improve HorizontalTabs

---
 src/components/common/HorizontalTabs/index.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/common/HorizontalTabs/index.tsx b/src/components/common/HorizontalTabs/index.tsx
index 3a053e4..fc12ebd 100644
--- a/src/components/common/HorizontalTabs/index.tsx
+++ b/src/components/common/HorizontalTabs/index.tsx
@@ -30,6 +30,7 @@ interface HorizontalTabsStyles {
   'horizontal-tabs'?: ViewStyle;
   'horizontal-tabs__text'?: TextStyle;
   'horizontal-tabs__item'?: ViewStyle;
+  'horizontal-tabs__underline'?: ViewStyle;
 }
 
 interface HorizontalTabsState {
@@ -188,6 +189,13 @@ export const HorizontalTabs = forwardRef<HorizontalTabsRefType, HorizontalTabsPr
               )}
             </React.Fragment>
           ))}
+          <Animated.View
+            style={[
+              innerStyles['horizontal-tabs__underline'],
+              styles['horizontal-tabs__underline'],
+              animatedStyleUnderline,
+            ]}
+          />
         </View>
       );
     };
@@ -209,9 +217,6 @@ export const HorizontalTabs = forwardRef<HorizontalTabsRefType, HorizontalTabsPr
         ) : (
           <>{renderTabs()}</>
         )}
-        <Animated.View
-          style={[innerStyles['horizontal-tabs__underline'], animatedStyleUnderline]}
-        />
       </View>
     );
   },
@@ -224,11 +229,14 @@ export const useHorizontalTabsStyles = makeStyles(({ colors }) =>
       borderBottomWidth: 1,
       justifyContent: 'center',
       position: 'relative',
+      zIndex: 0,
     },
+    'horizontal-tabs__item': {},
     'horizontal-tabs__text': {
       fontSize: 14,
       fontWeight: '500',
     },
+    'horizontal-tabs__underline': {},
   } as HorizontalTabsStyles),
 );
 
@@ -258,7 +266,7 @@ const useInnerStyles = makeStyles(
       'horizontal-tabs__underline': {
         position: 'absolute',
         height: 2,
-        bottom: -1,
+        bottom: 0,
         backgroundColor: activeColor,
       },
     }),