chore: upgrade react-native-gesture-handler and react-native-reanimated dependencies

- Update react-native-gesture-handler to version 2.24.0
- Update react-native-reanimated to version 3.17.1
- Add reanimated babel plugin
- Update peer dependency requirements for react and react-native
- Add 'worklet' directive to gesture handler functions in ImageViewer

Author: VoDucDuoc

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:react-native-builder-bob/babel-preset'],
+  plugins: ['react-native-reanimated/plugin'],
 };

example/package.json

@@ -9,14 +9,14 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@duocvo/react-native-gesture-image": "*",
     "@expo/metro-runtime": "~4.0.1",
     "expo": "~52.0.37",
     "expo-status-bar": "~2.0.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.7",
-    "react-native-web": "~0.19.13",
-    "@duocvo/react-native-gesture-image": "*"
+    "react-native-web": "~0.19.13"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

package.json

@@ -83,17 +83,17 @@
     "react": "18.3.1",
     "react-native": "0.76.7",
     "react-native-builder-bob": "^0.37.0",
-    "react-native-gesture-handler": "~2.20.2",
-    "react-native-reanimated": "~3.16.1",
+    "react-native-gesture-handler": "^2.24.0",
+    "react-native-reanimated": "^3.17.1",
     "release-it": "^17.10.0",
     "typescript": "^5.2.2"
   },
   "resolutions": {
     "@types/react": "^18.2.44"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0"
   },
   "workspaces": [
     "example"

src/ImageViewer.tsx

@@ -88,10 +88,12 @@ const ImageViewer = ({ source, imageStyle }: ImageViewerProps) => {
 
   const pinch = Gesture.Pinch()
     .onStart((event) => {
+      'worklet';
       focalX.value = event.focalX - SCREEN_WIDTH / 2;
       focalY.value = event.focalY - SCREEN_HEIGHT / 2;
     })
     .onUpdate((event) => {
+      'worklet';
       const dampening = 0.1;
       const scaleFactor = 1 + (event.scale - 1) * dampening;
       const newScale = scale.value * scaleFactor;
@@ -105,6 +107,7 @@ const ImageViewer = ({ source, imageStyle }: ImageViewerProps) => {
       }
     })
     .onEnd(() => {
+      'worklet';
       if (scale.value <= 1) {
         scale.value = withTiming(1, { duration: 300 });
         translateX.value = withTiming(0, { duration: 300 });
@@ -119,10 +122,12 @@ const ImageViewer = ({ source, imageStyle }: ImageViewerProps) => {
 
   const pan = Gesture.Pan()
     .onStart(() => {
+      'worklet';
       lastTranslateX.value = translateX.value;
       lastTranslateY.value = translateY.value;
     })
     .onUpdate((event) => {
+      'worklet';
       if (scale.value > 1) {
         const scaledWidth = imageWidth.value * scale.value;
         const scaledHeight = imageHeight.value * scale.value;
@@ -154,13 +159,15 @@ const ImageViewer = ({ source, imageStyle }: ImageViewerProps) => {
       }
     })
     .onEnd(() => {
+      'worklet';
       snapToEdges();
     })
     .enabled(activePan);
 
   const doubleTap = Gesture.Tap()
     .numberOfTaps(2)
     .onStart((event) => {
+      'worklet';
       if (scale.value > 1) {
         scale.value = withTiming(1);
         translateX.value = withTiming(0);

yarn.lock

@@ -1843,7 +1843,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@duocvo/react-native-gesture-image@workspace:.":
+"@duocvo/react-native-gesture-image@*, @duocvo/react-native-gesture-image@workspace:.":
   version: 0.0.0-use.local
   resolution: "@duocvo/react-native-gesture-image@workspace:."
   dependencies:
@@ -1863,13 +1863,13 @@ __metadata:
     react: 18.3.1
     react-native: 0.76.7
     react-native-builder-bob: ^0.37.0
-    react-native-gesture-handler: ~2.20.2
-    react-native-reanimated: ~3.16.1
+    react-native-gesture-handler: ^2.24.0
+    react-native-reanimated: ^3.17.1
     release-it: ^17.10.0
     typescript: ^5.2.2
   peerDependencies:
-    react: "*"
-    react-native: "*"
+    react: ">=18.0.0"
+    react-native: ">=0.72.0"
   languageName: unknown
   linkType: soft
 
@@ -11629,7 +11629,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -11838,18 +11838,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-gesture-handler@npm:~2.20.2":
-  version: 2.20.2
-  resolution: "react-native-gesture-handler@npm:2.20.2"
+"react-native-gesture-handler@npm:^2.24.0":
+  version: 2.24.0
+  resolution: "react-native-gesture-handler@npm:2.24.0"
   dependencies:
     "@egjs/hammerjs": ^2.0.17
     hoist-non-react-statics: ^3.3.0
     invariant: ^2.2.4
-    prop-types: ^15.7.2
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 8d9e7496615dad4e6bb6dd1c750c2d3b2e57c6173a1d466b4503b28b159b1dbbb1e7527c3d4bda12324422200c07835f34d81c9bd3cd1b7f594b22949bef274a
+  checksum: 65abaeef68180fee2811d01d88ff50c231a91faca05279222fcaaa55349e758b68a7d6a9ac3eddfb1887f6b4c4790ac195b99989f1ad8a2a1f3f3bdff3ba0a76
   languageName: node
   linkType: hard
 
@@ -11858,6 +11857,7 @@ __metadata:
   resolution: "react-native-gesture-image-example@workspace:example"
   dependencies:
     "@babel/core": ^7.20.0
+    "@duocvo/react-native-gesture-image": "*"
     "@expo/metro-runtime": ~4.0.1
     expo: ~52.0.37
     expo-status-bar: ~2.0.1
@@ -11869,9 +11869,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"react-native-reanimated@npm:~3.16.1":
-  version: 3.16.7
-  resolution: "react-native-reanimated@npm:3.16.7"
+"react-native-is-edge-to-edge@npm:1.1.6":
+  version: 1.1.6
+  resolution: "react-native-is-edge-to-edge@npm:1.1.6"
+  peerDependencies:
+    react: ">=18.2.0"
+    react-native: ">=0.73.0"
+  checksum: 4e07c1e34c01c8d50fd7c1d0460db06f6f0515197405230386a8ffb950cb724b10743af032310d1384df0a90059bfb8992ba2d93344ce86315315f0493feccc2
+  languageName: node
+  linkType: hard
+
+"react-native-reanimated@npm:^3.17.1":
+  version: 3.17.1
+  resolution: "react-native-reanimated@npm:3.17.1"
   dependencies:
     "@babel/plugin-transform-arrow-functions": ^7.0.0-0
     "@babel/plugin-transform-class-properties": ^7.0.0-0
@@ -11884,11 +11894,12 @@ __metadata:
     "@babel/preset-typescript": ^7.16.7
     convert-source-map: ^2.0.0
     invariant: ^2.2.4
+    react-native-is-edge-to-edge: 1.1.6
   peerDependencies:
     "@babel/core": ^7.0.0-0
     react: "*"
     react-native: "*"
-  checksum: 108095709cd7a3effc5b5d276d94e161b399bd2d06e32140834168a0051545401bb09228071447e5925571da3f86f335d2a82c76751cdae07f66faf50b25c97f
+  checksum: fd05040a3fc6a8f4efb387657c0cd6c314e5e6b50f859e127d6891d8f81c65b020ddcf78615aa0074b4e134e450d38c40db916c544e1e2efa26c50c82815607d
   languageName: node
   linkType: hard