feat: add animationEnabled to TabView (#1388)

* feat: add disableChangeTabAnimation to TabView

* refactor: change prop name

* fix: update dependencies array

* feat: add animationEnabled on web

* feat: expose the style prop accepted by the Pager component (#1260)

* fix: animation when swiping on web

* fix: reset pendingIndexRef & remove unncecessary checks

Co-authored-by: Szymon Rybczak <[email protected]>

Author: szymonrybczak

README.md

@@ -308,6 +308,10 @@ String indicating whether the keyboard gets dismissed in response to a drag gest
 
 Boolean indicating whether to enable swipe gestures. Swipe gestures are enabled by default. Passing `false` will disable swipe gestures, but the user can still switch tabs by pressing the tab bar.
 
+#### `animationEnabled`
+
+Enables animation when changing tab. By default it's true.
+
 ##### `onSwipeStart`
 
 Callback which is called when the swipe gesture starts, i.e. the user touches the screen and moves it.

src/PagerViewAdapter.tsx

@@ -41,6 +41,7 @@ export default function PagerViewAdapter<T extends Route>({
   onSwipeEnd,
   children,
   style,
+  animationEnabled,
   ...rest
 }: Props<T>) {
   const { index } = navigationState;
@@ -58,23 +59,36 @@ export default function PagerViewAdapter<T extends Route>({
     navigationStateRef.current = navigationState;
   });
 
-  const jumpTo = React.useCallback((key: string) => {
-    const index = navigationStateRef.current.routes.findIndex(
-      (route: { key: string }) => route.key === key
-    );
-
-    pagerRef.current?.setPage(index);
-  }, []);
+  const jumpTo = React.useCallback(
+    (key: string) => {
+      const index = navigationStateRef.current.routes.findIndex(
+        (route: { key: string }) => route.key === key
+      );
+
+      if (animationEnabled) {
+        pagerRef.current?.setPage(index);
+      } else {
+        pagerRef.current?.setPageWithoutAnimation(index);
+        position.setValue(index);
+      }
+    },
+    [animationEnabled, position]
+  );
 
   React.useEffect(() => {
     if (keyboardDismissMode === 'auto') {
       Keyboard.dismiss();
     }
 
     if (indexRef.current !== index) {
-      pagerRef.current?.setPage(index);
+      if (animationEnabled) {
+        pagerRef.current?.setPage(index);
+      } else {
+        pagerRef.current?.setPageWithoutAnimation(index);
+        position.setValue(index);
+      }
     }
-  }, [keyboardDismissMode, index]);
+  }, [keyboardDismissMode, index, animationEnabled, position]);
 
   const onPageScrollStateChanged = (
     state: PageScrollStateChangedNativeEvent

src/PanResponderAdapter.tsx

@@ -58,6 +58,7 @@ export default function PanResponderAdapter<T extends Route>({
   onSwipeEnd,
   children,
   style,
+  animationEnabled = false,
 }: Props<T>) {
   const { routes, index } = navigationState;
 
@@ -76,27 +77,32 @@ export default function PanResponderAdapter<T extends Route>({
   const swipeDistanceThreshold = layout.width / 1.75;
 
   const jumpToIndex = React.useCallback(
-    (index: number) => {
+    (index: number, animate = animationEnabled) => {
       const offset = -index * layoutRef.current.width;
 
       const { timing, ...transitionConfig } = DefaultTransitionSpec;
 
-      Animated.parallel([
-        timing(panX, {
-          ...transitionConfig,
-          toValue: offset,
-          useNativeDriver: false,
-        }),
-      ]).start(({ finished }) => {
-        if (finished) {
-          onIndexChangeRef.current(index);
-          pendingIndexRef.current = undefined;
-        }
-      });
-
-      pendingIndexRef.current = index;
+      if (animate) {
+        Animated.parallel([
+          timing(panX, {
+            ...transitionConfig,
+            toValue: offset,
+            useNativeDriver: false,
+          }),
+        ]).start(({ finished }) => {
+          if (finished) {
+            onIndexChangeRef.current(index);
+            pendingIndexRef.current = undefined;
+          }
+        });
+        pendingIndexRef.current = index;
+      } else {
+        panX.setValue(offset);
+        onIndexChangeRef.current(index);
+        pendingIndexRef.current = undefined;
+      }
     },
-    [panX]
+    [animationEnabled, panX]
   );
 
   React.useEffect(() => {
@@ -230,7 +236,7 @@ export default function PanResponderAdapter<T extends Route>({
       nextIndex = currentIndex;
     }
 
-    jumpToIndex(nextIndex);
+    jumpToIndex(nextIndex, true);
   };
 
   // TODO: use the listeners

src/TabView.tsx

@@ -51,6 +51,7 @@ export default function TabView<T extends Route>({
   style,
   swipeEnabled = true,
   tabBarPosition = 'top',
+  animationEnabled = true,
 }: Props<T>) {
   const [layout, setLayout] = React.useState({
     width: 0,
@@ -86,6 +87,7 @@ export default function TabView<T extends Route>({
         onSwipeStart={onSwipeStart}
         onSwipeEnd={onSwipeEnd}
         onIndexChange={jumpToIndex}
+        animationEnabled={animationEnabled}
         style={pagerStyle}
       >
         {({ position, render, addEnterListener, jumpTo }) => {

src/types.tsx

@@ -53,6 +53,7 @@ export type PagerProps = Omit<
 > & {
   keyboardDismissMode?: 'none' | 'on-drag' | 'auto';
   swipeEnabled?: boolean;
+  animationEnabled?: boolean;
   onSwipeStart?: () => void;
   onSwipeEnd?: () => void;
 };