feat: New architecture support

.circleci/config.yml

@@ -29,9 +29,10 @@ jobs:
       - run:
           name: Install dependencies
           command: |
-            yarn install --cwd example --frozen-lockfile
-            yarn install --cwd docs --frozen-lockfile
-            yarn install --frozen-lockfile
+            sudo corepack enable
+            yarn --cwd example --immutable
+            yarn --cwd docs --immutable
+            yarn --immutable
       - save_cache:
           key: dependencies-{{ checksum "package.json" }}
           paths:

.gitignore

@@ -64,3 +64,6 @@ CHANGELOG.md
 lib/
 
 .expo
+
+# Yarn
+.yarn/*

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

docs/.gitignore

@@ -25,3 +25,6 @@ docs/components
 # legacy
 dist/
 .linaria-cache/
+
+# Yarn
+.yarn/*

docs/package.json

@@ -17,9 +17,9 @@
   },
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.9",
-    "@docusaurus/core": "^2.3.1",
-    "@docusaurus/preset-classic": "^2.3.1",
-    "@docusaurus/remark-plugin-npm2yarn": "^2.3.1",
+    "@docusaurus/core": "^2.3.6",
+    "@docusaurus/preset-classic": "^2.3.6",
+    "@docusaurus/remark-plugin-npm2yarn": "^2.3.6",
     "@easyops-cn/docusaurus-search-local": "^0.33.4",
     "@material/material-color-utilities": "0.2.4",
     "@mdx-js/react": "^1.6.22",
@@ -37,7 +37,7 @@
     "use-latest-callback": "^0.1.7"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.3.1",
+    "@docusaurus/module-type-aliases": "^2.3.6",
     "@tsconfig/docusaurus": "^1.0.6",
     "@types/marked": "^4.0.7",
     "@types/react-color": "^3.0.6",
@@ -58,7 +58,7 @@
     ]
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=18"
   },
   "resolutions": {
     "@types/react": "18.0.8",

example/.gitignore

@@ -1,4 +1,12 @@
 # XDE
 #
 .expo/
-/coverage
+/coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

example/android/app/build.gradle

@@ -66,6 +66,8 @@ react {
     //
     //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
     // hermesFlags = ["-O", "-output-source-map"]
+
+    autolinkLibrariesWithApp()
 }
 
 // Override `hermesEnabled` by `expo.jsEngine`
@@ -221,9 +223,6 @@ dependencies {
     }
 
     implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
-
-    implementation("com.facebook.react:flipper-integration")
-
 
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")
@@ -232,5 +231,4 @@ dependencies {
     }
 }
 
-apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json')"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
 applyNativeModulesAppBuildGradle(project)

example/android/app/src/main/AndroidManifest.xml

@@ -20,6 +20,7 @@
     android:allowBackup="true"
     android:theme="@style/AppTheme"
     android:usesCleartextTraffic="true"
+    android:supportsRtl="true"
   >
 
     <meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>

example/android/app/src/main/java/com/callstack/reactnativepaperexample/MainApplication.java

@@ -10,7 +10,7 @@
 import com.facebook.react.ReactPackage;
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
 import com.facebook.react.defaults.DefaultReactNativeHost;
-import com.facebook.react.flipper.ReactNativeFlipper;
+import com.facebook.react.soloader.OpenSourceMergedSoMapping;
 import com.facebook.soloader.SoLoader;
 
 import expo.modules.ApplicationLifecycleDispatcher;
@@ -60,7 +60,7 @@ public ReactNativeHost getReactNativeHost() {
   @Override
   public void onCreate() {
     super.onCreate();
-    SoLoader.init(this, /* native exopackage */ false);
+    SoLoader.init(this, OpenSourceMergedSoMapping)
     if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
       // If you opted-in for the New Architecture, we load the native entry point for this app.
       DefaultNewArchitectureEntryPoint.load();

example/android/build.gradle

