conver to rngh 2, fix buggy initial page

Author: computerjazz

package.json

@@ -33,8 +33,8 @@
   ],
   "peerDependencies": {
     "react-native": ">=0.62.0",
-    "react-native-gesture-handler": ">=1.10.1",
-    "react-native-reanimated": ">=2.0.0"
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=2.8.0"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^2.0.0",
@@ -49,8 +49,8 @@
     "react": "~16.9.0",
     "react-native": "^0.62.2",
     "react-native-builder-bob": "^0.18.1",
-    "react-native-gesture-handler": "^1.10.3",
-    "react-native-reanimated": "^2.2.0",
+    "react-native-gesture-handler": "^2.0.0",
+    "react-native-reanimated": "^2.8.0",
     "typescript": "^4.2.4"
   },
   "react-native-builder-bob": {

src/index.tsx

@@ -7,21 +7,22 @@ import React, {
 import { StyleProp, StyleSheet, ViewStyle } from "react-native";
 import Animated, {
   useAnimatedStyle,
-  useAnimatedGestureHandler,
   useSharedValue,
   withSpring,
   useDerivedValue,
   useAnimatedReaction,
   runOnJS,
   interpolate,
+  WithSpringConfig,
 } from "react-native-reanimated";
 import {
-  GestureEvent,
-  PanGestureHandler,
-  PanGestureHandlerEventPayload,
+  ComposedGesture,
+  Gesture,
+  GestureDetector,
+  GestureType,
 } from "react-native-gesture-handler";
 
-export const DEFAULT_ANIMATION_CONFIG: Animated.WithSpringConfig = {
+export const DEFAULT_ANIMATION_CONFIG: WithSpringConfig = {
   damping: 20,
   mass: 0.2,
   stiffness: 100,
@@ -52,9 +53,9 @@ type Props = {
   pageInterpolator?: typeof defaultPageInterpolator;
   minIndex?: number;
   maxIndex?: number;
-  simultaneousHandlers?: React.Ref<unknown> | React.Ref<unknown>[];
+  simultaneousGestures?: (ComposedGesture | GestureType)[];
   gesturesDisabled?: boolean;
-  animationConfig?: Partial<Animated.WithSpringConfig>;
+  animationConfig?: Partial<WithSpringConfig>;
 };
 
 type ImperativeApiOptions = {
@@ -78,7 +79,7 @@ function InfinitePager(
     pageInterpolator = defaultPageInterpolator,
     minIndex = -Infinity,
     maxIndex = Infinity,
-    simultaneousHandlers,
+    simultaneousGestures = [],
     gesturesDisabled,
     animationConfig = {},
   }: Props,
@@ -158,48 +159,42 @@ function InfinitePager(
     []
   );
 
-  const gestureHandler = useAnimatedGestureHandler<
-    GestureEvent<PanGestureHandlerEventPayload>,
-    { startX: number }
-  >(
-    {
-      onStart: (_, ctx) => {
-        ctx.startX = translateX.value;
-      },
-      onActive: (event, ctx) => {
-        const rawVal = ctx.startX + event.translationX;
-        const page = -rawVal / pageWidth.value;
-        if (page >= minIndex && page <= maxIndex) {
-          translateX.value = rawVal;
-        }
-      },
-      onEnd: (evt) => {
-        const isFling = Math.abs(evt.velocityX) > 500;
-        let velocityModifier = isFling ? pageWidth.value / 2 : 0;
-        if (evt.velocityX < 0) velocityModifier *= -1;
-        let page =
-          -1 *
-          Math.round((translateX.value + velocityModifier) / pageWidth.value);
-        if (page < minIndex) page = minIndex;
-        if (page > maxIndex) page = maxIndex;
+  const startX = useSharedValue(0);
+
+  const panGesture = Gesture.Pan()
+    .onBegin(() => {
+      startX.value = translateX.value;
+    })
+    .onUpdate((evt) => {
+      const rawVal = startX.value + evt.translationX;
+      const page = -rawVal / pageWidth.value;
+      if (page >= minIndex && page <= maxIndex) {
+        translateX.value = rawVal;
+      }
+    })
+    .onEnd((evt) => {
+      const isFling = Math.abs(evt.velocityX) > 500;
+      let velocityModifier = isFling ? pageWidth.value / 2 : 0;
+      if (evt.velocityX < 0) velocityModifier *= -1;
+      let page =
+        -1 *
+        Math.round((translateX.value + velocityModifier) / pageWidth.value);
+      if (page < minIndex) page = minIndex;
+      if (page > maxIndex) page = maxIndex;
 
-        const animCfg = Object.assign(
-          {},
-          DEFAULT_ANIMATION_CONFIG,
-          animCfgRef.current
-        );
+      const animCfg = Object.assign(
+        {},
+        DEFAULT_ANIMATION_CONFIG,
+        animCfgRef.current
+      );
 
-        translateX.value = withSpring(-page * pageWidth.value, animCfg);
-      },
-    },
-    [minIndex, maxIndex]
-  );
+      translateX.value = withSpring(-page * pageWidth.value, animCfg);
+    })
+    .enabled(!gesturesDisabled);
 
   return (
-    <PanGestureHandler
-      enabled={!gesturesDisabled}
-      onGestureEvent={gestureHandler}
-      simultaneousHandlers={simultaneousHandlers}
+    <GestureDetector
+      gesture={Gesture.Simultaneous(panGesture, ...simultaneousGestures)}
     >
       <Animated.View
         style={style}
@@ -222,7 +217,7 @@ function InfinitePager(
           );
         })}
       </Animated.View>
-    </PanGestureHandler>
+    </GestureDetector>
   );
 }
 
@@ -284,11 +279,12 @@ const PageWrapper = React.memo(
     const animStyle = useAnimatedStyle(() => {
       // Short circuit page interpolation to prevent buggy initial values due to possible race condition:
       // https://github.com/software-mansion/react-native-reanimated/issues/2571
-      if (!pageWidth.value) return {};
+      const isInactivePageBeforeInit = index !== 0 && !pageWidth.value;
+      const _pageWidth = isInactivePageBeforeInit ? focusAnim : pageWidth;
       return pageInterpolatorRef.current({
         focusAnim,
         pageAnim,
-        pageWidth,
+        pageWidth: _pageWidth,
         index,
       });
     }, [pageWidth, pageAnim, index, translation]);