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 :)

Related issues

Fixes:

Manual testing steps

1. Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.