Expo SDK 52 compatibility | Upgrade reanimated 3xx

.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

Example/App.tsx

@@ -1,4 +1,5 @@
 import { StatusBar } from "expo-status-bar";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 
 import useCachedResources from "./hooks/useCachedResources";
@@ -13,10 +14,12 @@ export default function App() {
     return null;
   } else {
     return (
-      <SafeAreaProvider>
-        <Navigation colorScheme={colorScheme} />
-        <StatusBar />
-      </SafeAreaProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <SafeAreaProvider>
+          <Navigation colorScheme={colorScheme} />
+          <StatusBar />
+        </SafeAreaProvider>
+      </GestureHandlerRootView>
     );
   }
 }

Example/app.json

@@ -15,7 +15,10 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*",
+      "node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/*"
+    ],
     "ios": {
       "supportsTablet": true
     },
@@ -27,6 +30,10 @@
     },
     "web": {
       "favicon": "./assets/images/favicon.png"
-    }
+    },
+    "plugins": [
+      "expo-asset",
+      "expo-font"
+    ]
   }
 }

Example/hooks/useCachedResources.ts

@@ -1,32 +1,23 @@
-import { FontAwesome } from "@expo/vector-icons";
-import * as Font from "expo-font";
 import * as SplashScreen from "expo-splash-screen";
 import { useEffect, useState } from "react";
 
 export default function useCachedResources() {
   const [isLoadingComplete, setLoadingComplete] = useState(false);
 
-  // Load any resources or data that we need prior to rendering the app
   useEffect(() => {
-    async function loadResourcesAndDataAsync() {
+    async function prepare() {
       try {
-        SplashScreen.preventAutoHideAsync();
-
-        // Load fonts
-        await Font.loadAsync({
-          ...FontAwesome.font,
-          "space-mono": require("../assets/fonts/SpaceMono-Regular.ttf"),
-        });
+        // Keep the splash screen visible while we fetch resources
+        await SplashScreen.preventAutoHideAsync();
       } catch (e) {
-        // We might want to provide this error information to an error reporting service
         console.warn(e);
       } finally {
         setLoadingComplete(true);
-        SplashScreen.hideAsync();
+        await SplashScreen.hideAsync();
       }
     }
 
-    loadResourcesAndDataAsync();
+    prepare();
   }, []);
 
   return isLoadingComplete;

Example/metro.config.js

@@ -5,27 +5,56 @@
  * @format
  */
 const path = require("path");
+const { getDefaultConfig } = require('expo/metro-config');
+
 const extraNodeModules = {
-  "react-native-draggable-flatlist": path.resolve(__dirname + "/../src"),
+  "react-native-draggable-flatlist": path.resolve(__dirname + "/../lib/commonjs"),
 };
-const watchFolders = [path.resolve(__dirname + "/../src")];
+const watchFolders = [
+  path.resolve(__dirname + "/../lib/commonjs"),
+  path.resolve(__dirname + "/../src"),
+];
+
+// Get the default Expo config for SDK 52
+const config = getDefaultConfig(__dirname, {
+  // Enable CSS support
+  isCSSEnabled: true,
+});
+
+// Merge the default config with our custom config
 module.exports = {
+  ...config,
   transformer: {
+    ...config.transformer,
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
         inlineRequires: false,
       },
     }),
+    babelTransformerPath: require.resolve("react-native-svg-transformer"),
   },
   resolver: {
+    ...config.resolver,
     extraNodeModules: new Proxy(extraNodeModules, {
       get: (target, name) =>
         //redirects dependencies referenced from target/ to local node_modules
         name in target
           ? target[name]
           : path.join(process.cwd(), `node_modules/${name}`),
     }),
+    assetExts: [
+      ...config.resolver.assetExts,
+      'ttf',
+      'otf',
+      // Add other asset extensions if needed
+      'png',
+      'jpg',
+      'jpeg',
+      'gif',
+      'webp',
+    ],
+    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'svg'],
   },
   watchFolders,
 };

Example/navigation/LinkingConfiguration.ts

@@ -10,21 +10,31 @@ import * as Linking from "expo-linking";
 import { RootStackParamList } from "../types";
 
 const linking: LinkingOptions<RootStackParamList> = {
-  prefixes: [Linking.makeUrl("/")],
+  prefixes: [Linking.createURL("/")],
   config: {
     screens: {
       Root: {
         screens: {
-          TabOne: {
+          Basic: {
             screens: {
               Basic: "basic",
             },
           },
-          TabTwo: {
+          Swipeable: {
             screens: {
               Swipeable: "swipeable",
             },
           },
+          Nested: {
+            screens: {
+              Nested: "nested",
+            },
+          },
+          Horizontal: {
+            screens: {
+              Horizontal: "horizontal",
+            },
+          },
         },
       },
       NotFound: "*",

Example/navigation/index.tsx

@@ -9,6 +9,7 @@ import {
   NavigationContainer,
   DefaultTheme,
   DarkTheme,
+  useNavigation,
 } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import * as React from "react";
@@ -51,12 +52,21 @@ const Stack = createNativeStackNavigator<RootStackParamList>();
 
 function RootNavigator() {
   return (
-    <Stack.Navigator>
+    <Stack.Navigator
+      screenOptions={{
+        headerBackTitleVisible: false,
+      }}
+    >
       <Stack.Screen
         name="Root"
         component={BottomTabNavigator}
         options={{ headerShown: false }}
       />
+      <Stack.Screen
+        name="NotFound"
+        component={NotFoundScreen}
+        options={{ title: "Oops!" }}
+      />
     </Stack.Navigator>
   );
 }