Reanimated and GestureHandler upgrade

demo/src/screens/componentScreens/index.js

@@ -43,7 +43,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
   registrar('unicorn.components.RadioButtonScreen', () => require('./RadioButtonScreen').default);
   registrar('unicorn.components.ScrollBarScreen', () => require('./ScrollBarScreen').default);
-  registrar('unicorn.components.SectionsWheelPickerScreen', () => require('./SectionsWheelPickerScreen').default);
+  registrar('unicorn.components.SectionsWheelPickerScreen', () => gestureHandlerRootHOC(require('./SectionsWheelPickerScreen').default));
   registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
   registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
   registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);

package.json

@@ -106,12 +106,12 @@
     "react-dom": "^18.2.0",
     "react-native": "0.71.12",
     "react-native-fs": "^2.20.0",
-    "react-native-gesture-handler": "2.9.0",
+    "react-native-gesture-handler": "2.14.1",
     "react-native-haptic-feedback": "^1.11.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-mmkv": "2.11.0",
     "react-native-navigation": "7.32.1",
-    "react-native-reanimated": "3.4.0",
+    "react-native-reanimated": "3.8.1",
     "react-native-shimmer-placeholder": "^2.0.6",
     "react-native-svg": "^13.7.0",
     "react-native-svg-transformer": "1.1.0",

src/components/marquee/index.tsx

