feat: add disableChangeTabAnimation to TabView

Author: szymonrybczak

README.md

@@ -335,6 +335,10 @@ Style to apply to the view wrapping each screen. You can pass this to override s
 
 Style to apply to the tab view container.
 
+### `disableChangeTabAnimation`
+
+Boolean indicating whether to disable the change tab animation.
+
 ### `TabBar`
 
 Material design themed tab bar. To customize the tab bar, you'd need to use the `renderTabBar` prop of `TabView` to render the `TabBar` and pass additional props.

src/PagerViewAdapter.tsx

@@ -41,6 +41,7 @@ export default function PagerViewAdapter<T extends Route>({
   onSwipeEnd,
   children,
   style,
+  disableChangeTabAnimation,
   ...rest
 }: Props<T>) {
   const { index } = navigationState;
@@ -63,7 +64,13 @@ export default function PagerViewAdapter<T extends Route>({
       (route: { key: string }) => route.key === key
     );
 
-    pagerRef.current?.setPage(index);
+    if (disableChangeTabAnimation) {
+      pagerRef.current?.setPageWithoutAnimation(index);
+      position.setValue(index);
+    } else {
+      pagerRef.current?.setPage(index);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   React.useEffect(() => {
@@ -72,8 +79,14 @@ export default function PagerViewAdapter<T extends Route>({
     }
 
     if (indexRef.current !== index) {
-      pagerRef.current?.setPage(index);
+      if (disableChangeTabAnimation) {
+        pagerRef.current?.setPageWithoutAnimation(index);
+        position.setValue(index);
+      } else {
+        pagerRef.current?.setPage(index);
+      }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [keyboardDismissMode, index]);
 
   const onPageScrollStateChanged = (

src/TabView.tsx

@@ -49,6 +49,7 @@ export default function TabView<T extends Route>({
   style,
   swipeEnabled = true,
   tabBarPosition = 'top',
+  disableChangeTabAnimation,
 }: Props<T>) {
   const [layout, setLayout] = React.useState({
     width: 0,
@@ -84,6 +85,7 @@ export default function TabView<T extends Route>({
         onSwipeStart={onSwipeStart}
         onSwipeEnd={onSwipeEnd}
         onIndexChange={jumpToIndex}
+        disableChangeTabAnimation={disableChangeTabAnimation}
       >
         {({ position, render, addEnterListener, jumpTo }) => {
           // All of the props here must not change between re-renders

src/types.tsx

@@ -55,4 +55,5 @@ export type PagerProps = Omit<
   swipeEnabled?: boolean;
   onSwipeStart?: () => void;
   onSwipeEnd?: () => void;
+  disableChangeTabAnimation?: boolean;
 };