Chore: Upgrade sample and E2E tests to RN 0.75 (#4155)

* Updates RN to 0.75.4 in the sample app and E2E test

* Removes Flipper from iOS

* Fixes lint issue (see facebook/react-native#33955)

* enable corepack in testflight dependencies step

* Sets the newArchEnabled=false for legacy builds

* enable corepack in testflight build step

* Enable corepack in a separate step

* Removes corepack step

* Updates OnLoad.cpp and CMakeList.txt to match the RN version samples

* Enable corepack and remove cache check

* Reverts CMakeLists.txt change

* Update yarn cache in testflight build

* Updates PrivacyInfo

* misc(ci): Remove unused testflight node_modules cache (#4178)

---------

Co-authored-by: LucasZF <[email protected]>
Co-authored-by: Krystof Woldrich <[email protected]>

Author: 3 people

.github/workflows/codegen.yml

@@ -29,7 +29,8 @@ jobs:
               cd samples/react-native/ios
               node ../node_modules/react-native/scripts/generate-codegen-artifacts.js \
                 --path .. \
-                --outputPath codegen
+                --outputPath codegen \
+                --targetPlatform ios
     steps:
       - uses: actions/checkout@v4
       - run: corepack enable

.github/workflows/e2e.yml

@@ -167,15 +167,15 @@ jobs:
     strategy:
       fail-fast: false # keeps matrix running if one fails
       matrix:
-        rn-version: ['0.65.3', '0.73.9']
+        rn-version: ['0.65.3', '0.75.4']
         rn-architecture: ['legacy', 'new']
         platform: ['android', 'ios']
         build-type: ['production']
         ios-use-frameworks: ['no', 'static', 'dynamic']
         engine: ['hermes', 'jsc']
         include:
           - platform: ios
-            rn-version: '0.73.9'
+            rn-version: '0.75.4'
             runs-on: macos-14 # uses m1 https://github.blog/changelog/2024-01-30-github-actions-macos-14-sonoma-is-now-available/
             runtime: 'latest'
             device: 'iPhone 14'
@@ -188,7 +188,7 @@ jobs:
             runs-on: ubuntu-latest
         exclude:
           # exclude JSC for new RN versions (keeping the matrix manageable)
-          - rn-version: '0.73.9'
+          - rn-version: '0.75.4'
             engine: 'jsc'
           # exclude all rn versions lower than 0.70.0 for new architecture
           - rn-version: '0.65.3'
@@ -307,15 +307,15 @@ jobs:
     strategy:
       fail-fast: false # keeps matrix running if one fails
       matrix:
-        rn-version: ['0.65.3', '0.73.9']
+        rn-version: ['0.65.3', '0.75.4']
         rn-architecture: ['legacy', 'new']
         platform: ['android', 'ios']
         build-type: ['production']
         ios-use-frameworks: ['no'] # test only no framworks
         engine: ['hermes', 'jsc']
         include:
           - platform: ios
-            rn-version: '0.73.9'
+            rn-version: '0.75.4'
             runs-on: macos-14 # uses m1 https://github.blog/changelog/2024-01-30-github-actions-macos-14-sonoma-is-now-available/
             runtime: 'latest'
             device: 'iPhone 14'
@@ -333,10 +333,10 @@ jobs:
           # e2e test only the default combinations
           - rn-version: '0.65.3'
             engine: 'hermes'
-          - rn-version: '0.73.9'
+          - rn-version: '0.75.4'
             engine: 'jsc'
           # E2E timeout due to a race condition https://github.com/facebook/react-native/issues/42123#issuecomment-1881203719
-          - rn-version: '0.73.9'
+          - rn-version: '0.75.4'
             platform: 'ios'
             rn-architecture: 'new'
     env:

.github/workflows/sample-application.yml

@@ -105,7 +105,6 @@ jobs:
           [[ "${{ matrix.platform }}" == "ios" ]] && cd react-native/ios
           [[ "${{ matrix.platform }}" == "macos" ]] && cd react-native-macos/macos
 
-          export NO_FLIPPER=1 # Flipper is causing build issues on iOS, so we disable it
           [[ "${{ matrix.build-type }}" == "production" ]] && ENABLE_PROD=1 || ENABLE_PROD=0
           [[ "${{ matrix.rn-architecture }}" == "new" ]] && ENABLE_NEW_ARCH=1 || ENABLE_NEW_ARCH=0
           [[ "${{ matrix.ios-use-frameworks }}" == "dynamic-frameworks" ]] && export USE_FRAMEWORKS=dynamic
@@ -121,6 +120,11 @@ jobs:
           if [[ ${{ matrix.rn-architecture }} == 'new' ]]; then
             perl -i -pe's/newArchEnabled=false/newArchEnabled=true/g' gradle.properties
             echo 'New Architecture enabled'
+          elif [[ ${{ matrix.rn-architecture }} == 'legacy' ]]; then
+              perl -i -pe's/newArchEnabled=true/newArchEnabled=false/g' gradle.properties
+              echo 'Legacy Architecture enabled'
+          else
+              echo 'No changes for architecture: ${{ matrix.rn-architecture }}'
           fi
           [[ "${{ matrix.build-type }}" == "production" ]] && CONFIG='Release' || CONFIG='Debug'
           echo "Building $CONFIG"

.github/workflows/testflight.yml

@@ -26,18 +26,13 @@ jobs:
           ruby-version: '3.3.0' # based on what is used in the sample
           bundler-cache: true # runs 'bundle install' and caches installed gems automatically
           cache-version: 1 # cache the installed gems
+      - run: corepack enable
       - uses: actions/setup-node@v4
         with:
           node-version: 18
-      - uses: actions/cache@v4
-        id: deps-cache
-        with:
-          path: |
-            node_modules
-            samples/react-native/node_modules
-          key: ${{ github.workflow }}-${{ github.job }}-${{ hashFiles('yarn.lock', 'samples/react-native/yarn.lock') }}
+          cache: 'yarn'
+          cache-dependency-path: yarn.lock
       - name: Install Dependencies
-        if: steps.deps-cache.outputs['cache-hit'] != 'true'
         run: |
           yarn install
           cd samples/react-native && yarn install
@@ -52,7 +47,7 @@ jobs:
 
       - name: Pod Install
         working-directory: samples/react-native/ios
-        run: NO_FLIPPER=1 PRODUCTION=1 bundle exec pod install
+        run: PRODUCTION=1 bundle exec pod install
 
       - name: Run Fastlane
         working-directory: samples/react-native

dev-packages/e2e-tests/cli.mjs

@@ -50,11 +50,6 @@ if (!env.USE_FRAMEWORKS || env.USE_FRAMEWORKS === 'no') {
   delete env.USE_FRAMEWORKS;
 }
 
-if (platform == 'ios') {
-  // Flipper is causing build issues on iOS, so we disable it
-  env.NO_FLIPPER = 1;
-}
-
 const e2eDir = path.resolve(__dirname);
 const e2eTestPackageName = JSON.parse(fs.readFileSync(`${e2eDir}/package.json`, 'utf8')).name;
 const patchScriptsDir = path.resolve(e2eDir, 'patch-scripts');

dev-packages/e2e-tests/package.json

@@ -21,8 +21,8 @@
     "appium-xcuitest-driver": "5.13.0",
     "babel-jest": "^29.7.0",
     "jest": "^29.7.0",
-    "react": "18.2.0",
-    "react-native": "0.73.9",
+    "react": "18.3.1",
+    "react-native": "0.75.4",
     "typescript": "4.9.5",
     "webdriverio": "^8.27.0"
   },

samples/react-native/.gitignore

@@ -56,7 +56,7 @@ yarn-error.log
 *.jsbundle
 
 # Ruby / CocoaPods
-/ios/Pods/
+**/Pods/
 /vendor/bundle/
 
 # Temporary files created by Metro to check the health of the file watcher

samples/react-native/android/app/build.gradle

@@ -102,6 +102,9 @@ 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()
 }
 
 /**
@@ -196,7 +199,6 @@ android {
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
-    implementation("com.facebook.react:flipper-integration")
 
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")
@@ -205,8 +207,6 @@ dependencies {
     }
 }
 
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
-
 if (newArchEnabled.toBoolean()) {
   android {
       externalNativeBuild {

samples/react-native/android/app/src/main/AndroidManifest.xml

@@ -8,7 +8,8 @@
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
-      android:theme="@style/AppTheme">
+      android:theme="@style/AppTheme"
+      android:supportsRtl="true">
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"

samples/react-native/android/app/src/main/java/io/sentry/reactnative/sample/MainApplication.kt

@@ -9,7 +9,6 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
-import com.facebook.react.flipper.ReactNativeFlipper
 import com.facebook.soloader.SoLoader
 import io.sentry.Hint
 import io.sentry.SentryEvent
@@ -34,7 +33,7 @@ class MainApplication() : Application(), ReactApplication {
         }
 
     override val reactHost: ReactHost
-        get() = getDefaultReactHost(this.applicationContext, reactNativeHost)
+        get() = getDefaultReactHost(applicationContext, reactNativeHost)
 
     override fun onCreate() {
         super.onCreate()
@@ -46,7 +45,6 @@ class MainApplication() : Application(), ReactApplication {
             // If you opted-in for the New Architecture, we load the native entry point for this app.
             load()
         }
-        ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
     }
 
     private fun initializeSentry() {

samples/react-native/android/app/src/main/jni/OnLoad.cpp

@@ -27,66 +27,91 @@
 //    }
 // }
 
-#include <AppSpecs.h>
 #include <DefaultComponentsRegistry.h>
 #include <DefaultTurboModuleManagerDelegate.h>
+#include <autolinking.h>
 #include <fbjni/fbjni.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
-#include <rncli.h>
-#include <NativeSampleModule.h>
+#include <rncore.h>
 
-namespace facebook {
-namespace react {
+#ifdef REACT_NATIVE_APP_CODEGEN_HEADER
+#include REACT_NATIVE_APP_CODEGEN_HEADER
+#endif
+#ifdef REACT_NATIVE_APP_COMPONENT_DESCRIPTORS_HEADER
+#include REACT_NATIVE_APP_COMPONENT_DESCRIPTORS_HEADER
+#endif
+
+namespace facebook::react {
 
 void registerComponents(
-    std::shared_ptr<ComponentDescriptorProviderRegistry const> registry) {
+    std::shared_ptr<const ComponentDescriptorProviderRegistry> registry) {
   // Custom Fabric Components go here. You can register custom
   // components coming from your App or from 3rd party libraries here.
   //
   // providerRegistry->add(concreteComponentDescriptorProvider<
-  //        AocViewerComponentDescriptor>());
+  //        MyComponentDescriptor>());
+
+  // We link app local components if available
+#ifdef REACT_NATIVE_APP_COMPONENT_REGISTRATION
+  REACT_NATIVE_APP_COMPONENT_REGISTRATION(registry);
+#endif
 
-  // By default we just use the components autolinked by RN CLI
-  rncli_registerProviders(registry);
+  // And we fallback to the components autolinked
+  autolinking_registerProviders(registry);
 }
 
 std::shared_ptr<TurboModule> cxxModuleProvider(
-    const std::string &name,
-    const std::shared_ptr<CallInvoker> &jsInvoker) {
-  // Not implemented yet: provide pure-C++ NativeModules here.
-  if (name == "NativeSampleModule")
-  {
-    return std::make_shared<facebook::react::NativeSampleModule>(jsInvoker);
-  }
-  return nullptr;
+    const std::string& name,
+    const std::shared_ptr<CallInvoker>& jsInvoker) {
+  // Here you can provide your CXX Turbo Modules coming from
+  // either your application or from external libraries. The approach to follow
+  // is similar to the following (for a module called `NativeCxxModuleExample`):
+  //
+  // if (name == NativeCxxModuleExample::kModuleName) {
+  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
+  // }
+
+  // And we fallback to the CXX module providers autolinked
+  return autolinking_cxxModuleProvider(name, jsInvoker);
 }
 
 std::shared_ptr<TurboModule> javaModuleProvider(
-    const std::string &name,
-    const JavaTurboModule::InitParams &params) {
+    const std::string& name,
+    const JavaTurboModule::InitParams& params) {
   // Here you can provide your own module provider for TurboModules coming from
   // either your application or from external libraries. The approach to follow
   // is similar to the following (for a library called `samplelibrary`):
   //
-  // auto module = samplelibrary_ModuleProvider(moduleName, params);
+  // auto module = samplelibrary_ModuleProvider(name, params);
   // if (module != nullptr) {
   //    return module;
   // }
-  // return rncore_ModuleProvider(moduleName, params);
+  // return rncore_ModuleProvider(name, params);
 
-  auto module = AppSpecs_ModuleProvider(name, params);
+  // We link app local modules if available
+#ifdef REACT_NATIVE_APP_MODULE_PROVIDER
+  auto module = REACT_NATIVE_APP_MODULE_PROVIDER(name, params);
   if (module != nullptr) {
     return module;
   }
+#endif
 
-  // By default we just use the module providers autolinked by RN CLI
-  return rncli_ModuleProvider(name, params);
+  // We first try to look up core modules
+  if (auto module = rncore_ModuleProvider(name, params)) {
+    return module;
+  }
+
+  // And we fallback to the module providers autolinked
+  if (auto module = autolinking_ModuleProvider(name, params)) {
+    return module;
+  }
+
+  return nullptr;
 }
 
-} // namespace react
-} // namespace facebook
+} // namespace facebook::react
 
-JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
+JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM* vm, void*) {
   return facebook::jni::initialize(vm, [] {
     facebook::react::DefaultTurboModuleManagerDelegate::cxxModuleProvider =
         &facebook::react::cxxModuleProvider;

samples/react-native/android/app/src/release/java/io/sentry/reactnative/sample/ReactNativeFlipper.java

@@ -2,11 +2,11 @@
 buildscript {
     ext {
         buildToolsVersion = "34.0.0"
-        minSdkVersion = 21
+        minSdkVersion = 23
         compileSdkVersion = 34
         targetSdkVersion = 34
-        ndkVersion = "25.1.8937393"
-        kotlinVersion = "1.8.0"
+        ndkVersion = "26.1.10909125"
+        kotlinVersion = "1.9.24"
     }
     repositories {
         google()

samples/react-native/android/build.gradle

@@ -22,8 +22,6 @@ org.gradle.logging.level=lifecycle
 # Android operating system, and which are packaged with your app's APK
 # https://developer.android.com/topic/libraries/support-library/androidx-rn
 android.useAndroidX=true
-# Automatically convert third-party libraries to use AndroidX
-android.enableJetifier=true
 
 # Use this property to specify which architecture you want to build.
 # You can also override it from the CLI using

samples/react-native/android/gradle.properties

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