@@ -2,16 +2,16 @@
 
 buildscript {
     ext {
-        buildToolsVersion = findProperty('android.buildToolsVersion') ?: '34.0.0'
-        minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '21')
-        compileSdkVersion = Integer.parseInt(findProperty('android.compileSdkVersion') ?: '34')
+        buildToolsVersion = findProperty('android.buildToolsVersion') ?: '35.0.0'
+        minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '24')
+        compileSdkVersion = Integer.parseInt(findProperty('android.compileSdkVersion') ?: '35')
         targetSdkVersion = Integer.parseInt(findProperty('android.targetSdkVersion') ?: '34')
         kotlinVersion = findProperty('android.kotlinVersion') ?: '1.8.0'
 
         frescoVersion = findProperty('expo.frescoVersion') ?: '2.5.0'
 
         // We use NDK 25 which has both M1 support and is the side-by-side NDK version from AGP.
-        ndkVersion = "25.1.8937393"
+        ndkVersion = "26.1.10909125"
     }
     repositories {
         google()

example/android/gradle.properties

@@ -35,7 +35,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
-newArchEnabled=false
+newArchEnabled=true
 
 # The hosted JavaScript engine
 # Supported values: expo.jsEngine = "hermes" | "jsc"

example/app.json

@@ -9,6 +9,7 @@
     "primaryColor": "#6200EE",
     "userInterfaceStyle": "automatic",
     "icon": "./assets/images/paper-icon.png",
+    "newArchEnabled": true,
     "packagerOpts": {
       "config": "./metro.config.js",
       "projectRoots": ""
@@ -39,9 +40,7 @@
         "projectId": "ba8f5139-58fe-48f0-b2f2-2d675b6eb2d4"
       }
     },
-    "runtimeVersion": {
-      "policy": "sdkVersion"
-    },
+    "runtimeVersion": "exposdk:52.0.0",
     "updates": {
       "url": "https://u.expo.dev/ba8f5139-58fe-48f0-b2f2-2d675b6eb2d4"
     },

example/package.json

@@ -17,36 +17,36 @@
     "@expo/vector-icons": "^14.0.0",
     "@expo/webpack-config": "~19.0.1",
     "@pchmn/expo-material3-theme": "^1.3.2",
-    "@react-native-async-storage/async-storage": "1.21.0",
-    "@react-native-masked-view/masked-view": "0.3.0",
-    "@react-navigation/bottom-tabs": "^6.5.3",
-    "@react-navigation/drawer": "^6.5.7",
-    "@react-navigation/native": "^6.1.2",
-    "@react-navigation/stack": "^6.3.11",
-    "expo": "~50.0.20",
-    "expo-crypto": "~12.8.1",
-    "expo-dev-client": "~3.3.12",
-    "expo-font": "~11.10.3",
-    "expo-keep-awake": "~12.8.2",
-    "expo-splash-screen": "~0.26.5",
-    "expo-status-bar": "~1.11.1",
-    "expo-updates": "~0.24.13",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-masked-view/masked-view": "0.3.2",
+    "@react-navigation/bottom-tabs": "^6.6.1",
+    "@react-navigation/drawer": "^6.7.2",
+    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/stack": "^6.4.1",
+    "expo": "^52.0.0",
+    "expo-crypto": "~14.0.1",
+    "expo-dev-client": "~5.0.4",
+    "expo-font": "~13.0.1",
+    "expo-keep-awake": "~14.0.1",
+    "expo-splash-screen": "~0.29.13",
+    "expo-status-bar": "~2.0.0",
+    "expo-updates": "~0.26.9",
     "file-loader": "^6.2.0",
-    "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-screens": "~3.29.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.1.0",
     "react-native-vector-icons": "^10.1.0",
-    "react-native-web": "~0.19.6",
+    "react-native-web": "~0.19.13",
     "typeface-roboto": "^1.1.13"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
+    "@babel/core": "^7.25.2",
     "babel-plugin-module-resolver": "^5.0.0",
