chore: Enable new architecture

[andrepimenta]

Description

This PR enables the new architecture on React Native.

The new architecture brings multiple performance improvements out of the box and new guidelines as well, you can read more about it here: https://reactnative.dev/architecture/landing-page.

Changes

In general, we tried to change the code as less as possible to make it work with the new architecture.

1. *.test.tsx files updated

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

2. *.test.tsx.snap files updated

There are some snapshot files that needed to be updated to be compatible with the new architecture version components.

3. Typescript linting fixes

There are some files where we had to fix typescript linting errors.

4. Libs updates

Upgraded Libraries: We’ve updated key dependencies to ensure compatibility and stability. Here’s what’s been bumped:

• "@metamask/react-native-webview": "^14.1.0"
• "react-native-gesture-handler": "^2.25.0"
• "react-native-mmkv": "^3.2.0"
• "react-native-safe-area-context": "^5.4.0"
• Replace "react-native-camera" for "react-native-vision-camera"

5. Patches

We patched some libraries to ensure support for the new architecture.

• react-native-modal (We needed to wrap with a View to work, more info here)
• react-native-performance
• react-native-gzip

6. Native changes

We changed the flag of the new architecture to true and had to make a few changes on the native side for the builds to compile.

7. Removal of RNTarTest

This was used to test the RNTar implementation to test local snaps, this was removed because it is not used anymore. It was using a library called mockito which was also removed as it is no longer used.

Note: We also identified a component worth to refactor for a better performance: Token search in Payment Request screen. Tracking here: #15996

Pre-merge author checklist

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

Pre-merge reviewer checklist