@@ -76,7 +76,6 @@ function Marquee(props: MarqueeProps) {
     }
   }, [viewLayout, textLayout]);
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const translateStyle = useAnimatedStyle(() => {
     if (offset.value) {
       return {
@@ -90,7 +89,6 @@ function Marquee(props: MarqueeProps) {
 
   return (
     <View style={[styles.container, containerStyle]} onLayout={onLayoutView}>
-      {/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
       <View reanimated style={[translateStyle]}>
         <Text style={[styles.text, labelStyle]} onLayout={onLayoutText}>
           {label}

src/components/modal/api/modal.api.json

@@ -33,8 +33,7 @@
     {
       "name": "useGestureHandlerRootView",
       "type": "boolean",
-      "description": "Should add a GestureHandlerRootView",
-      "note": "Android only"
+      "description": "Should add a GestureHandlerRootView"
     }
   ],
   "snippet": [

src/components/modal/index.tsx

@@ -45,7 +45,7 @@ export interface ModalProps extends RNModalProps {
    */
   accessibilityLabel?: string;
   /**
-   * Should add a GestureHandlerRootView (Android only)
+   * Should add a GestureHandlerRootView
    */
   useGestureHandlerRootView?: boolean;
   /**
@@ -112,9 +112,8 @@ class Modal extends Component<ModalProps> {
       ...others
     } = this.props;
     const defaultContainer = enableModalBlur && Constants.isIOS && BlurView ? BlurView : View;
-    const useGestureHandler = useGestureHandlerRootView && Constants.isAndroid;
-    const GestureContainer = useGestureHandler ? GestureHandlerRootView : React.Fragment;
-    const gestureContainerProps = useGestureHandler ? {style: styles.fill} : {};
+    const GestureContainer = useGestureHandlerRootView ? GestureHandlerRootView : React.Fragment;
+    const gestureContainerProps = useGestureHandlerRootView ? {style: styles.fill} : {};
     const useKeyboardAvoiding = useKeyboardAvoidingView && Constants.isIOS;
     const KeyboardAvoidingContainer = useKeyboardAvoiding ? KeyboardAvoidingView : React.Fragment;
     const keyboardAvoidingContainerProps = useKeyboardAvoiding

src/components/sortableGridList/SortableItem.tsx

@@ -171,7 +171,6 @@ function SortableItem(props: PropsWithChildren<SortableItemProps & ReturnType<ty
       }
     });
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     const scale = withSpring(isDragging.value ? 1.1 : 1);
     const zIndex = isDragging.value ? 100 : withTiming(0, animationConfig);
@@ -183,7 +182,6 @@ function SortableItem(props: PropsWithChildren<SortableItemProps & ReturnType<ty
   });
 
   return (
-    // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
     <View reanimated style={[style, animatedStyle]} onLayout={onLayout}>
       <GestureDetector gesture={dragOnLongPressGesture}>
         <View>{props.children}</View>

src/components/tabController/PageCarousel.tsx

@@ -104,7 +104,6 @@ function PageCarousel(props: ScrollViewProps) {
     <Reanimated.ScrollView
       {...others}
       style={_style}
-      // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
       ref={carousel}
       horizontal
       pagingEnabled

src/components/tabController/TabBarItem.tsx

@@ -105,7 +105,6 @@ export interface TabControllerItemProps extends Pick<TabControllerBarProps, 'spr
 interface Props extends TabControllerItemProps {
   index: number;
   targetPage: any; // TODO: typescript?
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   currentPage: Reanimated.Adaptable<number>;
   onLayout?: (event: LayoutChangeEvent, index: number) => void;
 }

src/components/textField/ClearButton.tsx

@@ -22,7 +22,6 @@ const ClearButton = ({testID, onClear, onChangeText}: Pick<TextFieldProps, 'onCl
   const animatedValue = useSharedValue(hasValue ? VISIBLE_POSITION : NON_VISIBLE_POSITION);
   const animatedOpacity = useSharedValue(hasValue ? 1 : 0);
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{translateY: animatedValue.value}, {translateX: 0}],
@@ -49,7 +48,6 @@ const ClearButton = ({testID, onClear, onChangeText}: Pick<TextFieldProps, 'onCl
   };
 
   return (
-    //@ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
     <View reanimated style={style} testID={`${testID}.container`}>
       <Button
         link

src/incubator/Calendar/Header.tsx

@@ -58,11 +58,11 @@ const Header = (props: HeaderProps) => {
       return <Text style={styles.title}>{title}</Text>;
     }
     return (
+      //@ts-expect-error - hack to animate the title text change
       <AnimatedTextInput 
         value={getTitle(selectedDate.value)} // setting initial value
         {...{animatedProps}}
         editable={false}
-        // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
         style={styles.title}
       />);
   };

src/incubator/Calendar/TodayButton.tsx

@@ -16,7 +16,6 @@ const TodayButton = (props: TodayButtonProps) => {
   const {containerStyle, buttonProps} = props;
   const {selectedDate, setDate} = useContext(CalendarContext);
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [
@@ -40,7 +39,6 @@ const TodayButton = (props: TodayButtonProps) => {
   [buttonProps]);
 
   return (
-    // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
     <View reanimated style={[styles.container, containerStyle, animatedStyle]}>
       <Button
         outline

src/incubator/Dialog/index.tsx

@@ -124,7 +124,6 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     if (isVertical) {
       return {
@@ -200,7 +199,6 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
 
   const renderDialog = () => (
     <GestureDetector gesture={panGesture}>
-      {/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
       <View {...containerProps} reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
         {headerProps && <DialogHeader {...headerProps}/>}
         {children}

src/incubator/Slider/Thumb.tsx

@@ -87,7 +87,6 @@ const Thumb = (props: ThumbProps) => {
     });
   gesture.enabled(!disabled);
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     const customStyle = isPressed.value ? activeStyle?.value : defaultStyle?.value;
     return {
@@ -110,7 +109,6 @@ const Thumb = (props: ThumbProps) => {
     <GestureDetector gesture={gesture}>
       <View
         reanimated
-        // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
         style={[styles.thumbPosition, enableShadow && styles.thumbShadow, animatedStyle]}
         hitSlop={hitSlop}
         onLayout={onThumbLayout}

src/incubator/Slider/index.tsx

@@ -375,7 +375,6 @@ const Slider = React.memo((props: Props) => {
     }
   };
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const trackAnimatedStyles = useAnimatedStyle(() => {
     if (useRange) {
       return {

src/incubator/TouchableOpacity.tsx

@@ -1,7 +1,6 @@
 import React, {PropsWithChildren, useCallback, useMemo} from 'react';
 import {LayoutChangeEvent} from 'react-native';
 import Reanimated, {
-  useAnimatedGestureHandler,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
@@ -104,35 +103,41 @@ function TouchableOpacity(props: Props) {
     isActive.value = withTiming(value, {duration: 200});
   };
 
-  const tapGestureHandler = useAnimatedGestureHandler({
-    onStart: () => {
-      toggleActive(1);
-    },
-    onEnd: () => {
-      toggleActive(0);
-      runOnJS(onPress)();
-    },
-    onFail: () => {
-      if (!isLongPressed.value) {
+  const tapGestureHandler = ({nativeEvent: {state}}: any) => {
+    switch (state) {
+      case State.BEGAN:
+        toggleActive(1);
+        break;
+      case State.CANCELLED:
+      case State.END:
         toggleActive(0);
-      }
+        runOnJS(onPress)();
+        break;
+      case State.FAILED:
+        if (!isLongPressed.value) {
+          toggleActive(0);
+        }
+        break;
     }
-  });
-
-  const longPressGestureHandler = useAnimatedGestureHandler({
-    onActive: () => {
-      if (!isLongPressed.value) {
-        isLongPressed.value = true;
-        runOnJS(onLongPress)();
-      }
-    },
-    onFinish: () => {
-      toggleActive(0);
-      isLongPressed.value = false;
+  };
+
+  const longPressGestureHandler = ({nativeEvent: {state}}: any) => {
+    switch (state) {
+      case State.ACTIVE:
+        if (!isLongPressed.value) {
+          isLongPressed.value = true;
+          runOnJS(onLongPress)();
+        }
+        break;
+      case State.CANCELLED:
+      case State.END:
+      case State.FAILED:
+        toggleActive(0);
+        isLongPressed.value = false;
+        break;
     }
-  });
+  };
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     const activeColor = feedbackColor || backgroundColor;
     const opacity = interpolate(isActive.value, [0, 1], [1, activeOpacity]);
@@ -151,12 +156,12 @@ function TouchableOpacity(props: Props) {
 
   return (
     <TapGestureHandler
-      onGestureEvent={tapGestureHandler}
+      onHandlerStateChange={tapGestureHandler}
       shouldCancelWhenOutside
       enabled={!disabled}
     >
       <Reanimated.View>
-        <Container onGestureEvent={longPressGestureHandler} shouldCancelWhenOutside>
+        <Container onHandlerStateChange={longPressGestureHandler} shouldCancelWhenOutside>
           <Reanimated.View
             {...others}
             ref={forwardedRef}

src/incubator/panView/index.tsx

@@ -1,12 +1,11 @@
-import {isEmpty} from 'lodash';
 import React from 'react';
 import {StyleProp, View as RNView, ViewStyle} from 'react-native';
 import {useAnimatedStyle} from 'react-native-reanimated';
-import {PanGestureHandler} from 'react-native-gesture-handler';
+import {GestureDetector} from 'react-native-gesture-handler';
 import {asBaseComponent} from '../../commons/new';
 import View, {ViewProps} from '../../components/view';
-import {PanningDirections, PanningDirectionsEnum} from './panningUtil';
 import useHiddenLocation from '../hooks/useHiddenLocation';
+import {PanningDirections, PanningDirectionsEnum} from './panningUtil';
 import usePanGesture, {
   PanGestureProps,
   PanViewDirections,
@@ -15,6 +14,7 @@ import usePanGesture, {
   DEFAULT_DIRECTIONS,
   DEFAULT_ANIMATION_CONFIG
 } from './usePanGesture';
+
 export {
   PanningDirections,
   PanningDirectionsEnum,
@@ -50,7 +50,7 @@ const PanView = (props: Props) => {
   } = props;
 
   const {setRef, onLayout, hiddenLocation} = useHiddenLocation<RNView>();
-  const {translation, panGestureEvent} = usePanGesture({
+  const {translation, gesture} = usePanGesture({
     directions,
     dismissible,
     animateToOrigin,
@@ -60,7 +60,6 @@ const PanView = (props: Props) => {
     hiddenLocation
   });
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{translateX: translation.x.value}, {translateY: translation.y.value}]
@@ -69,12 +68,11 @@ const PanView = (props: Props) => {
 
   return (
     <View ref={setRef} style={containerStyle} onLayout={onLayout}>
-      <PanGestureHandler onGestureEvent={isEmpty(directions) ? undefined : panGestureEvent}>
-        {/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
+      <GestureDetector gesture={gesture}>
         <View reanimated style={animatedStyle}>
           <View {...others}>{children}</View>
         </View>
-      </PanGestureHandler>
+      </GestureDetector>
     </View>
   );
 };

src/incubator/panView/usePanGesture.ts

@@ -1,6 +1,6 @@
 import {useCallback} from 'react';
-import {PanGestureHandlerEventPayload} from 'react-native-gesture-handler';
-import {useSharedValue, withSpring, withTiming, useAnimatedGestureHandler, runOnJS} from 'react-native-reanimated';
+import {useSharedValue, withSpring, withTiming, runOnJS} from 'react-native-reanimated';
+import {PanGestureHandlerEventPayload, Gesture} from 'react-native-gesture-handler';
 import {
   PanningDirections,
   PanningDirectionsEnum,
@@ -69,6 +69,7 @@ const usePanGesture = (props: PanGestureProps) => {
   const waitingForDismiss = useSharedValue<boolean>(false);
   const translationX = useSharedValue<number>(0);
   const translationY = useSharedValue<number>(0);
+  const initialTranslation = useSharedValue<Frame>({x: 0, y: 0});
 
   const getTranslationOptions = () => {
     'worklet';
@@ -112,14 +113,14 @@ const usePanGesture = (props: PanGestureProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [animateToOrigin]);
 
-  const onGestureEvent = useAnimatedGestureHandler({
-    onStart: (_event: PanGestureHandlerEventPayload, context: {initialTranslation: Frame}) => {
-      context.initialTranslation = {x: translationX.value, y: translationY.value};
-    },
-    onActive: (event: PanGestureHandlerEventPayload, context: {initialTranslation: Frame}) => {
-      setTranslation(event, context.initialTranslation);
-    },
-    onEnd: (event: PanGestureHandlerEventPayload) => {
+  const panGesture = Gesture.Pan()
+    .onBegin(() => {
+      initialTranslation.value = {x: translationX.value, y: translationY.value};
+    })
+    .onStart((event: PanGestureHandlerEventPayload) => {
+      setTranslation(event, initialTranslation.value);
+    })
+    .onEnd((event: PanGestureHandlerEventPayload) => {
       if (dismissible) {
         const velocity = getDismissVelocity(event, directions, getTranslationOptions(), threshold);
         if (velocity) {
@@ -141,11 +142,9 @@ const usePanGesture = (props: PanGestureProps) => {
       } else {
         returnToOrigin();
       }
-    }
-  },
-  [directions, dismissible, setTranslation, returnToOrigin]);
+    });
 
-  return {translation: {x: translationX, y: translationY}, panGestureEvent: onGestureEvent, reset};
+  return {translation: {x: translationX, y: translationY}, gesture: panGesture, reset};
 };
 
 export default usePanGesture;