@codeleap/mobile 5.2.4 → 5.2.6

package/dist/components/Tabs/Context.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import { TabsContextProps, TabsStyles } from './types';
+import { FlatList } from 'react-native';
 export declare function TabsProvider({ children, ...handleProps }: TabsContextProps & {
     styles: TabsStyles;
 }): JSX.Element;
 export declare function useTabContext(): {
     value: string;
-    setValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setValue: (newValue: string, index?: number) => void;
     styles: TabsStyles;
     keepMounted: boolean;
+    flatListRef: import("react").MutableRefObject<FlatList<any>>;
 };

package/dist/components/Tabs/Context.js

@@ -1,14 +1,26 @@
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useRef, useState } from 'react';
+import { TypeGuards } from '@codeleap/types';
 function useTabHandle(props) {
     const { defaultValue, value, onValueChange, keepMounted, styles } = props;
-    const [tabValue, setTabValue] = !onValueChange && !value
+    const [tabValue, setInternalTabValue] = !onValueChange && !value
         ? useState(defaultValue)
         : [value ?? defaultValue, onValueChange];
+    const flatListRef = useRef(null);
+    const setTabValue = (newValue, index) => {
+        if (TypeGuards.isNumber(index) && flatListRef.current) {
+            flatListRef.current.scrollToIndex({
+                index,
+                animated: true,
+            });
+        }
+        setInternalTabValue(newValue);
+    };
     return {
         value: tabValue,
         setValue: setTabValue,
         styles,
         keepMounted,
+        flatListRef,
     };
 }
 const Context = createContext({});

