Upgrade to RN 0.71.3

.github/workflows/cd_android.yml

@@ -29,6 +29,11 @@ jobs:
           path: ~/.gradle/wrapper
           key: ${{ runner.os }}-gradle-wrapper-${{ hashFiles('gradle/wrapper/gradle-wrapper.properties') }}
 
+      # https://github.com/zoontek/react-native-permissions/issues/759
+      - name: Workaround to remove old RN permissions
+        run: |
+          rm -r node_modules/comms-app-react-native-videocall/node_modules/react-native-qrcode-scanner/node_modules/react-native-permissions
+
       - name: Install the signing certificate
         env:
           DISTRIBUTION_CERTIFICATE_ANDROID_BASE64: ${{ secrets.RELEASE_KEYSTORE_BASE64 }}

.github/workflows/cd_ios.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - upgrade/rn-0-71-3
     tags:
       - '*'
 
@@ -59,6 +60,11 @@ jobs:
       - name: Install modules
         run: yarn install
 
+      # https://github.com/zoontek/react-native-permissions/issues/759
+      - name: Workaround to remove old RN permissions
+        run: |
+          rm -r node_modules/comms-app-react-native-videocall/node_modules/react-native-qrcode-scanner/node_modules/react-native-permissions
+
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1.126.0
         with:
@@ -105,6 +111,11 @@ jobs:
       - name: Install modules
         run: yarn install
 
+      # https://github.com/zoontek/react-native-permissions/issues/759
+      - name: Workaround to remove old RN permissions
+        run: |
+          rm -r node_modules/comms-app-react-native-videocall/node_modules/react-native-qrcode-scanner/node_modules/react-native-permissions
+
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1.126.0
         with:

.node-version

@@ -0,0 +1 @@
+18

examples/mobile/android/app/build.gradle

@@ -1,133 +1,93 @@
 plugins {
   id 'com.android.application'
+  id "com.facebook.react"
   id 'com.google.firebase.appdistribution'
   id "com.github.triplet.play"
 }
 
 import com.android.build.OutputFile
 
 /**
- * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
- * and bundleReleaseJsAndAssets).
- * These basically call `react-native bundle` with the correct arguments during the Android build
- * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
- * bundle directly from the development server. Below you can see all the possible configurations
- * and their defaults. If you decide to add a configuration block, make sure to add it before the
- * `apply from: "../../node_modules/react-native/react.gradle"` line.
- *
- * project.ext.react = [
- *   // the name of the generated asset file containing your JS bundle
- *   bundleAssetName: "index.android.bundle",
- *
- *   // the entry file for bundle generation. If none specified and
- *   // "index.android.js" exists, it will be used. Otherwise "index.js" is
- *   // default. Can be overridden with ENTRY_FILE environment variable.
- *   entryFile: "index.android.js",
- *
- *   // https://reactnative.dev/docs/performance#enable-the-ram-format
- *   bundleCommand: "ram-bundle",
- *
- *   // whether to bundle JS and assets in debug mode
- *   bundleInDebug: false,
- *
- *   // whether to bundle JS and assets in release mode
- *   bundleInRelease: true,
- *
- *   // whether to bundle JS and assets in another build variant (if configured).
- *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
- *   // The configuration property can be in the following formats
- *   //         'bundleIn${productFlavor}${buildType}'
- *   //         'bundleIn${buildType}'
- *   // bundleInFreeDebug: true,
- *   // bundleInPaidRelease: true,
- *   // bundleInBeta: true,
- *
- *   // whether to disable dev mode in custom build variants (by default only disabled in release)
- *   // for example: to disable dev mode in the staging build type (if configured)
- *   devDisabledInStaging: true,
- *   // The configuration property can be in the following formats
- *   //         'devDisabledIn${productFlavor}${buildType}'
- *   //         'devDisabledIn${buildType}'
- *
- *   // the root of your project, i.e. where "package.json" lives
- *   root: "../../",
- *
- *   // where to put the JS bundle asset in debug mode
- *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
- *
- *   // where to put the JS bundle asset in release mode
- *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
- *
- *   // where to put drawable resources / React Native assets, e.g. the ones you use via
- *   // require('./image.png')), in debug mode
- *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
- *
- *   // where to put drawable resources / React Native assets, e.g. the ones you use via
- *   // require('./image.png')), in release mode
- *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
- *
- *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
- *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
- *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
- *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
- *   // for example, you might want to remove it from here.
- *   inputExcludes: ["android/**", "ios/**"],
- *
- *   // override which node gets called and with what additional arguments
- *   nodeExecutableAndArgs: ["node"],
- *
- *   // supply additional arguments to the packager
- *   extraPackagerArgs: []
- * ]
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
  */
