fix(rn): check tab current index frequency

Signed-off-by: Innei <[email protected]>
RSSNext · Jan 8, 2025 · fc3a3ce · fc3a3ce
1 parent 9c3400a
commit fc3a3ce
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/apps/mobile/src/components/ui/tabview/TabBar.tsx b/apps/mobile/src/components/ui/tabview/TabBar.tsx
@@ -1,6 +1,7 @@
 import { cn } from "@follow/utils"
+import { debounce } from "es-toolkit/compat"
 import type { FC } from "react"
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react"
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react"
 import type {
   Animated as AnimatedNative,
   StyleProp,
@@ -77,19 +78,24 @@ export const TabBar = forwardRef<ScrollView, TabBarProps>(
     }, [pagerOffsetX, sharedPagerOffsetX])
     const tabRef = useRef<ScrollView>(null)
 
+    const handleChangeTabIndex = useCallback((index: number) => {
+      setCurrentTab(index)
+      onTabItemPress?.(index)
+    }, [])
     useEffect(() => {
       if (!pagerOffsetX) return
-      const listener = pagerOffsetX.addListener(({ value }) => {
-        // Calculate which tab should be active based on scroll position
-        const tabIndex = Math.round(value / tabBarWidth)
-        if (tabIndex !== currentTab) {
-          setCurrentTab(tabIndex)
-          onTabItemPress?.(tabIndex)
-        }
-      })
+      const listener = pagerOffsetX.addListener(
+        debounce(({ value }) => {
+          // Calculate which tab should be active based on scroll position
+          const tabIndex = Math.round(value / tabBarWidth)
+          if (tabIndex !== currentTab) {
+            handleChangeTabIndex(tabIndex)
+          }
+        }, 36),
+      )
 
       return () => pagerOffsetX.removeListener(listener)
-    }, [currentTab, onTabItemPress, pagerOffsetX, tabBarWidth])
+    }, [currentTab, handleChangeTabIndex, onTabItemPress, pagerOffsetX, tabBarWidth])
 
     useImperativeHandle(ref, () => tabRef.current!)
     useEffect(() => {
@@ -151,8 +157,7 @@ export const TabBar = forwardRef<ScrollView, TabBarProps>(
         {tabs.map((tab, index) => (
           <TabItem
             onPress={() => {
-              setCurrentTab(index)
-              onTabItemPress?.(index)
+              handleChangeTabIndex(index)
             }}
             key={tab.value}
             isSelected={index === currentTab}

diff --git a/...obile/src/components/ui/tabview/index.tsx → ...ile/src/components/ui/tabview/TabView.tsx b/...obile/src/components/ui/tabview/index.tsx → ...ile/src/components/ui/tabview/TabView.tsx
diff --git a/apps/mobile/src/modules/discover/Recommendations.tsx b/apps/mobile/src/modules/discover/Recommendations.tsx
@@ -11,8 +11,8 @@ import { Text, TouchableOpacity, View } from "react-native"
 import type { PanGestureHandlerGestureEvent } from "react-native-gesture-handler"
 import { PanGestureHandler } from "react-native-gesture-handler"
 
-import type { TabComponent } from "@/src/components/ui/tabview"
-import { TabView } from "@/src/components/ui/tabview"
+import type { TabComponent } from "@/src/components/ui/tabview/TabView"
+import { TabView } from "@/src/components/ui/tabview/TabView"
 import { apiClient } from "@/src/lib/api-fetch"
 
 import { RSSHubCategoryCopyMap } from "./copy"