chore(llm): upgrade React Native to 0.72.3 (#4289)

* chore(llm): apply react native update diff (without metro config)

* chore(llm): android building (❌: expo modules, gradlew clean, metro)

* chore(llm): put back reanimated to how it was

* chore(llm): ios native build maybe working

* chore: fix lock files post rebase

* chore(llm): migrate AppDelegate to objective c++ to match RN template

* chore(llm, native-ui): upgrade reanimated to 3.3.0, expo to 49 in ui

* chore(llm): reenable expo modules in android (not building yet)

* chore(llm): cleanup Podfile

* fix(llm): fix expo linking issues

* fix(llm/android/settings.gradle): remove redundant code

* fix(llm/unimported): ignore rn dependencies

* fix(llm): build issue with react-native-vector-icons

* fix(native-ui): type issues

* fix(llm/InstalledAppsModal): type issue, remove redundant style (tested)

* style(llm): lint

* chore(ui:native): upgrade @types/react-native

chore: lockfile

* chore(llm, native-ui): upgrade metro related dependencies

* chore(native-ui): upgrade expo deps, remove useless @types/react-native

* fix(native-ui): "pnpm ui:native storybook" working

* chore: update metro config

* chore: remove unused fixes in pnpmfile.cjs

* fix(llm): fix lockfiles after rebasing on develop and fix pnpmfile

* chore: changesets

* chore: fix ts errors

---------

Co-authored-by: Valentin D. Pinkman <valentin.d.pinkman@hey.com>

.changeset/chilly-elephants-call.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/native-ui": patch
+---
+
+Upgrade peerDependency react-native-reanimated to 3.3.0, devDependency expo to expo SDK 49 and metro to 0.79.0

.changeset/early-snakes-whisper.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/live-common": patch
+---
+
+Upgrade dev dependency react-native to 0.72.3

.changeset/gentle-plants-dress.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Upgrade react-native to 0.72.3 (also closely related dependencies such as expo SDK to expo 49, react-native-reanimated to 3.3.0, @react-native-community/cli to 11.3.7)

.pnpmfile.cjs

@@ -85,7 +85,7 @@ function readPackage(pkg, context) {
       }),
       /* React Native and Metro bundler packages */
       // Crashes ios build if removed /!\