-
-project.ext.react = [
-    enableHermes: true,  // clean and rebuild if changing
-]
-
-apply from: "../../node_modules/react-native/react.gradle"
+react {
+  /* 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")
+  //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
+  // cliFile = file("../node_modules/react-native/cli.js")
+  /* 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 command to run when bundling. By default is 'bundle'
+  // bundleCommand = "ram-bundle"
+  //
+  //   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"]
+}
 
 /**
- * Set this to true to create two separate APKs instead of one:
- *   - An APK that only works on ARM devices
- *   - An APK that only works on x86 devices
- * The advantage is the size of the APK is reduced by about 4MB.
- * Upload all the APKs to the Play Store and people will download
- * the correct one based on the CPU architecture of their device.
+ * Set this to true to create four separate APKs instead of one,
+ * one for each native architecture. This is useful if you don't
+ * use App Bundles (https://developer.android.com/guide/app-bundle/)
+ * and want to have separate APKs to upload to the Play Store.
  */
 def enableSeparateBuildPerCPUArchitecture = false
 
 /**
- * Run Proguard to shrink the Java bytecode in release builds.
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
  */
 def enableProguardInReleaseBuilds = false
 
 /**
- * The preferred build flavor of JavaScriptCore.
+ * The preferred build flavor of JavaScriptCore (JSC)
  *
  * For example, to use the international variant, you can use:
  * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
  *
  * The international variant includes ICU i18n library and necessary data
  * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
- * give correct results when using with locales other than en-US.  Note that
+ * 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:+'
 
 /**
- * Whether to enable the Hermes VM.
- *
- * This should be set on project.ext.react and that value will be read here. If it is not set
- * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
- * and the benefits of using Hermes will therefore be sharply reduced.
- */
-def enableHermes = project.ext.react.get("enableHermes", false);
-
-/**
- * Architectures to build native code for in debug.
+ * Private function to get the list of Native Architectures you want to build.
+ * This reads the value from reactNativeArchitectures in your gradle.properties
+ * file and works together with the --active-arch-only flag of react-native run-android.
  */
-def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures")
+def reactNativeArchitectures() {
+    def value = project.getProperties().get("reactNativeArchitectures")
+    return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+}
 
 def appVersionCode = Integer.valueOf(System.env.VERSION_CODE ?: 1)
 def appVersionName = System.env.VERSION_NAME ?: "1.0"
@@ -138,6 +98,8 @@ android {
 
     compileSdkVersion rootProject.ext.compileSdkVersion
 
+    namespace "io.dolby.videocall"
+
     defaultConfig {
         applicationId "io.dolby.videocall"
         minSdkVersion rootProject.ext.minSdkVersion
@@ -151,7 +113,7 @@ android {
             reset()
             enable enableSeparateBuildPerCPUArchitecture
             universalApk false  // If true, also generate a universal APK
-            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+            include (*reactNativeArchitectures())
         }
     }
     packagingOptions {
@@ -169,13 +131,6 @@ android {
         }
     }
     buildTypes {
-        debug {
-            if (nativeArchitectures) {
-                ndk {
-                    abiFilters nativeArchitectures.split(',')
-                }
-            }
-        }
         release {
             // Caution! In production, you need to generate your own keystore file.
             // see https://reactnative.dev/docs/signed-apk-android.
@@ -225,9 +180,8 @@ android {
 }
 
 dependencies {
-    implementation fileTree(dir: "libs", include: ["*.jar"])
-    //noinspection GradleDynamicVersion
-    implementation "com.facebook.react:react-native:+"  // From node_modules
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
 
     implementation 'androidx.core:core-splashscreen:1.0.0'
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
@@ -245,21 +199,14 @@ dependencies {
         exclude group:'com.facebook.flipper'
     }
 
-    if (enableHermes) {
-        def hermesPath = "../../node_modules/hermes-engine/android/";
-        debugImplementation files(hermesPath + "hermes-debug.aar")
-        releaseImplementation files(hermesPath + "hermes-release.aar")
+    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
     } else {
         implementation jscFlavor
     }
-    implementation platform('com.google.firebase:firebase-bom:30.3.2')
-}
 
-// Run this once to be able to run the application with BUCK
-// puts all compile dependencies into folder libs for BUCK to use
-task copyDownloadableDepsToLibs(type: Copy) {
-    from configurations.implementation
-    into 'libs'
+    implementation platform('com.google.firebase:firebase-bom:30.3.2')
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

examples/mobile/android/app/src/debug/java/io/dolby/videocall/ReactNativeFlipper.java

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
  * directory of this source tree.
@@ -18,12 +18,16 @@
 import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
 import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
 import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
+import com.facebook.react.ReactInstanceEventListener;
 import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.modules.network.NetworkingModule;
 import okhttp3.OkHttpClient;
-
+/**
+ * Class responsible of loading Flipper inside your React Native application. This is the debug
+ * flavor of it. Here you can add your own plugins and customize the Flipper setup.
+ */
 public class ReactNativeFlipper {
   public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
     if (FlipperUtils.shouldEnableFlipper(context)) {
@@ -51,7 +55,7 @@ public void apply(OkHttpClient.Builder builder) {
       ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
       if (reactContext == null) {
         reactInstanceManager.addReactInstanceEventListener(
-            new ReactInstanceManager.ReactInstanceEventListener() {
+            new ReactInstanceEventListener() {
               @Override
               public void onReactContextInitialized(ReactContext reactContext) {
                 reactInstanceManager.removeReactInstanceEventListener(this);

examples/mobile/android/app/src/main/java/io/dolby/videocall/MainActivity.java

@@ -1,6 +1,9 @@
 package io.dolby.videocall;
 
 import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactActivityDelegate;
 
 import android.os.Bundle;
 
@@ -22,4 +25,21 @@ protected void onCreate(Bundle savedInstanceState) {
 
     super.onCreate(null);
   }
+
+  /**
+   * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link
+   * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React
+   * (aka React 18) with two boolean flags.
+   */
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new DefaultReactActivityDelegate(
+        this,
+        getMainComponentName(),
+        // If you opted-in for the New Architecture, we enable the Fabric Renderer.
+        DefaultNewArchitectureEntryPoint.getFabricEnabled(), // fabricEnabled
+        // If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18).
+        DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() // concurrentRootEnabled
+        );
+  }
 }