Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(navigation): resolve performance issue #1092

Merged
merged 7 commits into from
Feb 26, 2025

Conversation

hgray-instawork
Copy link
Collaborator

@hgray-instawork hgray-instawork commented Feb 21, 2025

The blur, focus, and state listeners all can perform heavy dom mutations. Performing them at the same time the screen is rendering and transitioning can cause delays or visual glitches. To resolve, these listeners are delayed a small amount.

The use of setTimeout enables waiting for the screen to render before mutating the dom. The navStateMutationsDelay experiment value is used to enable the timeout. If the experiment is not set or has a value of "0", no timeout is used. See 35499d9

Before After
before after

Asana

@hgray-instawork hgray-instawork requested a review from a team February 21, 2025 00:47
Copy link
Collaborator

@flochtililoch flochtililoch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is setting 100ms necessary, or would it work just as well if setting 0, basically to schedule the code for the next tick?

@hgray-instawork hgray-instawork merged commit 248e31a into master Feb 26, 2025
6 checks passed
@hgray-instawork hgray-instawork deleted the hardin/navigation-performance branch February 26, 2025 19:10
hgray-instawork added a commit that referenced this pull request Feb 27, 2025
Resolving the navigation glitch seen in the demo app after updating
`expo` and `react-native`.

Values below 2 showed the glitch always. Values between 2-5 showed the
glitch often. So far a value of 10 has not exhibited the glitch.

| Before | After |
| -- | -- |
|
![before](https://github.com/user-attachments/assets/a20b7aa0-785f-4874-8d7d-d5157de26cfc)
|
![after](https://github.com/user-attachments/assets/b97e2b30-e150-4c59-b5f0-09c42543d38c)
|


Relates to
- #1092
- #1096

[Asana](https://app.asana.com/0/1204008699308084/1209518863613015)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants