Merge pull request #8599 from LedgerHQ/support/upgrade-react-native-t…

…o-v0.75.4

⬆️  LLM - Upgrade react native from 0.74.88 to 0.75.4

.changeset/chatty-shirts-tickle.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+LLM - Upgrade React Native from v0.74.88 to v0.75.4

apps/ledger-live-mobile/Gemfile

@@ -1,9 +1,9 @@
 source "https://rubygems.org"
 
 gem "fastlane", '~> 2.223.1'
-gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
 gem "dotenv"
-gem 'cocoapods', '>= 1.13', '< 1.15'
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
 gem "semver2", "~> 3.4", ">= 3.4.2"
 
 plugins_path = File.join(File.dirname(__FILE__), "fastlane", "Pluginfile")

apps/ledger-live-mobile/Gemfile.lock

@@ -279,8 +279,8 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  activesupport (>= 6.1.7.5, < 7.1.0)
-  cocoapods (>= 1.13, < 1.15)
+  activesupport (>= 6.1.7.5, != 7.1.0)
+  cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
   dotenv
   fastlane (~> 2.223.1)
   fastlane-plugin-load_json

apps/ledger-live-mobile/__tests__/jest-setup.js

@@ -60,16 +60,6 @@ jest.mock("expo-camera/legacy", () => {
   };
 });
 
