chore(devDeps): bump metro and react-native (#9280)

## **Description**

Update react-native and metro to receive patches.
- Update metro from `0.73` to `0.76` 
- Migrate from `metro-config` to `@react-native/metro-config`
- Update `react-native` from `0.71.15` to `0.72.14`
  - Port patch
  - Remove hermes patch
- Bump and unpin `@react-native-community/` packages
- Update `@react-native-community/netinfo` from `6.0.0` to `^9.5.0`
-
[Changelog](https://github.com/react-native-netinfo/react-native-netinfo/blob/master/CHANGELOG.md)
- [Release
notes](https://github.com/react-native-netinfo/react-native-netinfo/releases)
  - v10 breaking change:
    > netinfo now requires AbortController
- Update `@react-native-masked-view/masked-view`
- [Release
notes](https://github.com/react-native-masked-view/masked-view/releases)
- Upgrade to Gradle version 8.0.1 and Android SDK 33


React Native
[Upgrade](https://github.com/orgs/MetaMask/projects/60/views/6?pane=issue&itemId=41033345)
[Android SDK
Update](react-native-community/cli#1856)

## **Related issues**


- Fixes: https://github.com/MetaMask/mobile-planning/issues/1262
- #7759

## **Manual testing steps**

Node environment must be `18.18.2`
Supports Java version `17.0.10`

1. Check out branch
2. Run `yarn setup`
3. Run `yarn watch`
4. Run `yarn start:ios` - wait for app to build on iOS simulator
5. Run `yarn start:android` - wait for app to build Android emulator


## **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**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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: LeoTM <[email protected]>
Co-authored-by: Daniel-Cross <[email protected]>
Co-authored-by: Dan Cross <[email protected]>
Co-authored-by: Daniel-Cross <[email protected]>
Co-authored-by: Cal-L <[email protected]>
Co-authored-by: Cal Leung <[email protected]>
Co-authored-by: OGPoyraz <[email protected]>
Co-authored-by: tommasini <[email protected]>
Co-authored-by: Omri Dan <[email protected]>
Co-authored-by: sethkfman <[email protected]>
Co-authored-by: MetaMask Bot <[email protected]>
Co-authored-by: metamaskbot <[email protected]>
Co-authored-by: sethkfman <[email protected]>
Co-authored-by: Jyoti Puri <[email protected]>
Co-authored-by: sahar-fehri <[email protected]>
Co-authored-by: SamuelSalas <[email protected]>
Co-authored-by: Frederik Bolding <[email protected]>
Co-authored-by: Prithpal Sooriya <[email protected]>
Co-authored-by: Pedro Pablo Aste Kompen <[email protected]>
Co-authored-by: Kylan Hurt <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Nico MASSART <[email protected]>
Co-authored-by: hesterbruikman <[email protected]>
Co-authored-by: EtherWizard33 <[email protected]>
Co-authored-by: EtherWizard33 <[email protected]>
Co-authored-by: Christopher Ferreira <[email protected]>
Co-authored-by: Daniel <[email protected]>
Co-authored-by: yande <[email protected]>
Co-authored-by: Derek Brans <[email protected]>
Co-authored-by: Jony Bursztyn <[email protected]>
Co-authored-by: Curtis David <[email protected]>
Co-authored-by: salimtb <[email protected]>
Co-authored-by: Wietze Bronkema <[email protected]>
Co-authored-by: Owen Craston <[email protected]>
Co-authored-by: Mark Stacey <[email protected]>
Co-authored-by: Vinicius Stevam <[email protected]>
Co-authored-by: infiniteflower <[email protected]>
Co-authored-by: tommasini <[email protected]>

.e2e.env.example

@@ -2,4 +2,4 @@
 export MM_TEST_ACCOUNT_SRP='word1 word... word12'
 export MM_TEST_ACCOUNT_ADDRESS='0x...'
 export MM_TEST_ACCOUNT_PRIVATE_KEY=''
-export IS_TEST="true"
+export IS_TEST="true"

.eslintrc.js

@@ -19,6 +19,10 @@ module.exports = {
       rules: {
         // TODO: re-enable
         'jsdoc/no-types': 'off',
+        'react/display-name': 'off',
+        'react/no-unused-prop-types': 'off',
+        'react/prop-types': 'off',
+        'react/self-closing-comp': 'off',
         // This change is included in `@metamask/[email protected]
         '@typescript-eslint/no-unused-vars': [
           'error',

.iyarc

@@ -1,7 +1,3 @@
 # ReDoS vulnerability, no impact to this application, and fix not backported yet to the versions we use
 
 GHSA-c2qf-rxjj-qqgw
-
-# ip SSRF improper categorization in isPublic, since it only affect dev tools on, and the server is actually a local server, this advisory shouldn't apply to this use cases
-
-GHSA-2p57-rm9w-gvfp

android/app/build.gradle

@@ -3,8 +3,6 @@ apply plugin: "com.facebook.react"
 apply plugin: "io.sentry.android.gradle"
 apply plugin: 'com.google.gms.google-services'
 
-import com.android.build.OutputFile
-
 /**
  * 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.
@@ -15,8 +13,8 @@ react {
     // 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 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 */
@@ -127,14 +125,6 @@ def getPassword(String currentUser, String keyChain) {
 	stdout.toString().trim()
 }
 
-/**
- * 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
-
 /**
  * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
  */
@@ -163,6 +153,7 @@ def reactNativeArchitectures() {
     return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
 }
 
+
 /**
 * Adding function that will retuen the Bitrise ndkPath if it is a QA or Production Build
 */
@@ -193,6 +184,14 @@ android {
 
 	  packagingOptions {
 		  exclude 'META-INF/DEPENDENCIES'
+      pickFirst 'lib/x86/libc++_shared.so'
+      pickFirst 'lib/x86_64/libc++_shared.so'
+      pickFirst 'lib/armeabi-v7a/libc++_shared.so'
+      pickFirst 'lib/arm64-v8a/libc++_shared.so'
+      pickFirst 'lib/arm64-v8a/libcrypto.so'
+      pickFirst 'lib/armeabi-v7a/libcrypto.so'
+      pickFirst 'lib/x86/libcrypto.so'
+      pickFirst 'lib/x86_64/libcrypto.so'
 	  }
 
 	  signingConfigs {
@@ -222,15 +221,6 @@ android {
       }
     }
 
-    splits {
-        abi {
-            reset()
-            enable enableSeparateBuildPerCPUArchitecture
-            universalApk false  // If true, also generate a universal APK
-            include (*reactNativeArchitectures())
-        }
-    }
-
     buildTypes {
         debug {
             manifestPlaceholders.isDebug = true
@@ -270,21 +260,6 @@ android {
       it.buildConfigField 'String', 'IS_RAMP_UAT', "\"$System.env.RAMP_INTERNAL_BUILD\""
       // Used to point to dev environment API for ramp
       it.buildConfigField 'String', 'IS_RAMP_DEV', "\"$System.env.RAMP_DEV_BUILD\""
-	  }
-    // applicationVariants are e.g. debug, release
-    applicationVariants.all { variant ->
-        variant.outputs.each { output ->
-            // For each separate APK per architecture, set a unique version code as described here:
-            // https://developer.android.com/studio/build/configure-apk-splits.html
-            // Example: versionCode will generate 1001 for armeabi-v7a, 1002 for x86, etc.
-            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
-            def abi = output.getFilter(OutputFile.ABI)
-            if (abi != null) {  // null for the universal-debug, universal-release variants
-                output.versionCodeOverride =
-                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
-            }
-
-        }
     }
 }
 
@@ -293,7 +268,6 @@ dependencies {
     implementation(files("../libs/ecies.aar"))
     implementation(files("../libs/nativesdk.aar"))
     implementation("com.facebook.react:react-android")
-    implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
     implementation 'org.apache.commons:commons-compress:1.22'
     androidTestImplementation 'org.mockito:mockito-android:4.2.0'
     androidTestImplementation 'androidx.test:core:1.5.0'

android/app/src/main/AndroidManifest.xml

@@ -30,7 +30,7 @@
 		android:theme="@style/AppTheme"
 		android:hardwareAccelerated="true"
 		android:usesCleartextTraffic="${isDebug}"
-		tools:targetApi="29"
+		tools:targetApi="33"
 		tools:ignore="GoogleAppIndexingWarning"
 		android:networkSecurityConfig="@xml/react_native_config"
 		android:largeHeap="true"

android/app/src/main/java/io/metamask/MainActivity.java

@@ -66,7 +66,7 @@ public void onNewIntent(Intent intent) {
    */
 	@Override
 	protected ReactActivityDelegate createReactActivityDelegate() {
-		return new ReactActivityDelegate(this, getMainComponentName()) {
+		return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled()) {
 		@Override
 		protected Bundle getLaunchOptions() {
 			Bundle initialProperties = new Bundle();

android/build.gradle

@@ -10,7 +10,7 @@ buildscript {
 		// We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
 		ndkVersion = "24.0.8215888"
 		bitriseNdkPath = "/usr/local/share/android-sdk/ndk-bundle"
-		kotlin_version = "1.7.0"
+		kotlin_version = "1.7.22"
 		kotlinVersion = "$kotlin_version"
 		supportLibVersion = "28.0.0"
 	}
@@ -20,8 +20,7 @@ buildscript {
 	}
 
 	dependencies {
-		classpath('com.android.tools.build:gradle:7.3.1')
-		classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
+		classpath("com.android.tools.build:gradle")
     classpath("com.facebook.react:react-native-gradle-plugin")
 		classpath("io.sentry:sentry-android-gradle-plugin:4.2.0")
     classpath("com.google.gms:google-services:4.4.2")

android/gradle.properties

@@ -23,9 +23,10 @@ org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
 android.useAndroidX=true
 # Automatically convert third-party libraries to use AndroidX
 android.enableJetifier=true
+android.disableAutomaticComponentCreation=true
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.125.0
+FLIPPER_VERSION=0.182.0
 
 # TODO: favour arch options here over cli options
 # replace them
@@ -46,5 +47,6 @@ newArchEnabled=false
 hermesEnabled=true
 
 # TODO: explain following config options
+# Some of these are depreceated in RN 0.72.15 but when removed the app won't build
 android.disableResourceValidation=true
 android.enableDexingArtifactTransform.desugaring=false

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

android/gradlew

@@ -35,13 +35,11 @@ while [ -h "$PRG" ] ; do
         PRG=`dirname "$PRG"`"/$link"
     fi
 done
-SAVED="`pwd`"
-cd "`dirname \"$PRG\"`/" >/dev/null
-APP_HOME="`pwd -P`"
-cd "$SAVED" >/dev/null
 
-APP_NAME="Gradle"
-APP_BASE_NAME=`basename "$0"`
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
 
 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
@@ -122,7 +120,7 @@ fi
 
 # For Darwin, add options to specify how the application appears in the dock
 if $darwin; then
-	GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\" \"-Xmx2048m\" \"-Xms256m\" \"-XX:MaxPermSize=2048m\""
+	GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\" \"-Xmx2048m\" \"-Xms256m\""
 fi
 
 # For Cygwin or MSYS, switch paths to Windows format before running java
@@ -180,4 +178,10 @@ APP_ARGS=`save "$@"`
 # Collect all arguments for the java command, following the shell quoting and substitution rules
 eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
 
-exec "$JAVACMD" "$@"
+exec "$JAVACMD" "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi

android/gradlew.bat

@@ -14,7 +14,7 @@
 @rem limitations under the License.
 @rem
 
-@if "%DEBUG%" == "" @echo off
+@if "%DEBUG%"=="" @echo off
 @rem ##########################################################################
 @rem
 @rem  Gradle startup script for Windows
@@ -25,7 +25,8 @@
 if "%OS%"=="Windows_NT" setlocal
 
 set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
@@ -40,7 +41,7 @@ if defined JAVA_HOME goto findJavaFromJavaHome
 
 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto execute
+if %ERRORLEVEL% equ 0 goto execute
 
 echo.
 echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
@@ -74,13 +75,16 @@ set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
 :end
 @rem End local scope for the variables with windows NT shell
-if "%ERRORLEVEL%"=="0" goto mainEnd
+if %ERRORLEVEL% equ 0 goto mainEnd
 
 :fail
 rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
 rem the _cmd.exe /c_ return code!
-if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-exit /b 1
+
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
 
 :mainEnd
 if "%OS%"=="Windows_NT" endlocal

android/settings.gradle

@@ -10,15 +10,8 @@ pluginManagement {
 rootProject.name = 'MetaMask'
 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')
-includeBuild('../node_modules/react-native') {
-     dependencySubstitution {
-         substitute(module("com.facebook.react:react-android")).using(project(":ReactAndroid"))
-         substitute(module("com.facebook.react:react-native")).using(project(":ReactAndroid"))
-         substitute(module("com.facebook.react:hermes-android")).using(project(":ReactAndroid:hermes-engine"))
-         substitute(module("com.facebook.react:hermes-engine")).using(project(":ReactAndroid:hermes-engine"))
-     }
-}
+includeBuild('../node_modules/@react-native/gradle-plugin')
+includeBuild('../node_modules/@react-native') {}
 include ':@react-native-community_blur'
 project(':@react-native-community_blur').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/blur/android')
 include ':lottie-react-native'

app/component-library/components/Modals/ModalMandatory/ModalMandatory.styles.ts

@@ -3,7 +3,6 @@ import { StyleSheet, TextStyle, Dimensions } from 'react-native';
 import { Theme } from '../../../../util/theme/models';
 
 const screenHeight = Dimensions.get('window').height;
-
 /**
  * Style sheet function for ModalConfirmation component.
  *

app/components/Nav/App/__snapshots__/index.test.tsx.snap

@@ -142,7 +142,6 @@ exports[`App renders according to latest snapshot 1`] = `
       <RNSScreen
         activityState={2}
         collapsable={false}
-        forwardedRef={[Function]}
         gestureResponseDistance={
           {
             "bottom": -1,
@@ -235,7 +234,6 @@ exports[`App renders according to latest snapshot 1`] = `
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
               onGestureHandlerEvent={[Function]}
               onGestureHandlerStateChange={[Function]}
               style={

app/components/Nav/App/index.js

@@ -298,6 +298,7 @@ const VaultRecoveryFlow = () => (
   </Stack.Navigator>
 );
 
+// eslint-disable-next-line react/prop-types
 const App = ({ userLoggedIn }) => {
   const animationRef = useRef(null);
   const animationNameRef = useRef(null);

app/components/UI/AccountRightButton/__snapshots__/index.test.tsx.snap

@@ -142,7 +142,6 @@ exports[`AccountRightButton should render correctly 1`] = `
       <RNSScreen
         activityState={2}
         collapsable={false}
-        forwardedRef={[Function]}
         gestureResponseDistance={
           {
             "bottom": -1,
@@ -235,7 +234,6 @@ exports[`AccountRightButton should render correctly 1`] = `
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
               onGestureHandlerEvent={[Function]}
               onGestureHandlerStateChange={[Function]}
               style={

app/components/UI/AnimatedTransactionModal/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AnimatedTransactionModal should render correctly 1`] = `
-<ForwardRef(AnimatedComponentWrapper)
+<ForwardRef
   onLayout={[Function]}
   style={
     [

app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap

@@ -247,7 +247,6 @@ exports[`CollectibleModal should render correctly 1`] = `
     >
       <View
         collapsable={false}
-        forwardedRef={[Function]}
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
         onLayout={[Function]}

app/components/UI/CustomAlert/__snapshots__/index.test.tsx.snap

@@ -41,7 +41,6 @@ exports[`CustomAlert should render correctly 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    forwardedRef={[Function]}
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -67,7 +66,6 @@ exports[`CustomAlert should render correctly 1`] = `
     collapsable={false}
     deviceHeight={null}
     deviceWidth={null}
-    forwardedRef={[Function]}
     hideModalContentWhileAnimating={false}
     onBackdropPress={[Function]}
     onModalHide={[Function]}

app/components/UI/EnableAutomaticSecurityChecksModal/__snapshots__/EnableAutomaticSecurityChecksModal.test.tsx.snap

@@ -142,7 +142,6 @@ exports[`EnableAutomaticSecurityChecksModal should render correctly 1`] = `
       <RNSScreen
         activityState={2}
         collapsable={false}
-        forwardedRef={[Function]}
         gestureResponseDistance={
           {
             "bottom": -1,
@@ -235,7 +234,6 @@ exports[`EnableAutomaticSecurityChecksModal should render correctly 1`] = `
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
               onGestureHandlerEvent={[Function]}
               onGestureHandlerStateChange={[Function]}
               style={