From c9df22db413a0a5b642d39fd656d51830b52943b Mon Sep 17 00:00:00 2001
From: WaDadidou <50441633+WaDadidou@users.noreply.github.com>
Date: Wed, 20 Sep 2023 19:55:37 +0200
Subject: [PATCH] fix: scroll to the selected tab item to let it always visible
 (#707)

---
 packages/components/tabs/Tabs.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/components/tabs/Tabs.tsx b/packages/components/tabs/Tabs.tsx
index 36e899e4c9..2f028ecb08 100644
--- a/packages/components/tabs/Tabs.tsx
+++ b/packages/components/tabs/Tabs.tsx
@@ -1,7 +1,8 @@
 import { useScrollTo } from "@nandorojo/anchor";
 import { LinearGradient } from "expo-linear-gradient";
-import React from "react";
+import React, { useRef } from "react";
 import {
+  LayoutChangeEvent,
   ScrollView,
   StyleProp,
   StyleSheet,
@@ -62,11 +63,18 @@ export const Tabs = <T extends { [key: string]: TabDefinition }>({
   noUnderline?: boolean;
 }) => {
   const { scrollTo } = useScrollTo();
-
+  const scrollViewRef = useRef<ScrollView>(null);
   const itemsKeys = objectKeys(items);
 
+  const onSelectedItemLayout = (e: LayoutChangeEvent) => {
+    scrollViewRef.current?.scrollTo({
+      x: e.nativeEvent.layout.x,
+      animated: false,
+    });
+  };
+
   return (
-    // styles are applied weirdly to scrollview so it's better to apply them to a constraining view
+    // styles are applied weirdly to ScrollView, so it's better to apply them to a constraining view
     <>
       <View
         style={[
@@ -78,6 +86,7 @@ export const Tabs = <T extends { [key: string]: TabDefinition }>({
         ]}
       >
         <ScrollView
+          ref={scrollViewRef}
           showsHorizontalScrollIndicator={false}
           horizontal
           contentContainerStyle={{
@@ -89,6 +98,7 @@ export const Tabs = <T extends { [key: string]: TabDefinition }>({
             const isSelected = selected === key;
             return (
               <TouchableOpacity
+                onLayout={isSelected ? onSelectedItemLayout : undefined}
                 key={key}
                 onPress={() =>
                   item.scrollTo