Reanimated and GestureHandler upgrade

demo/src/screens/componentScreens/index.js

@@ -15,7 +15,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.CheckboxScreen', () => require('./CheckboxScreen').default);
   registrar('unicorn.components.ChipScreen', () => require('./ChipScreen').default);
   registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
-  registrar('unicorn.components.ColorPickerScreen', () => require('./ColorPickerScreen').default);
+  registrar('unicorn.components.ColorPickerScreen', () => gestureHandlerRootHOC(require('./ColorPickerScreen').default));
   registrar('unicorn.components.ColorSwatchScreen', () => require('./ColorSwatchScreen').default);
   registrar('unicorn.components.ConnectionStatusBar', () => require('./ConnectionStatusBarScreen').default);
   registrar('unicorn.components.DateTimePickerScreen', () => require('./DateTimePickerScreen').default);
@@ -28,7 +28,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.IconScreen', () => require('./IconScreen').default);
   registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
   registrar('unicorn.components.GridListScreen', () => require('./GridListScreen').default);
-  registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
+  registrar('unicorn.components.GridViewScreen', () => gestureHandlerRootHOC(require('./GridViewScreen').default));
   registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
   registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
   registrar('unicorn.components.MarqueeScreen', () => require('./MarqueeScreen').default);
@@ -38,12 +38,12 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.PanDismissibleScreen', () => require('./PanDismissibleScreen').default);
   registrar('unicorn.components.PanListenerScreen', () => require('./PanListenerScreen').default);
   registrar('unicorn.components.PanResponderScreen', () => require('./PanResponderScreen').default);
-  registrar('unicorn.components.PickerScreen', () => require('./PickerScreen').default);
+  registrar('unicorn.components.PickerScreen', () => gestureHandlerRootHOC(require('./PickerScreen').default));
   registrar('unicorn.animations.ProgressBarScreen', () => require('../componentScreens/ProgressBarScreen').default);
   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);

demo/src/screens/incubatorScreens/PanViewScreen.tsx

@@ -146,9 +146,8 @@ class PanViewScreen extends Component {
 
   render() {
     const {showToast, showDialog} = this.state;
-    const Container = showDialog ? View : GestureHandlerRootView;
     return (
-      <Container style={styles.root}>
+      <GestureHandlerRootView style={styles.root}>
         <View marginL-page height={50} centerV>
           <Text text50>New Pan View</Text>
         </View>
@@ -164,7 +163,7 @@ class PanViewScreen extends Component {
         </ScrollView>
         {showToast && this.renderToast()}
         {showDialog && this.renderDialog()}
-      </Container>
+      </GestureHandlerRootView>
     );
   }
 }

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/tabController/useScrollToItem.ts

@@ -128,13 +128,6 @@ const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemPr
     const rightOffsets = [];
     rightOffsets.push(-containerWidth + widths[0] + outerSpacing + innerSpacing);
     while (index < itemsCount) {
-      /* map animated widths and offsets */
-      itemsWidthsAnimated.value[index] = widths[index];
-      if (index > 0) {
-        itemsOffsetsAnimated.value[index] =
-            itemsOffsetsAnimated.value[index - 1] + itemsWidthsAnimated.value[index - 1];
-      }
-
       /* calc center, left and right offsets */
       centeredOffsets[index] = currentCenterOffset - screenCenter + widths[index] / 2;
       ++index;
@@ -154,9 +147,24 @@ const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemPr
 
     setOffsets({CENTER: centeredOffsets, LEFT: leftOffsets, RIGHT: rightOffsets}); // default for DYNAMIC is CENTER
 
-    // trigger value change
-    itemsWidthsAnimated.value = [...itemsWidthsAnimated.value];
-    itemsOffsetsAnimated.value = [...itemsOffsetsAnimated.value];
+    // Update shared values
+    itemsWidthsAnimated.modify((value) => {
+      'worklet';
+      value.forEach((_, index) => {
+        value[index] = widths[index];
+      });
+      return value;
+    });
+
+    itemsOffsetsAnimated.modify((value) => {
+      'worklet';
+      value.forEach((_, index) => {
+        if (index > 0) {
+          value[index] = value[index - 1] + widths[index - 1];
+        }
+      });
+      return value;
+    });
   },
   [itemsCount, outerSpacing, innerSpacing, addOffsetMargin, containerWidth]);
 

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

@@ -137,7 +137,6 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     children
   });
 
-  // @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 {
@@ -213,7 +212,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}>
         <DialogContent/>
       </View>

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}