feat: add new arch/Expo 54 support

.nvmrc

@@ -1 +1 @@
-20.11.1
+22.12.0

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ['module:@react-native/babel-preset'],
 };

docs/docs/01-getting-started.mdx

@@ -10,18 +10,23 @@ import TabItem from '@theme/TabItem';
 
 What follows within the Fundamentals section of this documentation is a tour of the most important aspects of React Native Header. It should cover enough for you to know how to begin building.
 
+## New Architecture
+
+React Native Header supports the [New Architecture](https://reactnative.dev/architecture/landing-page) beginning from version `1.0.0`. The legacy architecture will not be supported in the future as it has been deprecated by React Native.
+
 ## Compatibility
 
 Before using this package, please make sure that you install the correct version of this library for your project. Here is the dependency matrix:
 
 <br />
 
-| react-native-header | react-native | react-native-reanimated | react-native-safe-area-context | @shopify/flash-list |
-| ------------------- | ------------ | ----------------------- | ------------------------------ | ------------------- |
-| 0.6.x               | >= 0.65      | >= 2.11.0               | >= 4.1.0                       | N/A                 |
-| 0.7.x               | >= 0.65      | >= 2.0.0                | >= 4.1.0                       | N/A                 |
-| 0.8.x               | >= 0.65      | >= 2.0.0                | >= 4.1.0                       | N/A                 |
-| >= 0.9.x            | >= 0.65      | >= 2.0.0                | >= 4.1.0                       | >= 3.2.0            |
+| react-native-header | react-native | react-native-reanimated | react-native-safe-area-context | @shopify/flash-list | react-native-worklets |
+| ------------------- | ------------ | ----------------------- | ------------------------------ | ------------------- | --------------------- |
+| 0.6.x               | >= 0.65      | >= 2.11.0               | >= 4.1.0                       | N/A                 | N/A                   |
+| 0.7.x               | >= 0.65      | >= 2.0.0                | >= 4.1.0                       | N/A                 | N/A                   |
+| 0.8.x               | >= 0.65      | >= 2.0.0                | >= 4.1.0                       | N/A                 | N/A                   |
+| >= 0.9.x            | >= 0.65      | >= 2.0.0                | >= 4.1.0                       | >= 3.2.0            | N/A                   |
+| >= 1.0.0            | >= 0.81      | >= 4.0.0                | >= 4.1.0                       | >= 3.2.0            | ^0.5.1                |
 
 ## Pre-requisites
 

example/android/app/build.gradle

@@ -9,63 +9,64 @@ def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
  * By default you don't need to apply any configuration, just uncomment the lines you need.
  */
 react {
-  entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
-  reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
-  hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
-  codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
-
-  // Use Expo CLI to bundle the app, this ensures the Metro config
-  // works correctly with Expo projects.
-  cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
-  bundleCommand = "export:embed"
-
-  /* Folders */
-  //   The root of your project, i.e. where "package.json" lives. Default is '../..'
-  // root = file("../../")
-  //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
-  // reactNativeDir = file("../../node_modules/react-native")
-  //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
-  // codegenDir = file("../../node_modules/@react-native/codegen")
-
-  /* Variants */
-  //   The list of variants to that are debuggable. For those we're going to
-  //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
-  //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
-  // debuggableVariants = ["liteDebug", "prodDebug"]
-
-  /* Bundling */
-  //   A list containing the node command and its flags. Default is just 'node'.
-  // nodeExecutableAndArgs = ["node"]
-
-  //
-  //   The path to the CLI configuration file. Default is empty.
-  // bundleConfig = file(../rn-cli.config.js)
-  //
-  //   The name of the generated asset file containing your JS bundle
-  // bundleAssetName = "MyApplication.android.bundle"
-  //
-  //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
-  // entryFile = file("../js/MyApplication.android.js")
-  //
-  //   A list of extra flags to pass to the 'bundle' commands.
-  //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
-  // extraPackagerArgs = []
-
-  /* Hermes Commands */
-  //   The hermes compiler command to run. By default it is 'hermesc'
-  // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
-  //
-  //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
-  // hermesFlags = ["-O", "-output-source-map"]
-
-  /* Autolinking */
-  autolinkLibrariesWithApp()
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
+    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
+    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+
+    enableBundleCompression = (findProperty('android.enableBundleCompression') ?: false).toBoolean()
+    // Use Expo CLI to bundle the app, this ensures the Metro config
+    // works correctly with Expo projects.
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
+    bundleCommand = "export:embed"
+
+    /* Folders */
+     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
 }
 
 /**
- * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ * Set this to true in release builds to optimize the app using [R8](https://developer.android.com/topic/performance/app-optimization/enable-app-optimization).
  */
-def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()
+def enableMinifyInReleaseBuilds = (findProperty('android.enableMinifyInReleaseBuilds') ?: false).toBoolean()
 
 /**
  * The preferred build flavor of JavaScriptCore (JSC)
@@ -78,99 +79,104 @@ def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInRelea
  * give correct results when using with locales other than en-US. Note that
  * this variant is about 6MiB larger per architecture than default.
  */
-def jscFlavor = 'org.webkit:android-jsc:+'
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
 
 android {
-  ndkVersion rootProject.ext.ndkVersion
-
-  buildToolsVersion rootProject.ext.buildToolsVersion
-  compileSdk rootProject.ext.compileSdkVersion
-
-  namespace "com.rnh.example"
-  defaultConfig {
-    applicationId "com.rnh.example"
-    minSdkVersion rootProject.ext.minSdkVersion
-    targetSdkVersion rootProject.ext.targetSdkVersion
-    versionCode 1
-    versionName "1.0"
-  }
-  signingConfigs {
-    debug {
-      storeFile file('debug.keystore')
-      storePassword 'android'
-      keyAlias 'androiddebugkey'
-      keyPassword 'android'
+    ndkVersion rootProject.ext.ndkVersion
+
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace 'com.anonymous.example'
+    defaultConfig {
+        applicationId 'com.anonymous.example'
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0.0"
+
+        buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
     }
-  }
-  buildTypes {
-    debug {
-      signingConfig signingConfigs.debug
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
     }
-    release {
-      // Caution! In production, you need to generate your own keystore file.
-      // see https://reactnative.dev/docs/signed-apk-android.
-      signingConfig signingConfigs.debug
-      shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
-      minifyEnabled enableProguardInReleaseBuilds
-      proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-      crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            def enableShrinkResources = findProperty('android.enableShrinkResourcesInReleaseBuilds') ?: 'false'
+            shrinkResources enableShrinkResources.toBoolean()
+            minifyEnabled enableMinifyInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            def enablePngCrunchInRelease = findProperty('android.enablePngCrunchInReleaseBuilds') ?: 'true'
+            crunchPngs enablePngCrunchInRelease.toBoolean()
+        }
     }
-  }
-  packagingOptions {
-    jniLibs {
-      useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
+    packagingOptions {
+        jniLibs {
+            def enableLegacyPackaging = findProperty('expo.useLegacyPackaging') ?: 'false'
+            useLegacyPackaging enableLegacyPackaging.toBoolean()
+        }
+    }
+    androidResources {
+        ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
     }
-  }
-  androidResources {
-    ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
-  }
 }
 
 // Apply static values from `gradle.properties` to the `android.packagingOptions`
 // Accepts values in comma delimited lists, example:
 // android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
 ["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
-  // Split option: 'foo,bar' -> ['foo', 'bar']
-  def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
-  // Trim all elements in place.
-  for (i in 0..<options.size()) options[i] = options[i].trim();
-  // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
-  options -= ""
-
-  if (options.length > 0) {
-    println "android.packagingOptions.$prop += $options ($options.length)"
-    // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
-    options.each {
-      android.packagingOptions[prop] += it
+    // Split option: 'foo,bar' -> ['foo', 'bar']
+    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
+    // Trim all elements in place.
+    for (i in 0..<options.size()) options[i] = options[i].trim();
+    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
+    options -= ""
+
+    if (options.length > 0) {
+        println "android.packagingOptions.$prop += $options ($options.length)"
+        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
+        options.each {
+            android.packagingOptions[prop] += it
+        }
     }
-  }
 }
 
 dependencies {
-  // The version of react-native is set by the React Native Gradle Plugin
-  implementation("com.facebook.react:react-android")
-
-  def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
-  def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
-  def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
-
-  if (isGifEnabled) {
-    // For animated gif support
-    implementation("com.facebook.fresco:animated-gif:${reactAndroidLibs.versions.fresco.get()}")
-  }
-
-  if (isWebpEnabled) {
-    // For webp support
-    implementation("com.facebook.fresco:webpsupport:${reactAndroidLibs.versions.fresco.get()}")
-    if (isWebpAnimatedEnabled) {
-      // Animated webp support
-      implementation("com.facebook.fresco:animated-webp:${reactAndroidLibs.versions.fresco.get()}")
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
+    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
+    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
+
+    if (isGifEnabled) {
+        // For animated gif support
+        implementation("com.facebook.fresco:animated-gif:${expoLibs.versions.fresco.get()}")
+    }
+
+    if (isWebpEnabled) {
+        // For webp support
+        implementation("com.facebook.fresco:webpsupport:${expoLibs.versions.fresco.get()}")
+        if (isWebpAnimatedEnabled) {
+            // Animated webp support
+            implementation("com.facebook.fresco:animated-webp:${expoLibs.versions.fresco.get()}")
+        }
     }
-  }
 
-  if (hermesEnabled.toBoolean()) {
-    implementation("com.facebook.react:hermes-android")
-  } else {
-    implementation jscFlavor
-  }
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
 }

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

@@ -3,5 +3,5 @@
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
 </manifest>

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

@@ -11,12 +11,10 @@
       <data android:scheme="https"/>
     </intent>
   </queries>
-  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme" android:supportsRtl="true">
-    <meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
-    <meta-data android:name="expo.modules.updates.EXPO_SDK_VERSION" android:value="48.0.0"/>
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:enableOnBackInvokedCallback="false">
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
-    <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://exp.host/@anonymous/example"/>
     <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true">
       <intent-filter>
         <action android:name="android.intent.action.MAIN"/>
@@ -26,7 +24,6 @@
         <action android:name="android.intent.action.VIEW"/>
         <category android:name="android.intent.category.DEFAULT"/>
         <category android:name="android.intent.category.BROWSABLE"/>
-        <data android:scheme="com.rnh.example"/>
         <data android:scheme="exp+example"/>
       </intent-filter>
     </activity>