feat: add animationEnabled on web

Author: szymonrybczak

example/package-lock.json

@@ -22,8 +22,7 @@
     "react-native": "0.69.5",
     "react-native-pager-view": "5.4.25",
     "react-native-safe-area-context": "4.3.1",
-    "react-native-web": "~0.18.7",
-    "use-latest-callback": "^0.1.5"
+    "react-native-web": "~0.18.7"
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^4.1.0",

example/package.json

@@ -11415,11 +11415,6 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-latest-callback@^0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.1.5.tgz#a4a836c08fa72f6608730b5b8f4bbd9c57c04f51"
-  integrity sha512-HtHatS2U4/h32NlkhupDsPlrbiD27gSH5swBdtXbCAlc6pfOFzaj0FehW/FO12rx8j2Vy4/lJScCiJyM01E+bQ==
-
 use-sync-external-store@^1.0.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"

example/yarn.lock

@@ -64,8 +64,7 @@
     "react-native-builder-bob": "^0.18.3",
     "react-native-pager-view": "5.4.24",
     "release-it": "^15.4.0",
-    "typescript": "^4.8.2",
-    "use-latest-callback": "^0.1.5"
+    "typescript": "^4.8.2"
   },
   "peerDependencies": {
     "react": "*",

package-lock.json

@@ -11,7 +11,6 @@ import type {
   EventEmitterProps,
   PagerProps,
 } from './types';
-import useLatestCallback from 'use-latest-callback';
 
 const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);
 
@@ -60,18 +59,21 @@ export default function PagerViewAdapter<T extends Route>({
     navigationStateRef.current = navigationState;
   });
 
-  const jumpTo = useLatestCallback((key: string) => {
-    const index = navigationStateRef.current.routes.findIndex(
-      (route: { key: string }) => route.key === key
-    );
+  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);
-    }
-  });
+      if (animationEnabled) {
+        pagerRef.current?.setPage(index);
+      } else {
+        pagerRef.current?.setPageWithoutAnimation(index);
+        position.setValue(index);
+      }
+    },
+    [animationEnabled, position]
+  );
 
   React.useEffect(() => {
     if (keyboardDismissMode === 'auto') {
@@ -86,8 +88,7 @@ export default function PagerViewAdapter<T extends Route>({
         position.setValue(index);
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [keyboardDismissMode, index, animationEnabled]);
+  }, [keyboardDismissMode, index, animationEnabled, position]);
 
   const onPageScrollStateChanged = (
     state: PageScrollStateChangedNativeEvent

package.json

@@ -58,6 +58,7 @@ export default function PanResponderAdapter<T extends Route>({
   onSwipeEnd,
   children,
   style,
+  animationEnabled,
 }: Props<T>) {
   const { routes, index } = navigationState;
 
@@ -81,22 +82,27 @@ export default function PanResponderAdapter<T extends Route>({
 
       const { timing, ...transitionConfig } = DefaultTransitionSpec;
 
-      Animated.parallel([
-        timing(panX, {
-          ...transitionConfig,
-          toValue: offset,
-          useNativeDriver: false,
-        }),
-      ]).start(({ finished }) => {
-        if (finished) {
-          onIndexChangeRef.current(index);
-          pendingIndexRef.current = undefined;
-        }
-      });
+      if (animationEnabled) {
+        Animated.parallel([
+          timing(panX, {
+            ...transitionConfig,
+            toValue: offset,
+            useNativeDriver: false,
+          }),
+        ]).start(({ finished }) => {
+          if (finished) {
+            onIndexChangeRef.current(index);
+            pendingIndexRef.current = undefined;
+          }
+        });
+      } else {
+        panX.setValue(offset);
+        onIndexChangeRef.current(index);
+      }
 
       pendingIndexRef.current = index;
     },
-    [panX]
+    [animationEnabled, panX]
   );
 
   React.useEffect(() => {