• [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• [x] 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.

[socket-security[bot]]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​react-native-mmkv@​2.11.0 ⏵ 3.2.0	+1		-28	-6	+10
	npm/​@​react-native-community/​checkbox@​0.5.17 ⏵ 0.5.20	+1		+1
	npm/​react-native-safe-area-context@​3.4.1 ⏵ 5.4.0			-24
	npm/​react-native-animatable@​1.3.3 ⏵ 1.4.0	+1
	npm/​detox@​20.35.0 ⏵ 20.38.0	+1		+1	+2
	npm/​react-native-modal@​12.1.0 ⏵ 14.0.0-rc.1	+1
	npm/​react-native-vision-camera@​4.6.4
	npm/​@​wix-pilot/​detox@​1.0.8 ⏵ 1.0.11	+1
	npm/​react-native-gesture-handler@​1.10.3 ⏵ 2.25.0			+6	-3
	npm/​@​wix-pilot/​core@​3.1.4 ⏵ 3.2.6	+1		+1	+2
	npm/​@​react-native-community/​datetimepicker@​7.7.0 ⏵ 8.3.0				-2

View full report

[github-actions[bot]]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 33.33333% with 2 lines in your changes missing coverage. Please review.

Project coverage is 69.47%. Comparing base (e095d11) to head (d397cac). Report is 28 commits behind head on main.

Files with missing lines	Patch %	Lines
...omponents/Modals/ModalMandatory/ModalMandatory.tsx	0.00%	1 Missing :warning:
app/lib/ppom/ppom-storage-backend.ts	0.00%	1 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #15363      +/-   ##
==========================================
+ Coverage   69.25%   69.47%   +0.21%     
==========================================
  Files        2434     2462      +28     
  Lines       52417    52772     +355     
  Branches     7930     7994      +64     
==========================================
+ Hits        36304    36663     +359     
+ Misses      13786    13759      -27     
- Partials     2327     2350      +23     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: a8662224cc23a9a0ac1636fa4ada13c01fef655d Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/6d461381-f937-4b35-92b0-3511f3964371

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[!TIP]

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[andrepimenta]

Bitrise passing: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/5b20376d-d8a8-4cf3-81db-7a9649da2512

[wachunei]

I have one improvement we could use in favor of the new useLayoutEffect, should this be addressed in a new PR?

Improvement diff

diff --git a/app/components/UI/Ramp/Aggregator/components/Quote/Quote.tsx b/app/components/UI/Ramp/Aggregator/components/Quote/Quote.tsx
index 4b09c987b9..c2ac4ef22a 100644
--- a/app/components/UI/Ramp/Aggregator/components/Quote/Quote.tsx
+++ b/app/components/UI/Ramp/Aggregator/components/Quote/Quote.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useLayoutEffect, useRef } from 'react';
 import {
   View,
   TouchableOpacity,
@@ -72,6 +72,7 @@ const Quote: React.FC<Props> = ({
     styles,
     theme: { colors, themeAppearance },
   } = useStyles(styleSheet, {});
+  const animatedBottomAccessoryRef = useRef<Animated.View>(null);
   const {
     networkFee = 0,
     providerFee = 0,
@@ -95,12 +96,15 @@ const Quote: React.FC<Props> = ({
     previouslyUsedProvider || tags?.isBestRate || tags?.isMostReliable;
 
   const expandedHeight = useSharedValue(0);
-  const handleOnLayout = (event: LayoutChangeEvent) => {
-    const { nativeEvent } = event;
-    if (expandedHeight.value === 0) {
-      expandedHeight.value = nativeEvent.layout.height;
-    }
-  };
+  useLayoutEffect(() => {
+    animatedBottomAccessoryRef.current?.measureInWindow(
+      (_x, _y, _width, height) => {
+        if (expandedHeight.value === 0) {
+          expandedHeight.value = height;
+        }
+      },
+    );
+  }, [expandedHeight]);
 
   const animatedStyle = useAnimatedStyle(() => {
     if (expandedHeight.value > 0) {
@@ -181,7 +185,7 @@ const Quote: React.FC<Props> = ({
           }
           bottomAccessory={
             <Animated.View
-              onLayout={handleOnLayout}
+              ref={animatedBottomAccessoryRef}
               style={[styles.data, animatedStyle]}
               testID="animated-view-height"
             >

Besides that, the Webview upgrade does not impact the Ramps flow:

https://github.com/user-attachments/assets/2ec16b3e-9575-4294-ad5f-60e3d2375222

[andrepimenta]

I have one improvement we could use in favor of the new useLayoutEffect, should this be addressed in a new PR?

Improvement diff Besides that, the Webview upgrade does not impact the Ramps flow:

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-06-05.at.12.56.37.mp4

Hey @wachunei, I think that would be a great change! But I would recommend doing it in a new PR just after we merge the new arch, just to keep the scope of this PR focused. Is that ok with you?

[wachunei]

But I would recommend doing it in a new PR just after we merge the new arch, just to keep the scope of this PR focused. Is that ok with you?

Sure 👌 the current code still works as is, so no issues, I will approve

[wachunei]

I have one issue to report:

The navigation header is gone after using the bottom sheet modal in a screen. In the videos the "Amount to Buy" navigation title is gone after navigating back.

After (this PR)

https://github.com/user-attachments/assets/af2614e3-2966-4146-83e7-e74533291862

Before (current main)

https://github.com/user-attachments/assets/ac1576c2-3820-4d64-a6c8-1018db24698f

[OGPoyraz]

Confirmations looks fine - however when navigating back and forth in the Stack.Navigator - we are losing the navigation bar.

https://github.com/user-attachments/assets/5a18ab89-961b-40ab-9b01-f120af279a30

Also a minor one - could be addressed later - there is an unexpected border in the nav bar

[Cal-L]

Adding open issues for patches on gzip and performance

gzip - https://github.com/ammarahm-ed/react-native-gzip/issues/4#issuecomment-2624546187 react-native-performance - https://github.com/oblador/react-native-performance/issues/111#issuecomment-2518116950

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 98cf6ba2af569bf07aa74420889a283d5d4bf29e Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/59f5c38f-11d4-40d8-8774-3f9552814e8d

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[!TIP]

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: cd951fc4d076ae480a14fc46c935e4163b6505c6 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/1681d08c-1315-4b55-acdd-b61873ffb0e3

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[!TIP]

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 3c7d550173ee36e1200a0d317886512e85abde87 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/6af2c50f-8885-41e4-8217-b4abc534c653

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[!TIP]

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: e11c08f528b3ccf2323033cf538e68273493c5a9 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/851b4b2f-75a5-4979-bd7b-4428e67f3311

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[!TIP]

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 794b5cef38ad2ec62b92b1a3c360759b87de6552 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/c6e38a17-6f05-49f3-81f2-535adf4efcdd

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[!TIP]

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: c8d4377e4d3551cc18a1755d0a4272ad34f494f4 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/a68c6f0c-acc5-45ba-b575-406213120003

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[!TIP]

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: c83e49d9ce77fc0f4c5ca8faba093d02a32ce3bf Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/69d528f6-9317-4f16-8268-84fc2fa33d15

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[!TIP]

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: b9aa744cb45e0e6f672a42bd258ab6d45e8ec861 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/81099940-b855-4b66-a960-adc973acc54a

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[!TIP]

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: c1b87615458a1b54c7f7b978e9242394c9d45a03 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/2f1f33a6-4176-4304-834b-ac5261a56c94

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[!TIP]

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 7e631578664a22e986ef246681fd6404b43f7f4b Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/60330d63-81bf-4ea5-9b5c-e9775203fad3

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[!TIP]

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 89920f86c1faeefbd1759411d171338193c30310 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/66a5b160-9ba3-4a8b-8da8-d681747f14b8

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[!TIP]

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions[bot]]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: eac304bad2a4beb30121a0bada938f7cf928f038 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/35df1c81-41cc-4967-ba49-54a446cf1071

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[sonarqubecloud[bot]]

Quality Gate failed

Failed conditions
49.2% Coverage on New Code (required ≥ 80%)
28.0% Duplication on New Code (required ≤ 10%)

See analysis details on SonarQube Cloud