chore: Upgrade React Native to 0.76.6 (#13771)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

# **Description**

This PR upgrades React Native from 0.72.15 to 0.76.6 and Expo from
^49.0.0 to ~52.0.27.

# Changes

In general, we tried to change the code as less as possible to make it
work with the new React Native and Expo versions.

## There are 8 main changes:

### 1. React Native/Expo upgrade guide
I followed the guide:
https://docs.expo.dev/bare/upgrade/?fromSdk=49&toSdk=52#packagejson to
update to the new version of both React Native and Expo. Check the guide
to see the files I needed to update.
It seemed like a more complete guide instead of the React Native one and
it made more sense to me to follow this one since we are using Expo.

This is included in the first 2 commits. These commits also include
other changes to ensure Android and iOS build and run locally.

#### Changes worth mentioning
##### Flipper Removal
All the changes related to Flipper are due to the removal of Flipper,
long awaited change!

##### iPhone Deployment Target
The IPHONEOS_DEPLOYMENT_TARGET was updated from 13.0 to 15.1

##### Android NDK Version
The NDK version was updated from 24.0.8215888 to 26.1.10909125 (devs
should install it within Android Studio)

### 2. [RN_ELEMENT].propTypes deprecated
[RN_ELEMENT].propTypes was deprecated by (RN
0.74)[https://reactnative.dev/blog/2024/04/22/release-0.74#removal-of-deprecated-proptypes].

There are components and patches applied to change the use of propTypes
to be compatible with the new React Native version. Generally we used
the propTypes `deprecated-react-native-prop-types` like ViewPropTypes
and TextPropTypes to fix this without changing too much the code.

For example: `app/components/Base/Keypad/components.js`

### 3. *.test.tsx files updated
There are some test files that were updated to fix some E2E and unit
tests errors.

For example: `app/components/UI/AccountApproval/index.test.tsx`

### 4. *.test.tsx.snap files updated
There are some snapshot files that needed to be updated to be compatible
with the new React Native version components.

For example:
`app/components/UI/AccountApproval/__snapshots__/index.test.tsx.snap`

### 5. Typescript linting fixes
There are some files where we had to fix typescript linting errors.

For example:
`app/component-library/components/Pickers/PickerAccount/PickerAccount.tsx`

### 6. Icons names updated
There are some icons names that were updated to be compatible with the
new Expo icons.

For example: `app/components/Base/DetailsModal.js`

### 7. Libs updates
- react, react-native, expo, @react-native/metro-config: Updated to
correspond to the RN upgrade
- deprecated-react-native-prop-types: I had to use this lib to replace
instances like Text.propTypes.style because RN deprecated all
[Element].propTypes
- react-native-scrollable-tab-view: This library is not maintained
anymore, we should consider moving to another library, in the meanwhile
I have updated to the latest commit there and had to do a patch on top
(explained below).
- flipper related libraries: Flipper is finally removed!
- The rest of the libraries updates were due to incompatibilities with
the new RN upgrade

### 8. Patches
- Majority of patches were to fix the propTypes deprecation.
- `react-native-scrollable-tab-view`: A lot of incompatibilities with
the new RN version. The changes basically made it compatible without
having to move to another lib (although this should be a task for the
future).
- Rest of patches: Basically making libraries work with the new RN

### All other changes
All the other changes were either because of the Guide mentioned above
or details here and there that had to be implemented in order for the
app to build/run with the new upgrade. Happy to explain any change that
I haven't mentioned here :)

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: metamaskbot <[email protected]>
Co-authored-by: sethkfman <[email protected]>
Co-authored-by: tommasini <[email protected]>
Co-authored-by: tommasini <[email protected]>
Co-authored-by: LeoTM <[email protected]>

Author: 5 people

.depcheckrc.yml

@@ -79,16 +79,26 @@ ignores:
   - 'url'
   - 'vm-browserify'
   - 'react-native-cli'
+  - 'babel-plugin-module-resolver'
 
   ## Missing dependencies to investigate
   - '@react-navigation/core'
   - 'app'
   - 'i18n-js'
   - 'images'
-  
+
   ## Expo
   - '@config-plugins/detox'
   - 'cross-spawn'
   - 'expo-build-properties'
   - 'expo-dev-client'
-  
+
+  ## react native
+  - '@react-native-community/cli'
+  - '@react-native-community/cli-platform-android'
+  - '@react-native-community/cli-platform-ios'
+  - '@react-native-community/cli-server-api'
+  - '@react-native/typescript-config'
+  - 'react-native-pager-view'
+  # this dependency can probably be removed, needs investigation
+  - '@types/react-test-renderer'

.gitignore

@@ -38,6 +38,7 @@ android/app/.project
 android/app/bin/
 android/app/gradle*
 android/app/_build*
+.cxx/
 
 # if we ever want to add google services
 android/app/google-services.json
@@ -134,6 +135,7 @@ android/app/src/main/assets/modules.json
 .expo
 dist/
 web-build/
+expo-env.d.ts
 
 # CICD
 github-tools/

.iyarc

@@ -0,0 +1,2 @@
+# https://github.com/advisories/GHSA-c76h-2ccp-4975 This is temporarily ignored, will be fixed by updating yarn to v3 in this PR: https://github.com/MetaMask/metamask-mobile/pull/14477
+GHSA-c76h-2ccp-4975

android/app/build.gradle

@@ -1,7 +1,9 @@
 apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
 apply plugin: "io.sentry.android.gradle"
 apply plugin: 'com.google.gms.google-services'
+def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
 
 /**
  * This is the configuration block to customize your React Native Android app.
@@ -49,9 +51,15 @@ react {
     // hermesFlags = ["-O", "-output-source-map"]
     //
     // Added by install-expo-modules
-    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", rootDir.getAbsoluteFile().getParentFile().getAbsolutePath(), "android", "absolute"].execute(null, rootDir).text.trim())
-    cliFile = new File(["node", "--print", "require.resolve('@expo/cli')"].execute(null, rootDir).text.trim())
+    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()
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
     bundleCommand = "export:embed"
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
 }
 
 // Override default React Native to generate source maps for Hermes
@@ -170,7 +178,8 @@ def ndkPath() {
 android {
     ndkVersion rootProject.ext.ndkVersion
 
-    compileSdkVersion rootProject.ext.compileSdkVersion
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
 
     namespace"io.metamask"
 
@@ -179,7 +188,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionName "7.44.0"
-        versionCode 1707
+        versionCode 1773
         testBuildType System.getProperty('testBuildType', 'debug')
         missingDimensionStrategy 'react-native-camera', 'general'
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
@@ -197,8 +206,18 @@ android {
       pickFirst 'lib/armeabi-v7a/libcrypto.so'
       pickFirst 'lib/x86/libcrypto.so'
       pickFirst 'lib/x86_64/libcrypto.so'
+      jniLibs {
+        useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
+      }
+      exclude 'META-INF/AL2.0'
+      exclude 'META-INF/LGPL2.1'
+      exclude 'mockito-extensions/org.mockito.plugins.MockMaker'
 	  }
 
+    androidResources {
+      ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
+    }
+
 	  signingConfigs {
       release {
         storeFile file('../keystores/release.keystore')
@@ -235,6 +254,8 @@ android {
             manifestPlaceholders.isDebug = false
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro", "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro", "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules.pro"
+            crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
+            testProguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro", "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro", "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules.pro"
         }
     }
 
@@ -271,6 +292,10 @@ android {
       // Used to point to dev environment API for ramp
       it.buildConfigField 'String', 'IS_RAMP_DEV', "\"$System.env.RAMP_DEV_BUILD\""
     }
+
+    buildFeatures {
+        buildConfig = true
+    }
 }
 
 dependencies {
@@ -282,12 +307,7 @@ dependencies {
     androidTestImplementation 'org.mockito:mockito-android:4.2.0'
     androidTestImplementation 'androidx.test:core:1.5.0'
     androidTestImplementation 'androidx.test:core-ktx:1.5.0'
-    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
-    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
-        exclude group:'com.squareup.okhttp3', module:'okhttp'
-    }
 
-    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")
     } else {
@@ -297,6 +317,15 @@ dependencies {
          exclude module: "protobuf-lite"
      }
     androidTestImplementation ('androidx.test.espresso:espresso-contrib:3.4.0')
-}
 
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+    // Add these dependencies for androidTest
+    androidTestImplementation "com.google.guava:guava:31.1-android"
+    androidTestImplementation "org.ow2.asm:asm:9.4"
+    androidTestImplementation "net.java.dev.jna:jna:5.12.1"
+    androidTestImplementation "net.java.dev.jna:jna-platform:5.12.1"
+    androidTestImplementation "org.opentest4j:opentest4j:1.2.0"
+    
+    // Make sure you have the proper Mockito dependencies
+    androidTestImplementation "org.mockito:mockito-core:4.8.0"
+    androidTestImplementation "org.mockito:mockito-inline:4.8.0"
+}

android/app/proguard-rules.pro

@@ -48,3 +48,18 @@
   -keep class kotlin.** { *; }
 
   -keep class kotlin.Metadata { *; }
+
+-dontwarn kotlinx.serialization.SerialName
+-dontwarn kotlinx.serialization.Serializable
+
+# Ignore missing Java desktop classes referenced by JNA
+-dontwarn java.awt.**
+-dontwarn javax.swing.**
+-dontwarn java.lang.instrument.**
+-dontwarn sun.misc.**
+-dontwarn org.mockito.**
+-dontwarn edu.umd.cs.findbugs.**
+-dontwarn com.huawei.hms.ads.**
+-dontwarn com.google.common.util.concurrent.**
+-dontwarn org.objectweb.asm.**
+-dontwarn net.bytebuddy.**

android/app/src/androidTest/java/com/metamask/nativeModules/RNTarTest/RNTarTest.java

@@ -36,7 +36,7 @@ public class RNTarTest {
 
   @Before
   public void setUp() {
-    reactContext = new ReactApplicationContext(ApplicationProvider.getApplicationContext());
+    reactContext = mock(ReactApplicationContext.class);
     tar = new RNTar(reactContext);
     promise = mock(Promise.class);
   }