chore: update expo 51 (#12)

* chore: expo v51 versions * fix: remove skia value deps * refactor: remove internal context * fix: unsupported method push * docs: update context usage * chore: update metro react native babel preset
enzomanuelmangano · May 30, 2024 · d6c2224 · d6c2224
1 parent e4f0af8
commit d6c2224
Show file tree

Hide file tree

Showing 10 changed files with 2,392 additions and 2,536 deletions.
diff --git a/README.md b/README.md
@@ -52,16 +52,20 @@ export default function App() {
   const cx = useSharedValue(100);
   const cy = useSharedValue(100);
 
-  const circleGesture = useGestureHandler<{ x: number; y: number }>({
-    onStart: (_, context) => {
+  const context = useSharedValue({ x: 0, y: 0 });
+
+  const circleGesture = useGestureHandler({
+    onStart: () => {
       'worklet'; // Remember the 'worklet' keyword
-      context.x = cx.value;
-      context.y = cy.value;
+      context.value = {
+        x: cx.value,
+        y: cy.value,
+      }
     },
     onActive: ({ translationX, translationY }, context) => {
       'worklet';
-      cx.value = context.x + translationX;
-      cy.value = context.y + translationY;
+      cx.value = context.value.x + translationX;
+      cy.value = context.value.y + translationY;
     },
   });
 
@@ -105,15 +109,17 @@ import { Gesture } from 'react-native-gesture-handler';
 
 const panGesture = Gesture.Pan().runOnJS(true)
 
-const circleGesture = useGestureHandler<{ x: number; y: number }>({
+const circleGesture = useGestureHandler({
   // You can avoid the 'worklet' keyword if you are running the gesture on JS thread
-  onStart: (_, context) => {
-    context.x = cx.value;
-    context.y = cy.value;
+  onStart: () => {
+    context.value = {
+      x: cx.value,
+      y: cy.value,
+    }
   },
-  onActive: ({ translationX, translationY }, context) => {
-    cx.value = context.x + translationX;
-    cy.value = context.y + translationY;
+  onActive: ({ translationX, translationY }) => {
+    cx.value = context.value.x + translationX;
+    cy.value = context.value.y + translationY;
   },
 });
 

diff --git a/example/package.json b/example/package.json
@@ -9,15 +9,14 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "expo": "^50.0.8",
-    "expo-status-bar": "~1.11.1",
+    "expo": "~51.0.9",
+    "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.73.4",
-    "react-native-web": "~0.19.6"
+    "react-native": "0.74.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
+    "@babel/core": "^7.24.0",
     "@expo/webpack-config": "~19.0.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-module-resolver": "^4.1.0"

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -19,32 +19,44 @@ function App() {
   const cx = useSharedValue(100);
   const cy = useSharedValue(400);
 
-  const circleGesture = useGestureHandler<{ x: number; y: number }>({
-    onStart: (_, context) => {
+  const circleContext = useSharedValue({
+    x: 0,
+    y: 0,
+  });
+
+  const circleGesture = useGestureHandler({
+    onStart: () => {
       'worklet';
-      context.x = cx.value;
-      context.y = cy.value;
+      circleContext.value = {
+        x: cx.value,
+        y: cy.value,
+      };
     },
-    onActive: ({ translationX, translationY }, context) => {
+    onActive: ({ translationX, translationY }) => {
       'worklet';
-      cx.value = context.x + translationX;
-      cy.value = context.y + translationY;
+      cx.value = circleContext.value.x + translationX;
+      cy.value = circleContext.value.y + translationY;
     },
   });
 
   const rectX = useSharedValue(100);
   const rectY = useSharedValue(100);
 
-  const rectGesture = useGestureHandler<{ x: number; y: number }>({
-    onStart: (_, context) => {
-      'worklet';
-      context.x = rectX.value;
-      context.y = rectY.value;
+  const rectContext = useSharedValue({
+    x: 0,
+    y: 0,
+  });
+
+  const rectGesture = useGestureHandler({
+    onStart: () => {
+      rectContext.value = {
+        x: rectX.value,
+        y: rectY.value,
+      };
     },
-    onActive: ({ translationX, translationY }, context) => {
-      'worklet';
-      rectX.value = context.x + translationX;
-      rectY.value = context.y + translationY;
+    onActive: ({ translationX, translationY }) => {
+      rectX.value = rectContext.value.x + translationX;
+      rectY.value = rectContext.value.y + translationY;
     },
   });