-    "babel-preset-expo": "^10.0.0",
+    "babel-preset-expo": "~12.0.0",
     "url-loader": "^4.1.1"
   },
   "engines": {

example/src/Examples/MenuExample.tsx

@@ -146,6 +146,22 @@ const MenuExample = ({ navigation }: Props) => {
             </TouchableRipple>
           </List.Section>
         </View>
+        <View style={styles.alignCenter}>
+          <Menu
+            visible={_getVisible('menu5')}
+            onDismiss={_toggleMenu('menu5')}
+            anchorPosition="bottom"
+            anchor={
+              <Button mode="outlined" onPress={_toggleMenu('menu5')}>
+                Menu with anchor position
+              </Button>
+            }
+          >
+            <Menu.Item onPress={() => {}} title="Item 1" />
+            <Menu.Item onPress={() => {}} title="Item 2" />
+            <Menu.Item onPress={() => {}} title="Item 3" />
+          </Menu>
+        </View>
 
         <View style={styles.bottomMenu}>
           <Menu

example/src/RootNavigator.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import type { DrawerNavigationProp } from '@react-navigation/drawer';
 import { getHeaderTitle } from '@react-navigation/elements';
@@ -19,55 +19,68 @@ export default function Root() {
       ? CardStyleInterpolators.forFadeFromBottomAndroid
       : CardStyleInterpolators.forHorizontalIOS;
   return (
-    <Stack.Navigator
-      screenOptions={({ navigation }) => {
-        return {
-          detachPreviousScreen: !navigation.isFocused(),
-          cardStyleInterpolator,
-          header: ({ navigation, route, options, back }) => {
-            const title = getHeaderTitle(options, route.name);
-            return (
-              <Appbar.Header elevated>
-                {back ? (
-                  <Appbar.BackAction onPress={() => navigation.goBack()} />
-                ) : (navigation as any).openDrawer ? (
-                  <Appbar.Action
-                    icon="menu"
-                    isLeading
-                    onPress={() =>
-                      (
-                        navigation as any as DrawerNavigationProp<{}>
-                      ).openDrawer()
-                    }
-                  />
-                ) : null}
-                <Appbar.Content title={title} />
-              </Appbar.Header>
-            );
-          },
-        };
-      }}
-    >
-      <Stack.Screen
-        name="ExampleList"
-        component={ExampleList}
-        options={{
-          title: 'Examples',
+    <View style={styles.stackWrapper}>
+      <Stack.Navigator
+        screenOptions={({ navigation }) => {
+          return {
+            detachPreviousScreen: !navigation.isFocused(),
+            cardStyleInterpolator,
+            header: ({ navigation, route, options, back }) => {
+              const title = getHeaderTitle(options, route.name);
+              return (
+                <Appbar.Header elevated>
+                  {back ? (
+                    <Appbar.BackAction onPress={() => navigation.goBack()} />
+                  ) : (navigation as any).openDrawer ? (
+                    <Appbar.Action
+                      icon="menu"
+                      isLeading
+                      onPress={() =>
+                        (
+                          navigation as any as DrawerNavigationProp<{}>
+                        ).openDrawer()
+                      }
+                    />
+                  ) : null}
+                  <Appbar.Content title={title} />
+                </Appbar.Header>
+              );
+            },
+          };
         }}
-      />
-      {(Object.keys(examples) as Array<keyof typeof examples>).map((id) => {
-        return (
-          <Stack.Screen
-            key={id}
-            name={id}
-            component={examples[id]}
-            options={{
-              title: examples[id].title,
-              headerShown: id !== 'themingWithReactNavigation',
-            }}
-          />
-        );
-      })}
-    </Stack.Navigator>
+      >
+        <Stack.Screen
+          name="ExampleList"
+          component={ExampleList}
+          options={{
+            title: 'Examples',
+          }}
+        />
+        {(Object.keys(examples) as Array<keyof typeof examples>).map((id) => {
+          return (
+            <Stack.Screen
+              key={id}
+              name={id}
+              component={examples[id]}
+              options={{
+                title: examples[id].title,
+                headerShown: id !== 'themingWithReactNavigation',
+              }}
+            />
+          );
+        })}
+      </Stack.Navigator>
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  stackWrapper: {
+    flex: 1,
+    ...Platform.select({
+      web: {
+        overflow: 'scroll',
+      },
+    }),
+  },
+});