-jest.mock("expo-barcode-scanner", () => ({
-  BarCodeScanner: {
-    Constants: {
-      BarCodeType: {
-        qr: "qr",
-      },
-    },
-  },
-}));
-
 jest.mock("expo-camera", () => {
   return {
     CameraView: jest.fn(() => null),

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

@@ -20,14 +20,14 @@ apply from: "../../node_modules/react-native-vector-icons/fonts.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")
+    //   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
@@ -61,6 +61,8 @@ react {
     //
     //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
     // hermesFlags = ["-O", "-output-source-map"]
+    /* Autolinking */
+    autolinkLibrariesWithApp()
 }
 
 /**
@@ -223,5 +225,4 @@ dependencies {
     implementation "androidx.appcompat:appcompat:1.0.0"
 }
 
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
 apply plugin: 'kotlin-android'

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

@@ -10,7 +10,7 @@ buildscript {
         androidXAnnotation = "1.2.0"
         androidXBrowser = "1.3.0"
         ndkVersion = "26.1.10909125"
-        kotlinVersion = "1.9.22"
+        kotlinVersion = "1.9.24"
     }
     repositories {
         google()

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

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

apps/ledger-live-mobile/android/gradlew

@@ -55,7 +55,7 @@
 #       Darwin, MinGW, and NonStop.
 #
 #   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
 #       within the Gradle project.
 #
 #       You can find Gradle at https://github.com/gradle/gradle/.

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

@@ -1,3 +1,6 @@
+pluginManagement { includeBuild(file("../node_modules/@react-native/gradle-plugin").toPath().toRealPath().toAbsolutePath().toString()) }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
 rootProject.name = 'ledgerlivemobile'
 include ':react-native-fast-crypto'
 project(':react-native-fast-crypto').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fast-crypto/android')
@@ -7,8 +10,6 @@ project(':react-native-webview').projectDir = new File(rootProject.projectDir, '
 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(file('../node_modules/@react-native/gradle-plugin').toPath().toRealPath().toAbsolutePath().toString()) // https://github.com/facebook/react-native/issues/34432#issuecomment-1380612455
 

apps/ledger-live-mobile/e2e/helpers.ts

@@ -1,4 +1,4 @@
-import { by, element, waitFor, device } from "detox";
+import { by, element, waitFor, device, web } from "detox";
 import { Direction } from "detox/detox";
 import { findFreePort, close as closeBridge, init as initBridge } from "./bridge/server";
 
@@ -26,25 +26,46 @@ const MAX_PORT = 65535;
 let portCounter = BASE_PORT; // Counter for generating unique ports
 const speculosDevices: [number, SpeculosDevice][] = [];
 
+function sync_delay(ms: number) {
+  const done = new Int32Array(new SharedArrayBuffer(4));
+  Atomics.wait(done, 0, 0, ms); // Wait for the specified duration
+}
+
 export async function waitForElementById(id: string | RegExp, timeout: number = DEFAULT_TIMEOUT) {
-  return await waitFor(getElementById(id)).toBeVisible().withTimeout(timeout);
+  return await waitFor(element(by.id(id)))
+    .toBeVisible()
+    .withTimeout(timeout);
 }
 
 export async function waitForElementByText(
   text: string | RegExp,
   timeout: number = DEFAULT_TIMEOUT,
 ) {
-  return await waitFor(getElementByText(text)).toBeVisible().withTimeout(timeout);
+  return await waitFor(element(by.text(text)))
+    .toBeVisible()
+    .withTimeout(timeout);
 }
 
 export function getElementById(id: string | RegExp, index = 0) {
+  if (!isAndroid()) sync_delay(200); // Issue with RN75 : QAA-370
   return element(by.id(id)).atIndex(index);
 }
 
 export function getElementByText(text: string | RegExp, index = 0) {
+  if (!isAndroid()) sync_delay(200); // Issue with RN75 : QAA-370
   return element(by.text(text)).atIndex(index);
 }
 
+export function getWebElementById(id: string, index = 0) {
+  if (!isAndroid()) sync_delay(200); // Issue with RN75 : QAA-370
+  return web.element(by.web.id(id)).atIndex(index);
+}
+
+export function getWebElementByTag(tag: string, index = 0) {
+  if (!isAndroid()) sync_delay(200); // Issue with RN75 : QAA-370
+  return web.element(by.web.tag(tag)).atIndex(index);
+}
+
 export async function tapById(id: string | RegExp, index = 0) {
   return getElementById(id, index).tap();
 }
@@ -90,6 +111,7 @@ async function performScroll(
   const scrollViewMatcher = scrollViewId
     ? by.id(scrollViewId)
     : by.type(isAndroid() ? "android.widget.ScrollView" : "RCTScrollView");
+  if (!isAndroid()) sync_delay(200); // Issue with RN75 : QAA-370
   await waitFor(element(elementMatcher))
     .toBeVisible()
     .whileElement(scrollViewMatcher)

apps/ledger-live-mobile/e2e/models/liveApps.ts

@@ -1,9 +1,9 @@
 import { randomUUID } from "crypto";
-import { web, by } from "detox";
 import { e2eBridgeServer } from "../bridge/server";
 import { first, filter, map } from "rxjs/operators";
 import { startDummyServer, stopDummyServer as stopDummyServer } from "@ledgerhq/test-utils";
 import { firstValueFrom } from "rxjs";
+import { getWebElementById } from "../helpers";
 
 export async function startLiveApp(liveAppDirectory: string, liveAppPort = 3000) {
   try {
@@ -32,7 +32,7 @@ export async function stopServer() {
 }
 
 export async function send(params: Record<string, unknown>) {
-  const webview = web.element(by.web.id("root"));
+  const webview = getWebElementById("root");
   const id = randomUUID();
   const json = JSON.stringify({
     id,

apps/ledger-live-mobile/e2e/page/discover/buyDevice.page.ts

@@ -1,5 +1,4 @@
-import { web, by } from "detox";
-import { getElementById, isAndroid, tapByElement } from "../../helpers";
+import { getElementById, getWebElementById, isAndroid, tapByElement } from "../../helpers";
 
 const expectedUrl = "https://shop.ledger.com/";
 
@@ -13,7 +12,7 @@ export default class BuyDevicePage {
   async expectBuyNanoWebPage() {
     // Webview testing is flaky on Android
     if (!isAndroid()) {
-      const url = await web.element(by.web.id("__next")).getCurrentUrl();
+      const url = await getWebElementById("__next").getCurrentUrl();
       expect(url).toContain(expectedUrl);
     } else {
       console.warn("Skipping webview check on Android");

apps/ledger-live-mobile/e2e/page/discover/discover.page.ts

@@ -1,5 +1,11 @@
-import { getElementById, openDeeplink, waitForElementByText } from "../../helpers";
-import { by, expect, log, web } from "detox";
+import {
+  getElementById,
+  getWebElementById,
+  getWebElementByTag,
+  openDeeplink,
+  waitForElementByText,
+} from "../../helpers";
+import { expect, log } from "detox";
 import jestExpect from "expect";
 
 const baseLink = "discover/";
@@ -51,16 +57,16 @@ export default class DiscoverPage {
   }
 
   async expect1inchParams() {
-    const title = await web.element(by.web.id("__next")).getTitle();
+    const title = await getWebElementById("__next").getTitle();
     jestExpect(title).toBe("Ledger Platform Apps");
 
-    const url = await web.element(by.web.id("__next")).getCurrentUrl();
+    const url = await getWebElementById("__next").getCurrentUrl();
     jestExpect(url).toContain("app.1inch.io");
     jestExpect(url).toContain("usdt");
     jestExpect(url).toContain("sourceTokenAmount%3D");
     jestExpect(url).toContain("currency%22%3A%22ethereum");
     jestExpect(url).toContain("accountId=d9d1d396-2081-53e1-9c67-f0623e0c4d3a");
 
-    await expect(web.element(by.web.tag("iframe"))).toExist();
+    await expect(getWebElementByTag("iframe")).toExist();
   }
 }

apps/ledger-live-mobile/e2e/page/liveApps/dummyWalletApp.webView.ts

@@ -1,6 +1,6 @@
-import { web, by } from "detox";
 import { send, startLiveApp, stopServer } from "../../models/liveApps";
 import DiscoverPage from "../discover/discover.page";
+import { getWebElementById } from "../../helpers";
 
 const port = 52619;
 
@@ -16,10 +16,10 @@ export default class DummyWalletApp {
   }
 
   async expectApp() {
-    const title = await web.element(by.web.id("image-container")).getTitle();
+    const title = await getWebElementById("image-container").getTitle();
     expect(title).toBe("Dummy Wallet API App");
 
-    const url = await web.element(by.web.id("param-container")).getCurrentUrl();
+    const url = await getWebElementById("param-container").getCurrentUrl();
     expect(url).toBe(
       `http://localhost:${port}/?theme=light&lang=en&name=Dummy+Wallet+API+Live+App`,
     );

apps/ledger-live-mobile/e2e/specs/onboardingReadOnly.spec.ts

@@ -19,8 +19,7 @@ describe("Onboarding - Read Only", () => {
   $TmsLink("B2CQA-1753");
   $TmsLink("B2CQA-1806");
   it("goes through discover app and should see an empty portfolio page", async () => {
-    await device.launchApp();
-    await device.reloadReactNative();
+    await device.launchApp({ newInstance: true });
     await app.onboarding.startOnboarding();
     await app.onboarding.chooseNoLedgerYet();
     await app.onboarding.chooseToExploreApp();