feat: New architecture support (#4574)

* feat: update deps & enable new arch

* chore: migrate Menu to functional component

* fix: get rid of a few rerenders of Menu

* fix: fix Modal flickering & cleanup

* fix: dynamic update of Button styles

* chore: update yarn

* fix: fix scrolling on ExampleList screen (web)

* fix: update runtimeVersion

* fix: workaround for fixing textinput styling

* chore: circleCI config update

* chore: Update AnimatedText's props type

Co-authored-by: Satyajit Sahoo <[email protected]>

* fix: get rid of setting yarn version from circleCI config

* fix: setting top offset of Menu based on anchorPosition

---------

Co-authored-by: Satyajit Sahoo <[email protected]>

Author: BogiKay

.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",

docs/yarn.lock

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

example/.gitignore

@@ -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/build.gradle

@@ -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/AndroidManifest.xml

@@ -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();