v3.0.6

Author: bilaleren

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-tabs",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "Material UI tabs for React and React Native projects.",
   "author": "Bilal Eren",
   "license": "MIT",

src/native/TabView/PagerView.tsx

@@ -26,7 +26,7 @@ export type PagerViewProps<T extends Route> = PagerProps & {
     render: (children: React.ReactNode) => React.ReactNode
     // Callback to call when switching the tab
     // The tab switch animation is performed even if the index in state is unchanged
-    jumpTo: (key: string, animated?: boolean) => void
+    jumpTo: (key: T['key'], animated?: boolean) => void
   }) => React.ReactElement
 }
 
@@ -46,53 +46,51 @@ const PagerView = <T extends Route>(props: PagerViewProps<T>) => {
   const { index } = state
 
   const [initialPage] = React.useState(index)
+  const position = useSharedValue(index)
   const pagerRef = React.useRef<RNPagerView>(null)
   const indexRef = React.useRef<number>(index)
   const stateRef = React.useRef<TabViewState<T>>(state)
 
-  const position = useSharedValue(index)
-
   React.useEffect(() => {
     stateRef.current = state
   })
 
+  const setPage = React.useCallback(
+    (page: number, animated = setPageAnimationEnabled) => {
+      if (animated) {
+        pagerRef.current?.setPage(page)
+      } else {
+        pagerRef.current?.setPageWithoutAnimation(page)
+        position.value = page
+      }
+    },
+    [position, setPageAnimationEnabled]
+  )
+
   const jumpTo = React.useCallback(
-    (key: string, animated = setPageAnimationEnabled) => {
+    (key: T['key'], animated?: boolean) => {
       const routes = stateRef.current.routes
       const nextIndex = routes.findIndex((route) => key === route.key)
 
       if (nextIndex === -1) {
         if (__DEV__) {
           const keys = routes.map((route) => route.key)
+          const message = [
+            `Route matching key [${key}] not found.`,
+            `You can provide one of the following keys: ${keys.join(', ')}.`
+          ].join('\n')
 
-          console.error(
-            '[mui-tabs]',
-            [
-              `Route matching key [${key}] not found.`,
-              `You can provide one of the following keys: ${keys.join(', ')}.`
-            ].join('\n')
-          )
+          console.error('[mui-tabs]', message)
         }
 
         return
       }
 
-      if (animated) {
-        pagerRef.current?.setPage(nextIndex)
-      } else {
-        pagerRef.current?.setPageWithoutAnimation(nextIndex)
-        position.value = nextIndex
-      }
+      setPage(nextIndex, animated)
     },
-    [position, setPageAnimationEnabled]
+    [setPage]
   )
 
-  React.useEffect(() => {
-    if (keyboardDismissMode === 'auto' && indexRef.current !== index) {
-      Keyboard.dismiss()
-    }
-  }, [index, keyboardDismissMode])
-
   const pageScrollHandler = usePageScrollHandler({
     onPageScroll: (event) => {
       'worklet'
@@ -102,7 +100,6 @@ const PagerView = <T extends Route>(props: PagerViewProps<T>) => {
 
   const handlePageSelected = React.useCallback(
     (event: PagerViewOnPageSelectedEvent) => {
-      'worklet'
       const { position: nextIndex } = event.nativeEvent
 
       if (indexRef.current !== nextIndex) {
@@ -128,6 +125,16 @@ const PagerView = <T extends Route>(props: PagerViewProps<T>) => {
     [onSwipeEnd, onSwipeStart]
   )
 
+  React.useEffect(() => {
+    if (keyboardDismissMode === 'auto') {
+      Keyboard.dismiss()
+    }
+
+    if (indexRef.current !== index) {
+      setPage(index)
+    }
+  }, [index, setPage, keyboardDismissMode])
+
   return children({
     position,
     jumpTo,

src/native/TabView/TabBar.tsx

@@ -9,7 +9,7 @@ import type {
 } from '../types'
 
 export type TabBarProps<T extends Route> = Omit<
-  TabsProps<string>,
+  TabsProps<T['key']>,
   | 'tabs'
   | 'value'
   | 'onChange'
@@ -28,7 +28,7 @@ const TabBar = <T extends Route>(props: TabBarProps<T>) => {
 
   const { index, routes } = state
 
-  const tabs: TabItem<string>[] = React.useMemo(
+  const tabs: TabItem<T['key']>[] = React.useMemo(
     () =>
       routes.map(({ key, ...other }) => ({
         value: key,
@@ -43,7 +43,7 @@ const TabBar = <T extends Route>(props: TabBarProps<T>) => {
   )
 
   return (
-    <Tabs<string>
+    <Tabs<T['key']>
       {...other}
       tabs={tabs}
       value={tabs[index]?.value}

src/native/Tabs/Tabs.tsx

@@ -278,15 +278,13 @@ const Tabs = <Value extends TabValue = TabValue>(props: TabsProps<Value>) => {
 
   if (__DEV__ && tabIndex === -1) {
     const values = tabs.map((tab) => tab.value).join(', ')
+    const message = [
+      'The `value` provided to the Tabs component is invalid.',
+      `None of the Tabs match with "${value}" value.`,
+      `You can provide one of the following values: ${values}.`
+    ].join('\n')
 
-    console.warn(
-      '[mui-tabs]',
-      [
-        'The `value` provided to the Tabs component is invalid.',
-        `None of the Tabs match with "${value}" value.`,
-        `You can provide one of the following values: ${values}.`
-      ].join('\n')
-    )
+    console.warn('[mui-tabs]', message)
   }
 
   const getTabWidth = React.useCallback(

src/native/types.ts

@@ -94,11 +94,11 @@ export type RenderTabBar<T extends Route = Route> = (
 
 export type RenderTabsIndicator = (props: TabsIndicatorProps) => React.ReactNode
 
-export interface Route {
+export interface Route<T extends string = string> {
   /**
    * You can provide your own route key.
    */
-  key: string
+  key: T
 
   /**
    * The tab label.
@@ -146,7 +146,7 @@ export interface Layout {
 export interface SceneProps<T extends Route = Route> {
   route: T
   index: number
-  jumpTo: (key: string, animated?: boolean) => void
+  jumpTo: (key: T['key'], animated?: boolean) => void
   focused: boolean
   position: SharedValue<number>
 }