fix(#71): update shared value dependencies on hooks (#72)

likashefqet · Nov 17, 2024 · fb2319f · fb2319f
1 parent ebabd86
commit fb2319f
Show file tree

Hide file tree

Showing 10 changed files with 2,700 additions and 3,717 deletions.
diff --git a/example/app.json b/example/app.json
@@ -3,6 +3,7 @@
     "name": "example",
     "slug": "example",
     "version": "1.0.0",
+    "newArchEnabled": true,
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
@@ -11,9 +12,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },

diff --git a/example/package.json b/example/package.json
@@ -10,18 +10,18 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "expo": "^51.0.9",
-    "expo-image": "^1.12.9",
-    "expo-status-bar": "~1.12.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.74.1",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-reanimated": "~3.10.1",
+    "expo": "^52.0.7",
+    "expo-image": "~2.0.0",
+    "expo-status-bar": "~2.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.2",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.16.1",
     "react-native-reanimated-carousel": "^3.5.1",
     "react-native-redash": "^18.1.3",
-    "react-native-safe-area-context": "^4.10.8",
-    "react-native-svg": "^15.6.0",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-svg": "15.8.0",
     "react-native-web": "~0.19.10"
   },
   "devDependencies": {

diff --git a/example/src/components/Tabs.tsx b/example/src/components/Tabs.tsx
@@ -56,7 +56,7 @@ type TabsProps = {
 
 export const Tabs = ({ tabs, isMenuVisible, renderMenu }: TabsProps) => {
   const { bottom } = useSafeAreaInsets();
-  const [activeIndex, setActiveIndex] = useState(2);
+  const [activeIndex, setActiveIndex] = useState(0);
 
   return (
     <>

diff --git a/example/src/screens/ExpoImageZoomTab.tsx b/example/src/screens/ExpoImageZoomTab.tsx
@@ -38,9 +38,12 @@ export const ExpoImageZoomTab = () => {
     zoomableRef?.current?.reset();
   };
 
-  const animatedStyle = useAnimatedStyle(() => ({
-    borderRadius: 30 / scale.value,
-  }));
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      borderRadius: 30 / scale.value,
+    }),
+    [scale]
+  );
 
   return (
     <View style={styles.container}>

diff --git a/example/src/screens/ImageZoomTab.tsx b/example/src/screens/ImageZoomTab.tsx
@@ -38,9 +38,12 @@ export const ImageZoomTab = () => {
     imageZoomRef?.current?.reset();
   };
 
-  const animatedStyle = useAnimatedStyle(() => ({
-    borderRadius: 30 / scale.value,
-  }));
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      borderRadius: 30 / scale.value,
+    }),
+    [scale]
+  );
 
   return (
     <View style={styles.container}>

diff --git a/example/yarn.lock b/example/yarn.lock
diff --git a/package.json b/package.json
@@ -75,7 +75,7 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^17.0.2",
-    "@evilmartians/lefthook": "^1.2.2",
+    "@evilmartians/lefthook": "^1.8.2",
     "@react-native-community/eslint-config": "^3.0.2",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",

diff --git a/src/hooks/useAnimationEnd.ts b/src/hooks/useAnimationEnd.ts
@@ -66,7 +66,7 @@ export const useAnimationEnd = (
         }
       }
     },
-    [onResetAnimationEnd, endValues.value]
+    [onResetAnimationEnd, endValues]
   );
 
   return { onAnimationEnd };

diff --git a/src/hooks/useGestures.ts b/src/hooks/useGestures.ts
@@ -403,15 +403,18 @@ export const useGestures = ({
       runOnJS(onSingleTap)(event);
     });
 
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [
-      { translateX: translate.x.value },
-      { translateY: translate.y.value },
-      { translateX: focal.x.value },
-      { translateY: focal.y.value },
-      { scale: scale.value },
-    ],
-  }));
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      transform: [
+        { translateX: translate.x.value },
+        { translateY: translate.y.value },
+        { translateX: focal.x.value },
+        { translateY: focal.y.value },
+        { scale: scale.value },
+      ],
+    }),
+    [translate.x, translate.y, focal.x, focal.y, scale]
+  );
 
   const pinchPanGestures = Gesture.Simultaneous(
     pinchGesture,

diff --git a/yarn.lock b/yarn.lock
-Original file line number
+Diff line change
@@ Expand Up / @@ -66,7 +66,7 @@ export const useAnimationEnd = ( @@
             }
           }
         },
-        [onResetAnimationEnd, endValues.value]
+        [onResetAnimationEnd, endValues]
       );
       return { onAnimationEnd };
@@ Expand Down @@