wip

example/src/views/tabs.tsx

@@ -1,19 +1,16 @@
-import { Tabs, useTabsInternal } from '@rneui/base/dist/Tab/Tab';
+import { Tabs, TabsRef } from '@rneui/base/dist/Tab/Tab';
 import { Button, Tab as TabBar, TabView, Text } from '@rneui/themed';
-import React from 'react';
+import React, { useRef } from 'react';
 import { ScrollView } from 'react-native';
 import { Header } from '../components/header';
 
-const SubComponent = () => {
-  const { changeIndex } = useTabsInternal();
-  return <Button onPress={() => changeIndex(2)}>Jump to Tab 3</Button>;
-};
-
 export default () => {
+  const tabRef = useRef<TabsRef>();
+
   return (
     <>
       <Header title="Tab" />
-      <Tabs onChange={console.log} value={1}>
+      <Tabs ref={tabRef}>
         <TabBar
           indicatorStyle={{
             backgroundColor: 'white',
@@ -59,7 +56,9 @@ export default () => {
         <TabView onSwipeStart={console.log}>
           <TabView.Item style={{ backgroundColor: 'red', width: '100%' }}>
             <ScrollView>
-              <SubComponent />
+              <Button onPress={() => tabRef.current.changeIndex(2)}>
+                Jump to Tab 3
+              </Button>
               <Text h1>{Math.random()}</Text>
               <Text h1>Recent 0</Text>
               <Text h1>Recent 0</Text>

packages/base/src/Tab/Tab.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import {
   Animated,
   Easing,
@@ -85,45 +85,64 @@ const TabContext = React.createContext(
   }
 );
 
-export const Tabs = ({
-  children,
-  animationType = 'spring',
-  animationConfig = {},
-}) => {
-  const translateX = React.useRef(new Animated.Value(0));
-  const currentIndex = React.useRef(0);
-  const onIndexChangeRef = React.useRef((value: number) => value);
-
-  const animate = React.useCallback(
-    (toValue: number, onDone) => {
-      currentIndex.current = toValue;
-      onIndexChangeRef.current?.(toValue);
-      Animated[animationType](translateX.current, {
-        toValue,
-        useNativeDriver: true,
-        easing: Easing.inOut(Easing.ease),
-        duration: 150,
-        ...animationConfig,
-      }).start();
-      onDone?.(toValue);
-    },
-    [animationConfig, animationType]
-  );
-
-  return (
-    <TabContext.Provider
-      value={{
-        changeIndex: animate,
-        __translateX: translateX,
-        __currentIndex: currentIndex,
-        __onIndexChangeRef: onIndexChangeRef,
-      }}
-    >
-      {children}
-    </TabContext.Provider>
-  );
+export type TabsRef = {
+  changeIndex: (toValue: number) => void;
 };
 
+interface TabsProps {
+  children: React.ReactNode;
+  animationType?: 'timing' | 'spring';
+  animationConfig?: Partial<
+    Animated.TimingAnimationConfig | Animated.SpringAnimationConfig
+  >;
+}
+
+export const Tabs = forwardRef(
+  (
+    { children, animationType = 'spring', animationConfig = {} }: TabsProps,
+    ref
+  ) => {
+    const translateX = React.useRef(new Animated.Value(0));
+    const currentIndex = React.useRef(0);
+    const onIndexChangeRef = React.useRef((value: number) => value);
+
+    useImperativeHandle(ref, () => ({
+      changeIndex: (toValue: number) => {
+        animate(toValue);
+      },
+    }));
+
+    const animate = React.useCallback(
+      (toValue: number, onDone = () => {}) => {
+        currentIndex.current = toValue;
+        onIndexChangeRef.current?.(toValue);
+        Animated[animationType](translateX.current, {
+          toValue,
+          useNativeDriver: true,
+          easing: Easing.inOut(Easing.ease),
+          duration: 150,
+          ...animationConfig,
+        }).start();
+        onDone?.(toValue);
+      },
+      [animationConfig, animationType]
+    );
+
+    return (
+      <TabContext.Provider
+        value={{
+          changeIndex: animate,
+          __translateX: translateX,
+          __currentIndex: currentIndex,
+          __onIndexChangeRef: onIndexChangeRef,
+        }}
+      >
+        {children}
+      </TabContext.Provider>
+    );
+  }
+);
+
 export const useTabsInternal = () => React.useContext(TabContext);
 
 export const TabBase: RneFunctionComponent<TabProps> = ({
@@ -159,7 +178,10 @@ export const TabBase: RneFunctionComponent<TabProps> = ({
 
   React.useEffect(() => {
     if (__onIndexChangeRef) {
-      __onIndexChangeRef.current = scrollHandler;
+      __onIndexChangeRef.current = (value) => {
+        scrollHandler(value);
+        setActiveIndex(value);
+      };
     }
   }, [__onIndexChangeRef, scrollHandler]);
 
@@ -259,6 +281,8 @@ export const TabBase: RneFunctionComponent<TabProps> = ({
     });
   };
 
+  const [activeIndex, setActiveIndex] = React.useState(currentIndex.current);
+
   return (
     <View
       {...rest}
@@ -299,10 +323,11 @@ export const TabBase: RneFunctionComponent<TabProps> = ({
               >
                 {React.cloneElement(child as React.ReactElement<TabItemProps>, {
                   onPress: () => {
-                    animate(index);
-                    onChange(index);
+                    animate(index, setActiveIndex);
+
+                    onChange?.(index);
                   },
-                  active: index === currentIndex.current,
+                  active: index === activeIndex,
                   variant,
                   _parentProps: {
                     dense,