Skip to content

Commit 7ee569e

Browse files
authored
chore: Improve ApprovalModal performance (#14986)
## **Description** This PR looks to improve the rendering performance of the ApprovalModal by leveraging the `useNativeDriver` prop. Based on the doc this prop does the following.. `Defines if animations should use native driver` Link to docs: https://github.com/react-native-modal/react-native-modal What this means under the hood is that when possible, react-native-modal will use the native android animation drivers. This library wraps the "stock" react native modal. Looking at the performance improvements while creating a new Solana account on the profiler we can see that on main the initial render of the ReactNativeModal took `4.6ms`. After using the `useNativeDriver` this initial render dropped `4.3 ms` which is an improvement of roughly `6.5%`. Subsequent rerenders however improved much more. On main the second render took `4.3ms` vs `0.3ms`. This is an improvement of `93%`. ## **Related issues** Fixes: ## **Manual testing steps** 1. Edit the `.js.env` file and change `METAMASK_BUILD_TYPE` to `beta` 2. create a wallet 3. open the account selector list 4. click on add account or hardware wallet 5. then click on Solana account 6. the name suggestion modal (which uses the `Approval Modal` under the hood, should pop up. 7. Click Okay and your new account should be created. ## **Screenshots/Recordings** ### **Before** <img width="1728" alt="Screenshot 2025-04-29 at 5 53 09 PM" src="https://github.com/user-attachments/assets/9a82660b-1c39-40f9-947f-f76cbe9412c1" /> <img width="1728" alt="Screenshot 2025-04-29 at 5 53 42 PM" src="https://github.com/user-attachments/assets/08672df6-fb27-43c5-9974-6806b406ce8d" /> ### **After** <img width="1728" alt="Screenshot 2025-04-29 at 6 10 54 PM" src="https://github.com/user-attachments/assets/ad096fe7-10e6-465d-a14a-fac6701f5ee1" /> <img width="1728" alt="Screenshot 2025-04-29 at 6 46 30 PM" src="https://github.com/user-attachments/assets/99c070bc-2b2b-4a60-ba6a-159bc05c705a" /> ## **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.
1 parent 59dba15 commit 7ee569e

3 files changed

Lines changed: 1 addition & 4 deletions

File tree

app/components/Approvals/ApprovalModal/ApprovalModal.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const ApprovalModal = (props: ApprovalModalProps) => {
2222

2323
return (
2424
<Modal
25+
useNativeDriver
2526
isVisible={props.isVisible}
2627
animationIn="slideInUp"
2728
animationOut="slideOutDown"

app/components/Approvals/ApprovalModal/__snapshots__/ApprovalModal.test.tsx.snap

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,7 @@ exports[`ApprovalModal renders 1`] = `
9797
{
9898
"flex": 1,
9999
"justifyContent": "flex-end",
100-
"left": 0,
101100
"margin": 0,
102-
"top": 0,
103101
"transform": [
104102
{
105103
"translateY": 1334,

app/components/Snaps/SnapUIRenderer/__snapshots__/SnapUIRenderer.test.tsx.snap

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2362,9 +2362,7 @@ exports[`SnapUIRenderer supports forms with fields 1`] = `
23622362
{
23632363
"flex": 1,
23642364
"justifyContent": "flex-end",
2365-
"left": 0,
23662365
"margin": 0,
2367-
"top": 0,
23682366
"transform": [
23692367
{
23702368
"translateY": 1334,

0 commit comments

Comments
 (0)