Commit 7ee569e
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
- __snapshots__
- Snaps/SnapUIRenderer/__snapshots__
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
22 | 22 | | |
23 | 23 | | |
24 | 24 | | |
| 25 | + | |
25 | 26 | | |
26 | 27 | | |
27 | 28 | | |
| |||
Lines changed: 0 additions & 2 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
97 | 97 | | |
98 | 98 | | |
99 | 99 | | |
100 | | - | |
101 | 100 | | |
102 | | - | |
103 | 101 | | |
104 | 102 | | |
105 | 103 | | |
| |||
Lines changed: 0 additions & 2 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
2362 | 2362 | | |
2363 | 2363 | | |
2364 | 2364 | | |
2365 | | - | |
2366 | 2365 | | |
2367 | | - | |
2368 | 2366 | | |
2369 | 2367 | | |
2370 | 2368 | | |
| |||
0 commit comments