fix(crash): fix issue with expo sdk 52 causing crash

Author: EQuimper

example/app.json

@@ -6,14 +6,13 @@
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
+    "newArchEnabled": true,
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },

example/package.json

@@ -10,18 +10,18 @@
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "^4.6.3",
-    "expo": "~50.0.17",
-    "expo-status-bar": "~1.11.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.73.6",
-    "react-native-gesture-handler": "~2.14.0",
-    "react-native-reanimated": "~3.6.2",
-    "react-native-safe-area-context": "4.8.2",
-    "react-native-web": "~0.19.6"
+    "expo": "~52.0.38",
+    "expo-status-bar": "~2.0.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.7",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-web": "~0.19.13"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.25.2",
     "@expo/webpack-config": "^18.0.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-module-resolver": "^5.0.0"

example/src/third-party/gorhom-bottom-sheet/index.tsx

@@ -58,6 +58,7 @@ const Example = () => {
           >
             <MagicScroll.TextInput
               name="username"
+              chainTo="first_name"
               textInputProps={{
                 placeholder: 'Username',
                 style: {
@@ -70,6 +71,7 @@ const Example = () => {
             />
             <MagicScroll.TextInput
               name="first_name"
+              chainTo="last_name"
               containerStyle={{ marginTop: 8 }}
               textInputProps={{
                 placeholder: 'First Name',
@@ -83,6 +85,7 @@ const Example = () => {
             />
             <MagicScroll.TextInput
               name="last_name"
+              chainTo="email"
               containerStyle={{ marginTop: 8 }}
               textInputProps={{
                 placeholder: 'Last Name',
@@ -96,6 +99,7 @@ const Example = () => {
             />
             <MagicScroll.TextInput
               name="email"
+              chainTo="password"
               containerStyle={{ marginTop: 8 }}
               textInputProps={{
                 placeholder: 'Email',

package.json

@@ -67,12 +67,12 @@
     "eslint-plugin-prettier": "^5.0.1",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
-    "react": "18.2.0",
-    "react-native": "0.73.6",
-    "react-native-builder-bob": "^0.23.2",
-    "react-native-reanimated": "^3.11.0",
+    "react": "18.3.1",
+    "react-native": "0.76.7",
+    "react-native-builder-bob": "^0.37.0",
+    "react-native-reanimated": "^3.16.1",
     "react-native-safe-area-context": "^4.10.5",
-    "release-it": "^15.0.0",
+    "release-it": "^17.0.0",
     "typescript": "^5.2.2"
   },
   "resolutions": {
@@ -163,6 +163,6 @@
     ]
   },
   "dependencies": {
-    "jotai": "^2.8.0"
+    "jotai": "^2.12.2"
   }
 }

src/Provider.tsx

@@ -7,10 +7,9 @@ import React, {
   type RefObject,
 } from 'react';
 import Animated, {
-  scrollTo,
   useAnimatedRef,
+  useAnimatedScrollHandler,
   useAnimatedStyle,
-  useDerivedValue,
   useSharedValue,
   withTiming,
   type AnimatedScrollViewProps,
@@ -85,15 +84,15 @@ function InsideScrollView(
     additionalPadding?: number;
   }>
 ) {
-  const { scrollRef, baseScrollViewProps, translateStyle } = useFormSmartScroll(
-    { padding: props?.additionalPadding }
-  );
+  const { scrollRef, baseScrollViewProps, translateStyle, scrollHandler } =
+    useFormSmartScroll({ padding: props?.additionalPadding });
 
   return (
     <Animated.ScrollView
       ref={scrollRef}
       {...baseScrollViewProps}
       {...props.scrollViewProps}
+      onScroll={scrollHandler}
     >
       <Animated.View style={translateStyle}>{props.children}</Animated.View>
     </Animated.ScrollView>
@@ -136,6 +135,11 @@ export function useFormSmartScroll({
 
   const currentFocus = useAtomValue(currentFocusAtom);
 
+  const scrollHandler = useAnimatedScrollHandler((event) => {
+    console.log('event', event.contentOffset.y);
+    scrollY.value = event.contentOffset.y;
+  });
+
   // we have a flick on first focus so we make the scrollview wait a bit before animate
   useLayoutEffect(() => {
     if (currentFocus && !isReady) {
@@ -218,10 +222,6 @@ export function useFormSmartScroll({
     [inputs]
   );
 
-  useDerivedValue(() => {
-    scrollTo(scrollRef, 0, scrollY.value, false);
-  });
-
   const onFocus = useCallback(
     (name: string) => () => {
       setState((s) => ({
@@ -300,5 +300,6 @@ export function useFormSmartScroll({
     baseTextInputProps,
     currentFocus: currentFocus?.name,
     isReady,
+    scrollHandler,
   };
 }