-      addDependencies("react-native-codegen", {
+      addDependencies("@react-native/codegen", {
         glob: "*",
         invariant: "*",
       }),
@@ -94,9 +94,13 @@ function readPackage(pkg, context) {
         mkdirp: "*",
         yargs: "*",
       }),
+
       addPeerDependencies("@react-native-community/cli", {
         "metro-resolver": "*",
       }),
+      addPeerDependencies("@react-native-community/cli-tools", {
+        "find-up": "*",
+      }),
       addPeerDependencies("metro-config", {
         "metro-transform-worker": "*",
       }),
@@ -136,6 +140,8 @@ function readPackage(pkg, context) {
       addPeerDependencies("expo", {
         "react-native": "*",
         react: "*",
+        "expo-modules-autolinking": "*",
+        "expo-modules-core": "*",
       }),
       addPeerDependencies(/^expo-/, {
         "expo-modules-core": "*",
@@ -144,6 +150,7 @@ function readPackage(pkg, context) {
         react: "*",
       }),
       addPeerDependencies("expo-asset", {
+        "expo-modules-core": "*",
         "expo-file-system": "*",
       }),
       addPeerDependencies("expo-font", {

apps/ledger-live-mobile/.unimportedrc.json

@@ -18,6 +18,8 @@
   "ignoreUnused": [
     "@ledgerhq/react-native-passcode-auth",
     "@react-native-masked-view/masked-view",
+    "@react-native/gradle-plugin",
+    "@react-native/metro-config",
     "@segment/sovran-react-native",
     "expo-file-system",
     "expo-image-loader",

apps/ledger-live-mobile/Gemfile

@@ -2,7 +2,7 @@ source "https://rubygems.org"
 
 gem "fastlane"
 gem "dotenv"
-gem 'cocoapods', '>= 1.11.3'
+gem 'cocoapods', '~> 1.12'
 gem "semver2", "~> 3.4", ">= 3.4.2"
 
 plugins_path = File.join(File.dirname(__FILE__), "fastlane", "Pluginfile")

apps/ledger-live-mobile/Gemfile.lock

@@ -280,7 +280,7 @@ PLATFORMS
   x86_64-darwin-20
 
 DEPENDENCIES
-  cocoapods (>= 1.11.3)
+  cocoapods (~> 1.12)
   dotenv
   fastlane
   fastlane-plugin-load_json

apps/ledger-live-mobile/android/app/build.gradle

@@ -200,6 +200,9 @@ dependencies {
     // Needed to enable location services in a native module
     implementation 'com.google.android.gms:play-services-location:21.0.1'
 
+    // this should not be needed with expo autolinking, but somehow expo autolinking is partially broken
+    implementation project(path: ':expo')
+
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.squareup.okhttp3', module:'okhttp'
@@ -227,4 +230,3 @@ dependencies {
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
 apply plugin: 'kotlin-android'
-apply plugin: 'kotlin-android-extensions'

apps/ledger-live-mobile/android/app/src/main/java/com/ledger/live/MainActivity.java

@@ -9,6 +9,7 @@
 import android.view.View;
 import android.view.WindowManager;
 
+import expo.modules.ReactActivityDelegateWrapper;
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
@@ -44,14 +45,14 @@ public void onNewIntent(Intent intent) {
      */
     @Override
     protected ReactActivityDelegate createReactActivityDelegate() {
-        return new DefaultReactActivityDelegate(
+        return new ReactActivityDelegateWrapper(this, BuildConfig.IS_NEW_ARCHITECTURE_ENABLED, 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
-            );
+        ));
     }
 
     @Override

apps/ledger-live-mobile/android/app/src/main/java/com/ledger/live/MainApplication.java

@@ -3,28 +3,26 @@
 import android.app.Application;
 import android.app.NotificationChannel;
 import android.app.NotificationManager;
-import android.content.Context;
 import android.content.res.Configuration;
 import android.os.Build;
 
+import com.braze.BrazeActivityLifecycleCallbackListener;
 import com.brentvatne.react.ReactVideoPackage;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
-import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
 import com.facebook.react.defaults.DefaultReactNativeHost;
 import com.facebook.soloader.SoLoader;
-import com.braze.BrazeActivityLifecycleCallbackListener;
+import com.shopify.reactnativeperformance.ReactNativePerformance;
 
 import java.util.List;
 
 import expo.modules.ApplicationLifecycleDispatcher;
+import expo.modules.ExpoModulesPackage;
 import expo.modules.ReactNativeHostWrapper;
 
-import com.shopify.reactnativeperformance.ReactNativePerformance;
-
 public class MainApplication extends Application implements ReactApplication {
   public static String LO_NOTIFICATION_CHANNEL = "lo-llm";
   public static String HI_NOTIFICATION_CHANNEL = "hi-llm";
@@ -46,7 +44,8 @@ private void createNotificationChannel() {
   }
 
   private final ReactNativeHost mReactNativeHost =
-      new DefaultReactNativeHost(this) {
+      new ReactNativeHostWrapper(this, new DefaultReactNativeHost(this) {
+      // new DefaultReactNativeHost(this) {
         @Override
         public boolean getUseDeveloperSupport() {
           return BuildConfig.DEBUG;
@@ -59,6 +58,7 @@ protected List<ReactPackage> getPackages() {
           packages.add(new NativeModulesPackage());
           packages.add(new ReactVideoPackage());
           packages.add(new BackgroundRunnerPackager());
+          packages.add(new ExpoModulesPackage());
           return packages;
         }
 
@@ -75,7 +75,8 @@ protected boolean isNewArchEnabled() {
         protected Boolean isHermesEnabled() {
           return BuildConfig.IS_HERMES_ENABLED;
         }
-      };
+      // };
+      });
 
   @Override
   public ReactNativeHost getReactNativeHost() {

apps/ledger-live-mobile/android/build.gradle

@@ -6,8 +6,7 @@ buildscript {
         minSdkVersion = 24
         compileSdkVersion = 33
         targetSdkVersion = 33
-        ndkVersion = "21.4.7075529"
-        kotlinVersion = "1.6.20"
+        kotlinVersion = "1.8.10"
         androidXCore = "1.8.0"
         androidXAnnotation = "1.2.0"
         androidXBrowser = "1.3.0"
@@ -19,7 +18,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:7.3.1")
+        classpath("com.android.tools.build:gradle:7.4.1")
         classpath("com.facebook.react:react-native-gradle-plugin")
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

apps/ledger-live-mobile/android/gradle.properties

@@ -28,11 +28,11 @@ android.jetifier.ignorelist=bcprov
 # Next storage implementation
 # https://react-native-async-storage.github.io/async-storage/docs/advanced/next
 AsyncStorage_useNextStorage=true
-AsyncStorage_kotlinVersion=1.6.10
-AsyncStorage_next_roomVersion=2.4.2
+AsyncStorage_kotlinVersion=1.8.10
+AsyncStorage_next_roomVersion=2.4.3
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.162.0
+FLIPPER_VERSION=0.182.0
 
 STAGING_STORE_FILE=staging.kstr
 STAGING_KEY_ALIAS=staging

apps/ledger-live-mobile/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip
+networkTimeout=10000
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

apps/ledger-live-mobile/android/settings.gradle

@@ -4,13 +4,13 @@ project(':react-native-fast-crypto').projectDir = new File(rootProject.projectDi
 include ':react-native-webview'
 project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
 
+apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle")
+useExpoModules()
+
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 
 include ':app'
-includeBuild('../node_modules/react-native-gradle-plugin')
-
-apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute().text.trim(), "../scripts/autolinking.gradle")
-useExpoModules()
+includeBuild(file('../node_modules/@react-native/gradle-plugin').toPath().toRealPath().toAbsolutePath().toString()) // https://github.com/facebook/react-native/issues/34432#issuecomment-1380612455
 
 include ':react-native-video'
 project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

apps/ledger-live-mobile/ios/Podfile

@@ -1,15 +1,10 @@
-# Use the node resolver because pnpm nests modules.
-def relative_path(module_name)
-  module_pathname = Pathname.new File.dirname(`node --print "require.resolve('#{module_name}/package.json')"`)
-  module_pathname.relative_path_from(Pathname.new File.absolute_path ".")
-end
-
-expo_autolinking = File.join(relative_path("expo"), "scripts/autolinking")
-rct_text = File.join(relative_path("react-native"), "Libraries/Text")
-
-require expo_autolinking
-require_relative '../node_modules/react-native/scripts/react_native_pods'
-require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
+# Resolve react_native_pods.rb with node to allow for hoisting
+require Pod::Executable.execute_command('node', ['-p',
+  'require.resolve(
+    "react-native/scripts/react_native_pods.rb",
+    {paths: [process.argv[1]]},
+  )', __dir__]).strip
 
 platform :ios, '13.0'
 prepare_react_native_project!
@@ -24,6 +19,7 @@ prepare_react_native_project!
 #     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
 # ```
 flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled
+
 linkage = ENV['USE_FRAMEWORKS']
 if linkage != nil
   Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
@@ -32,6 +28,13 @@ end
 
 target 'ledgerlivemobile' do
   use_expo_modules!
+  post_integrate do |installer|
+    begin
+      expo_patch_react_imports!(installer)
+    rescue => e
+      Pod::UI.warn e
+    end
+  end
   config = use_native_modules!
 
   # Flags change depending on the env values.
@@ -53,11 +56,11 @@ target 'ledgerlivemobile' do
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
-  pod 'React-RCTText', :path => rct_text, :modular_headers => true
-
   post_install do |installer|
+    # https://github.com/ledger/live/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
     react_native_post_install(
       installer,
+      config[:reactNativePath],
       # Set `mac_catalyst_enabled` to `true` in order to apply patches
       # necessary for Mac Catalyst builds
       :mac_catalyst_enabled => false