package/dist/components/Tabs/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../src/components/Tabs/Context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAG3D,SAAS,YAAY,CAAC,KAAgD;IACpE,MAAM,EACJ,YAAY,EACZ,KAAK,EACL,aAAa,EACb,WAAW,EACX,MAAM,EACP,GAAG,KAAK,CAAA;IAET,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,CAAC,aAAa,IAAI,CAAC,KAAK;QACtD,CAAC,CAAC,QAAQ,CAAS,YAAY,CAAC;QAChC,CAAC,CAAC,CAAC,KAAK,IAAI,YAAY,EAAE,aAAa,CAAC,CAAA;IAE1C,OAAO;QACL,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,WAAW;QACrB,MAAM;QACN,WAAW;KACZ,CAAA;AACH,CAAC;AAED,MAAM,OAAO,GAAG,aAAa,CAAC,EAAqC,CAAC,CAAA;AAEpE,MAAM,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,EAA6C;IAClG,MAAM,MAAM,GAAG,YAAY,CAAC,WAAW,CAAC,CAAA;IACxC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAA;AACvE,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IAE/B,IAAI,GAAG,KAAK,IAAI,EAAE;QAChB,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAA;KAC5D;IAED,OAAO,GAAG,CAAA;AACZ,CAAC"}
+{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../src/components/Tabs/Context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGnE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,SAAS,YAAY,CAAC,KAAgD;IACpE,MAAM,EACJ,YAAY,EACZ,KAAK,EACL,aAAa,EACb,WAAW,EACX,MAAM,EACP,GAAG,KAAK,CAAA;IAET,MAAM,CAAC,QAAQ,EAAE,mBAAmB,CAAC,GAAG,CAAC,aAAa,IAAI,CAAC,KAAK;QAC9D,CAAC,CAAC,QAAQ,CAAS,YAAY,CAAC;QAChC,CAAC,CAAC,CAAC,KAAK,IAAI,YAAY,EAAE,aAAa,CAAC,CAAA;IAE1C,MAAM,WAAW,GAAG,MAAM,CAAW,IAAI,CAAC,CAAA;IAE1C,MAAM,WAAW,GAAG,CAAC,QAAgB,EAAE,KAAc,EAAE,EAAE;QACvD,IAAI,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE;YACrD,WAAW,CAAC,OAAO,CAAC,aAAa,CAAC;gBAChC,KAAK;gBACL,QAAQ,EAAE,IAAI;aACf,CAAC,CAAA;SACH;QAED,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IAC/B,CAAC,CAAA;IAED,OAAO;QACL,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,WAAW;QACrB,MAAM;QACN,WAAW;QACX,WAAW;KACZ,CAAA;AACH,CAAC;AAED,MAAM,OAAO,GAAG,aAAa,CAAC,EAAqC,CAAC,CAAA;AAEpE,MAAM,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,EAA6C;IAClG,MAAM,MAAM,GAAG,YAAY,CAAC,WAAW,CAAC,CAAA;IACxC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAA;AACvE,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IAE/B,IAAI,GAAG,KAAK,IAAI,EAAE;QAChB,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAA;KAC5D;IAED,OAAO,GAAG,CAAA;AACZ,CAAC"}

package/dist/components/Tabs/Panel.js

@@ -1,6 +1,7 @@
 import { useTabContext } from './Context';
 import { memoBy } from '@codeleap/utils';
 import { View } from '../View';
+import React from 'react';
 const PanelMemoized = memoBy((props) => {
     const { children } = props;
     return <>{children}</>;

package/dist/components/Tabs/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../src/components/Tabs/Panel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,OAAO,EAAE,IAAI,EAAa,MAAM,SAAS,CAAA;AAUzC,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,KAAkC,EAAE,EAAE;IAClE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAE1B,OAAO,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAA;AACxB,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAA;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,WAAW,EAAE,gBAAgB,GAAG,IAAI,EAAE,GAAG,KAAK,EAAc,EAAE,EAAE;IACtF,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,aAAa,EAAE,CAAA;IAEtD,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;IAEpC,IAAI,CAAC,WAAW,IAAI,CAAC,MAAM,IAAI,CAAC,gBAAgB,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAA;IAExE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CACvF;IAAA,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAC3C;EAAA,EAAE,IAAI,CAAC,CAAA;AACT,CAAC,CAAA"}
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../src/components/Tabs/Panel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,OAAO,EAAE,IAAI,EAAa,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,KAAkC,EAAE,EAAE;IAClE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAE1B,OAAO,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAA;AACxB,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAA;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,WAAW,EAAE,gBAAgB,GAAG,IAAI,EAAE,GAAG,KAAK,EAAc,EAAE,EAAE;IACtF,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,aAAa,EAAE,CAAA;IAEtD,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;IAEpC,IAAI,CAAC,WAAW,IAAI,CAAC,MAAM,IAAI,CAAC,gBAAgB,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAA;IAExE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CACvF;IAAA,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAC3C;EAAA,EAAE,IAAI,CAAC,CAAA;AACT,CAAC,CAAA"}

package/dist/components/Tabs/Tab.js

@@ -3,6 +3,7 @@ import { memoBy } from '@codeleap/utils';
 import { Touchable } from '../Touchable';
 import { Icon } from '../Icon';
 import { Text } from '../Text';
+import React from 'react';
 const TabMemoized = memoBy((props) => {
     const { value, text, icon, active, setValue, styles, disabled } = props;
     return (<Touchable style={[
@@ -26,6 +27,6 @@ const TabMemoized = memoBy((props) => {
 export const Tab = (props) => {
     const { value, setValue, styles } = useTabContext();
     const active = value === props.value;
-    return <TabMemoized {...props} active={active} setValue={setValue} styles={styles}/>;
+    return <TabMemoized {...props} active={active} setValue={(value) => setValue(value, null)} styles={styles}/>;
 };
 //# sourceMappingURL=Tab.js.map

package/dist/components/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAS9B,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,KAAgC,EAAE,EAAE;IAC9D,MAAM,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACT,GAAG,KAAK,CAAA;IAET,OAAO,CACL,CAAC,SAAS,CACR,KAAK,CAAC,CAAC;YACL,MAAM,EAAE,UAAU;YAClB,MAAM,IAAI,MAAM,EAAE,CAAC,mBAAmB,CAAC;YACvC,QAAQ,IAAI,MAAM,EAAE,CAAC,qBAAqB,CAAC;SAC5C,CAAC,CACF,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAC/B,SAAS,CAAC,CAAC,QAAQ,KAAK,EAAE,CAAC,CAE3B;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,MAAM,EAAE,OAAO;YACf,MAAM,IAAI,MAAM,EAAE,CAAC,gBAAgB,CAAC;YACpC,QAAQ,IAAI,MAAM,EAAE,CAAC,kBAAkB,CAAC;SACzC,CAAC,CACF,IAAI,CAAC,CAAC,IAAI,CAAC,EAGb;;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,MAAM,EAAE,OAAO;YACf,MAAM,IAAI,MAAM,EAAE,CAAC,gBAAgB,CAAC;YACpC,QAAQ,IAAI,MAAM,EAAE,CAAC,kBAAkB,CAAC;SACzC,CAAC,CACF,IAAI,CAAC,CAAC,IAAI,CAAC,EAEf;IAAA,EAAE,SAAS,CAAC,CACb,CAAA;AACH,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;AAEpD,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAAe,EAAE,EAAE;IACrC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAEnD,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;IAEpC,OAAO,CAAC,WAAW,CACjB,IAAI,KAAK,CAAC,CACV,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,MAAM,CAAC,CAAC,MAAM,CAAC,EACf,CAAA;AACJ,CAAC,CAAA"}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,KAAgC,EAAE,EAAE;IAC9D,MAAM,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACT,GAAG,KAAK,CAAA;IAET,OAAO,CACL,CAAC,SAAS,CACR,KAAK,CAAC,CAAC;YACL,MAAM,EAAE,UAAU;YAClB,MAAM,IAAI,MAAM,EAAE,CAAC,mBAAmB,CAAC;YACvC,QAAQ,IAAI,MAAM,EAAE,CAAC,qBAAqB,CAAC;SAC5C,CAAC,CACF,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAC/B,SAAS,CAAC,CAAC,QAAQ,KAAK,EAAE,CAAC,CAE3B;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,MAAM,EAAE,OAAO;YACf,MAAM,IAAI,MAAM,EAAE,CAAC,gBAAgB,CAAC;YACpC,QAAQ,IAAI,MAAM,EAAE,CAAC,kBAAkB,CAAC;SACzC,CAAC,CACF,IAAI,CAAC,CAAC,IAAI,CAAC,EAGb;;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,MAAM,EAAE,OAAO;YACf,MAAM,IAAI,MAAM,EAAE,CAAC,gBAAgB,CAAC;YACpC,QAAQ,IAAI,MAAM,EAAE,CAAC,kBAAkB,CAAC;SACzC,CAAC,CACF,IAAI,CAAC,CAAC,IAAI,CAAC,EAEf;IAAA,EAAE,SAAS,CAAC,CACb,CAAA;AACH,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;AAEpD,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAAe,EAAE,EAAE;IACrC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAEnD,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;IAEpC,OAAO,CAAC,WAAW,CACjB,IAAI,KAAK,CAAC,CACV,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAC3C,MAAM,CAAC,CAAC,MAAM,CAAC,EACf,CAAA;AACJ,CAAC,CAAA"}

package/dist/components/Tabs/TabList.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ScrollViewProps } from 'react-native';
-type TabListProps = ScrollViewProps;
+import { FlatListProps } from 'react-native';
+type TabListProps = Omit<FlatListProps<any>, 'data' | 'renderItem'>;
 export declare const TabList: (props: TabListProps) => JSX.Element;
 export {};

package/dist/components/Tabs/TabList.js

@@ -1,7 +1,10 @@
-import { ScrollView } from 'react-native';
+import { FlatList } from 'react-native';
 import { useTabContext } from './Context';
+import React from 'react';
 export const TabList = (props) => {
-    const { styles } = useTabContext();
-    return (<ScrollView horizontal showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} {...props} style={styles?.tabList} contentContainerStyle={styles?.tabListContainer}/>);
+    const { children, ...flatListProps } = props;
+    const { styles, flatListRef } = useTabContext();
+    const childrenArray = React.Children.toArray(children);
+    return (<FlatList horizontal showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} {...flatListProps} ref={flatListRef} data={childrenArray} renderItem={({ item }) => item} keyExtractor={(_, index) => `tab-${index}`} style={styles?.tabList} contentContainerStyle={styles?.tabListContainer}/>);
 };
 //# sourceMappingURL=TabList.js.map

package/dist/components/Tabs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAIzC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IAC7C,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAElC,OAAO,CACL,CAAC,UAAU,CACT,UAAU,CACV,8BAA8B,CAAC,CAAC,KAAK,CAAC,CACtC,4BAA4B,CAAC,CAAC,KAAK,CAAC,CACpC,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CACvB,qBAAqB,CAAC,CAAC,MAAM,EAAE,gBAAgB,CAAC,EAChD,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,cAAc,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IAC7C,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,GAAG,KAAK,CAAA;IAE5C,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,aAAa,EAAE,CAAA;IAE/C,MAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;IAEtD,OAAO,CACL,CAAC,QAAQ,CACP,UAAU,CACV,8BAA8B,CAAC,CAAC,KAAK,CAAC,CACtC,4BAA4B,CAAC,CAAC,KAAK,CAAC,CACpC,IAAI,aAAa,CAAC,CAClB,GAAG,CAAC,CAAC,WAAW,CAAC,CACjB,IAAI,CAAC,CAAC,aAAa,CAAC,CACpB,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,CAC/B,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,OAAO,KAAK,EAAE,CAAC,CAC3C,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CACvB,qBAAqB,CAAC,CAAC,MAAM,EAAE,gBAAgB,CAAC,EAChD,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/components/Tabs/index.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
 import { AnyRecord } from '@codeleap/types';
 import { Panel } from './Panel';
 import { Tab } from './Tab';
 import { TabList } from './TabList';
 import { TabsProps } from './types';
 import { IJSX, StyledComponentProps } from '@codeleap/styles';
+import React from 'react';
 export { useTabContext } from './Context';
 export * from './types';
 export * from './styles';
@@ -16,10 +16,212 @@ export declare const Tabs: {
         icon?: never;
         disabled?: boolean;
     }) => JSX.Element;
-    TabList: (props: import("react-native/types").ScrollViewProps) => JSX.Element;
+    TabList: (props: {
+        style?: import("react-native/types").StyleProp<import("react-native/types").ViewStyle>;
+        debug?: boolean;
+        children?: React.ReactNode;
+        hitSlop?: number | import("react-native/types").Insets;
+        id?: string;
+        needsOffscreenAlphaCompositing?: boolean;
+        onLayout?: (event: import("react-native/types").LayoutChangeEvent) => void;
+        pointerEvents?: "none" | "auto" | "box-none" | "box-only";
+        removeClippedSubviews?: boolean;
+        testID?: string;
+        nativeID?: string;
+        experimental_layoutConformance?: "strict" | "classic";
+        collapsable?: boolean;
+        collapsableChildren?: boolean;
+        renderToHardwareTextureAndroid?: boolean;
+        focusable?: boolean;
+        tabIndex?: 0 | -1;
+        shouldRasterizeIOS?: boolean;
+        isTVSelectable?: boolean;
+        hasTVPreferredFocus?: boolean;
+        tvParallaxShiftDistanceX?: number;
+        tvParallaxShiftDistanceY?: number;
+        tvParallaxTiltAngle?: number;
+        tvParallaxMagnification?: number;
+        onStartShouldSetResponder?: (event: import("react-native/types").GestureResponderEvent) => boolean;
+        onMoveShouldSetResponder?: (event: import("react-native/types").GestureResponderEvent) => boolean;
+        onResponderEnd?: (event: import("react-native/types").GestureResponderEvent) => void;
+        onResponderGrant?: (event: import("react-native/types").GestureResponderEvent) => void;
+        onResponderReject?: (event: import("react-native/types").GestureResponderEvent) => void;
+        onResponderMove?: (event: import("react-native/types").GestureResponderEvent) => void;
+        onResponderRelease?: (event: import("react-native/types").GestureResponderEvent) => void;
+        onResponderStart?: (event: import("react-native/types").GestureResponderEvent) => void;
+        onResponderTerminationRequest?: (event: import("react-native/types").GestureResponderEvent) => boolean;
+        onResponderTerminate?: (event: import("react-native/types").GestureResponderEvent) => void;
+        onStartShouldSetResponderCapture?: (event: import("react-native/types").GestureResponderEvent) => boolean;
+        onMoveShouldSetResponderCapture?: (event: import("react-native/types").GestureResponderEvent) => boolean;
+        onTouchStart?: (event: import("react-native/types").GestureResponderEvent) => void;
+        onTouchMove?: (event: import("react-native/types").GestureResponderEvent) => void;
+        onTouchEnd?: (event: import("react-native/types").GestureResponderEvent) => void;
+        onTouchCancel?: (event: import("react-native/types").GestureResponderEvent) => void;
+        onTouchEndCapture?: (event: import("react-native/types").GestureResponderEvent) => void;
+        onPointerEnter?: (event: import("react-native/types").PointerEvent) => void;
+        onPointerEnterCapture?: (event: import("react-native/types").PointerEvent) => void;
+        onPointerLeave?: (event: import("react-native/types").PointerEvent) => void;
+        onPointerLeaveCapture?: (event: import("react-native/types").PointerEvent) => void;
+        onPointerMove?: (event: import("react-native/types").PointerEvent) => void;
+        onPointerMoveCapture?: (event: import("react-native/types").PointerEvent) => void;
+        onPointerCancel?: (event: import("react-native/types").PointerEvent) => void;
+        onPointerCancelCapture?: (event: import("react-native/types").PointerEvent) => void;
+        onPointerDown?: (event: import("react-native/types").PointerEvent) => void;
+        onPointerDownCapture?: (event: import("react-native/types").PointerEvent) => void;
+        onPointerUp?: (event: import("react-native/types").PointerEvent) => void;
+        onPointerUpCapture?: (event: import("react-native/types").PointerEvent) => void;
+        accessible?: boolean;
+        accessibilityActions?: readonly Readonly<{
+            name: string;
+            label?: string;
+        }>[];
+        accessibilityLabel?: string;
+        'aria-label'?: string;
+        accessibilityRole?: import("react-native/types").AccessibilityRole;
+        accessibilityState?: import("react-native/types").AccessibilityState;
+        'aria-busy'?: boolean;
+        'aria-checked'?: boolean | "mixed";
+        'aria-disabled'?: boolean;
+        'aria-expanded'?: boolean;
+        'aria-selected'?: boolean;
+        accessibilityHint?: string;
+        accessibilityValue?: import("react-native/types").AccessibilityValue;
+        'aria-valuemax'?: number;
+        'aria-valuemin'?: number;
+        'aria-valuenow'?: number;
+        'aria-valuetext'?: string;
+        onAccessibilityAction?: (event: import("react-native/types").AccessibilityActionEvent) => void;
+        importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants";
+        'aria-hidden'?: boolean;
+        'aria-modal'?: boolean;
+        role?: import("react-native/types").Role;
+        accessibilityLabelledBy?: string | string[];
+        'aria-labelledby'?: string;
+        accessibilityLiveRegion?: "none" | "polite" | "assertive";
+        'aria-live'?: "polite" | "assertive" | "off";
+        accessibilityElementsHidden?: boolean;
+        accessibilityViewIsModal?: boolean;
+        onAccessibilityEscape?: () => void;
+        onAccessibilityTap?: () => void;
+        onMagicTap?: () => void;
+        accessibilityIgnoresInvertColors?: boolean;
+        accessibilityLanguage?: string;
+        accessibilityShowsLargeContentViewer?: boolean;
+        accessibilityLargeContentTitle?: string;
+        onContentSizeChange?: (w: number, h: number) => void;
+        onScroll?: (event: import("react-native/types").NativeSyntheticEvent<import("react-native/types").NativeScrollEvent>) => void;
+        scrollEnabled?: boolean;
+        keyExtractor?: (item: any, index: number) => string;
+        contentContainerStyle?: import("react-native/types").StyleProp<import("react-native/types").ViewStyle>;
+        onMomentumScrollEnd?: (event: import("react-native/types").NativeSyntheticEvent<import("react-native/types").NativeScrollEvent>) => void;
+        decelerationRate?: number | "normal" | "fast";
+        horizontal?: boolean;
+        invertStickyHeaders?: boolean;
+        keyboardDismissMode?: "none" | "interactive" | "on-drag";
+        keyboardShouldPersistTaps?: boolean | "always" | "never" | "handled";
+        onScrollBeginDrag?: (event: import("react-native/types").NativeSyntheticEvent<import("react-native/types").NativeScrollEvent>) => void;
+        onScrollEndDrag?: (event: import("react-native/types").NativeSyntheticEvent<import("react-native/types").NativeScrollEvent>) => void;
+        onMomentumScrollBegin?: (event: import("react-native/types").NativeSyntheticEvent<import("react-native/types").NativeScrollEvent>) => void;
+        pagingEnabled?: boolean;
+        showsHorizontalScrollIndicator?: boolean;
+        showsVerticalScrollIndicator?: boolean;
+        stickyHeaderHiddenOnScroll?: boolean;
+        refreshControl?: React.ReactElement<import("react-native/types").RefreshControlProps, string | React.JSXElementConstructor<any>>;
+        snapToInterval?: number;
+        snapToOffsets?: number[];
+        snapToStart?: boolean;
+        snapToEnd?: boolean;
+        stickyHeaderIndices?: number[];
+        disableIntervalMomentum?: boolean;
+        disableScrollViewPanResponder?: boolean;
+        StickyHeaderComponent?: React.ComponentType<any>;
+        alwaysBounceHorizontal?: boolean;
+        alwaysBounceVertical?: boolean;
+        automaticallyAdjustContentInsets?: boolean;
+        automaticallyAdjustKeyboardInsets?: boolean;
+        automaticallyAdjustsScrollIndicatorInsets?: boolean;
+        bounces?: boolean;
+        bouncesZoom?: boolean;
+        canCancelContentTouches?: boolean;
+        centerContent?: boolean;
+        contentInset?: import("react-native/types").Insets;
+        contentOffset?: import("react-native/types").PointProp;
+        contentInsetAdjustmentBehavior?: "always" | "never" | "automatic" | "scrollableAxes";
+        directionalLockEnabled?: boolean;
+        indicatorStyle?: "default" | "black" | "white";
+        maintainVisibleContentPosition?: {
+            autoscrollToTopThreshold?: number;
+            minIndexForVisible: number;
+        };
+        maximumZoomScale?: number;
+        minimumZoomScale?: number;
+        onScrollAnimationEnd?: () => void;
+        pinchGestureEnabled?: boolean;
+        scrollEventThrottle?: number;
+        scrollIndicatorInsets?: import("react-native/types").Insets;
+        scrollToOverflowEnabled?: boolean;
+        scrollsToTop?: boolean;
+        snapToAlignment?: "center" | "end" | "start";
+        onScrollToTop?: (event: import("react-native/types").NativeSyntheticEvent<import("react-native/types").NativeScrollEvent>) => void;
+        zoomScale?: number;
+        endFillColor?: import("react-native/types").ColorValue;
+        scrollPerfTag?: string;
+        overScrollMode?: "auto" | "always" | "never";
+        nestedScrollEnabled?: boolean;
+        fadingEdgeLength?: number;
+        persistentScrollbar?: boolean;
+        onRefresh?: () => void;
+        refreshing?: boolean;
+        progressViewOffset?: number;
+        ItemSeparatorComponent?: React.ComponentType<any>;
+        ListEmptyComponent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ComponentType<any>;
+        ListFooterComponent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ComponentType<any>;
+        ListFooterComponentStyle?: import("react-native/types").StyleProp<import("react-native/types").ViewStyle>;
+        ListHeaderComponent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ComponentType<any>;
+        ListHeaderComponentStyle?: import("react-native/types").StyleProp<import("react-native/types").ViewStyle>;
+        disableVirtualization?: boolean;
+        extraData?: any;
+        getItem?: (data: any, index: number) => any;
+        getItemCount?: (data: any) => number;
+        getItemLayout?: (data: ArrayLike<any>, index: number) => {
+            length: number;
+            offset: number;
+            index: number;
+        };
+        initialNumToRender?: number;
+        initialScrollIndex?: number;
+        inverted?: boolean;
+        maxToRenderPerBatch?: number;
+        onEndReached?: (info: {
+            distanceFromEnd: number;
+        }) => void;
+        onEndReachedThreshold?: number;
+        onScrollToIndexFailed?: (info: {
+            index: number;
+            highestMeasuredFrameIndex: number;
+            averageItemLength: number;
+        }) => void;
+        onStartReached?: (info: {
+            distanceFromStart: number;
+        }) => void;
+        onStartReachedThreshold?: number;
+        onViewableItemsChanged?: (info: {
+            viewableItems: import("@react-native/virtualized-lists").ViewToken<any>[];
+            changed: import("@react-native/virtualized-lists").ViewToken<any>[];
+        }) => void;
+        renderScrollComponent?: (props: import("react-native/types").ScrollViewProps) => React.ReactElement<import("react-native/types").ScrollViewProps, string | React.JSXElementConstructor<any>>;
+        updateCellsBatchingPeriod?: number;
+        viewabilityConfig?: import("@react-native/virtualized-lists").ViewabilityConfig;
+        viewabilityConfigCallbackPairs?: import("@react-native/virtualized-lists").ViewabilityConfigCallbackPairs;
+        windowSize?: number;
+        CellRendererComponent?: React.ComponentType<import("@react-native/virtualized-lists").CellRendererProps<any>>;
+        legacyImplementation?: boolean;
+        columnWrapperStyle?: import("react-native/types").StyleProp<import("react-native/types").ViewStyle>;
+        numColumns?: number;
+    }) => JSX.Element;
     Panel: ({ keepMounted: panelKeepMounted, ...props }: Omit<import("../View").ViewProps, "style"> & {
         value: string;
-        children: import("react").ReactNode;
+        children: React.ReactNode;
         style?: import("@codeleap/styles").ICSS;
         keepMounted?: boolean;
     }) => JSX.Element;

package/dist/components/Tabs/index.js

@@ -5,6 +5,7 @@ import { Tab } from './Tab';
 import { TabList } from './TabList';
 import { MobileStyleRegistry } from '../../Registry';
 import { useStylesFor } from '../../hooks';
+import React from 'react';
 export { useTabContext } from './Context';
 export * from './types';
 export * from './styles';

package/dist/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAGnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAEzC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AAExB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;IACvC,MAAM,EACJ,KAAK,EACL,KAAK,EACL,aAAa,EACb,YAAY,EACZ,WAAW,EACX,WAAW,EACX,QAAQ,EACR,GAAG,IAAI,EACR,GAAG;QACF,GAAG,IAAI,CAAC,YAAY;QACpB,GAAG,KAAK;KACT,CAAA;IAED,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAE1D,OAAO,CACL,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,WAAW,CAAC,CAAC,WAAW,CAAC,CAEzB;MAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CACrC;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CACrB;IAAA,EAAE,YAAY,CAAC,CAChB,CAAA;AACH,CAAC,CAAA;AAED,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;AACd,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;AACtB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;AAElB,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAA;AAC/B,IAAI,CAAC,QAAQ,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;AAC3C,IAAI,CAAC,WAAW,GAAG,SAAS,CAAA;AAE5B,IAAI,CAAC,gBAAgB,GAAG,CAAsB,MAAS,EAAE,EAAE;IACzD,OAAO,IAIN,CAAA;AACH,CAAC,CAAA;AAED,IAAI,CAAC,YAAY,GAAG;IAClB,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,IAAI;CACI,CAAA;AAEvB,mBAAmB,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAGnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAEzC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AAExB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;IACvC,MAAM,EACJ,KAAK,EACL,KAAK,EACL,aAAa,EACb,YAAY,EACZ,WAAW,EACX,WAAW,EACX,QAAQ,EACR,GAAG,IAAI,EACR,GAAG;QACF,GAAG,IAAI,CAAC,YAAY;QACpB,GAAG,KAAK;KACT,CAAA;IAED,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAE1D,OAAO,CACL,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,WAAW,CAAC,CAAC,WAAW,CAAC,CAEzB;MAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CACrC;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CACrB;IAAA,EAAE,YAAY,CAAC,CAChB,CAAA;AACH,CAAC,CAAA;AAED,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;AACd,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;AACtB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;AAElB,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAA;AAC/B,IAAI,CAAC,QAAQ,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;AAC3C,IAAI,CAAC,WAAW,GAAG,SAAS,CAAA;AAE5B,IAAI,CAAC,gBAAgB,GAAG,CAAsB,MAAS,EAAE,EAAE;IACzD,OAAO,IAIN,CAAA;AACH,CAAC,CAAA;AAED,IAAI,CAAC,YAAY,GAAG;IAClB,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,IAAI;CACI,CAAA;AAEvB,mBAAmB,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "5.2.4",
+  "version": "5.2.6",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,28 +9,28 @@
     "directory": "packages/mobile"
   },
   "devDependencies": {
-    "@codeleap/types": "5.2.4",
-    "@codeleap/utils": "5.2.4",
-    "@codeleap/hooks": "5.2.4",
-    "@codeleap/form": "5.2.4",
-    "@codeleap/query": "5.2.4",
-    "@codeleap/logger": "5.2.4",
-    "@codeleap/config": "5.2.4",
-    "@codeleap/modals": "5.2.4"
+    "@codeleap/types": "5.2.6",
+    "@codeleap/utils": "5.2.6",
+    "@codeleap/hooks": "5.2.6",
+    "@codeleap/form": "5.2.6",
+    "@codeleap/query": "5.2.6",
+    "@codeleap/logger": "5.2.6",
+    "@codeleap/config": "5.2.6",
+    "@codeleap/modals": "5.2.6"
   },
   "scripts": {
     "build": "tsc --build",
     "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
   },
   "peerDependencies": {
-    "@codeleap/types": "5.2.4",
-    "@codeleap/utils": "5.2.4",
-    "@codeleap/hooks": "5.2.4",
-    "@codeleap/form": "5.2.4",
-    "@codeleap/query": "5.2.4",
-    "@codeleap/logger": "5.2.4",
-    "@codeleap/styles": "5.2.4",
-    "@codeleap/modals": "5.2.4",
+    "@codeleap/types": "5.2.6",
+    "@codeleap/utils": "5.2.6",
+    "@codeleap/hooks": "5.2.6",
+    "@codeleap/form": "5.2.6",
+    "@codeleap/query": "5.2.6",
+    "@codeleap/logger": "5.2.6",
+    "@codeleap/styles": "5.2.6",
+    "@codeleap/modals": "5.2.6",
     "@d11/react-native-fast-image": "8.9.2",
     "@react-native-firebase/messaging": "21.12.0",
     "@react-navigation/bottom-tabs": "7.3.10",

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "5.2.4",
+  "version": "5.2.6",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/components/Tabs/Context.tsx

@@ -1,5 +1,7 @@
-import { createContext, useContext, useState } from 'react'
+import { createContext, useContext, useRef, useState } from 'react'
 import { TabsContextProps, TabsStyles } from './types'
+import { FlatList } from 'react-native'
+import { TypeGuards } from '@codeleap/types'
 
 function useTabHandle(props: TabsContextProps & { styles: TabsStyles }) {
   const {
@@ -10,15 +12,29 @@ function useTabHandle(props: TabsContextProps & { styles: TabsStyles }) {
     styles
   } = props
 
-  const [tabValue, setTabValue] = !onValueChange && !value
+  const [tabValue, setInternalTabValue] = !onValueChange && !value
     ? useState<string>(defaultValue)
     : [value ?? defaultValue, onValueChange]
 
+  const flatListRef = useRef<FlatList>(null)
+
+  const setTabValue = (newValue: string, index?: number) => {
+    if (TypeGuards.isNumber(index) && flatListRef.current) {
+      flatListRef.current.scrollToIndex({
+        index,
+        animated: true,
+      })
+    }
+
+    setInternalTabValue(newValue)
+  }
+
   return {
     value: tabValue,
     setValue: setTabValue,
     styles,
     keepMounted,
+    flatListRef,
   }
 }
 

package/src/components/Tabs/Panel.tsx

@@ -4,6 +4,7 @@ import { memoBy } from '@codeleap/utils'
 import { TabPropsWithCtx } from './types'
 import { View, ViewProps } from '../View'
 import { ICSS } from '@codeleap/styles'
+import React from 'react'
 
 type PanelProps = Omit<ViewProps, 'style'> & {
   value: string

package/src/components/Tabs/Tab.tsx

@@ -5,6 +5,7 @@ import { TabPropsWithCtx } from './types'
 import { Touchable } from '../Touchable'
 import { Icon } from '../Icon'
 import { Text } from '../Text'
+import React from 'react'
 
 type TabProps = {
   value: string
@@ -63,7 +64,7 @@ export const Tab = (props: TabProps) => {
   return <TabMemoized
     {...props}
     active={active}
-    setValue={setValue}
+    setValue={(value) => setValue(value, null)}
     styles={styles}
   />
 }

package/src/components/Tabs/TabList.tsx

@@ -1,17 +1,26 @@
-import { ScrollView, ScrollViewProps } from 'react-native'
+import { FlatList, FlatListProps } from 'react-native'
 import { useTabContext } from './Context'
+import React from 'react'
 
-type TabListProps = ScrollViewProps
+type TabListProps = Omit<FlatListProps<any>, 'data' | 'renderItem'>
 
 export const TabList = (props: TabListProps) => {
-  const { styles } = useTabContext()
+  const { children, ...flatListProps } = props
+
+  const { styles, flatListRef } = useTabContext()
+
+  const childrenArray = React.Children.toArray(children)
 
   return (
-    <ScrollView
+    <FlatList
       horizontal
       showsHorizontalScrollIndicator={false}
       showsVerticalScrollIndicator={false}
-      {...props}
+      {...flatListProps}
+      ref={flatListRef}
+      data={childrenArray}
+      renderItem={({ item }) => item}
+      keyExtractor={(_, index) => `tab-${index}`}
       style={styles?.tabList}
       contentContainerStyle={styles?.tabListContainer}
     />

package/src/components/Tabs/index.tsx

@@ -8,6 +8,7 @@ import { TabsProps } from './types'
 import { IJSX, StyledComponentProps } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
+import React from 'react'
 
 export { useTabContext } from './Context'