You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This PR is an exploration of what can I do in order to improve animation performance. Most of the problems stems from the fact that devs are wrapping FlatList/FlashList/LegendList with KeyboardAvoidingView + padding behavior:
The issue with such combination is that every frame we change the layout of inner list, which in its turn will re-run calculation of viewport -> trigger re-render -> slow down js thread so in the end we'll have junky animation.
The idea of this PR is to explore a possibility of ignoring those frequent updates so that we can deliver a better performance. The first idea is to wrap inner components with react-freeze when keyboard is animating. But from my observation in example app it doesn't give such a significant boost. I'll explore this way further and opening this PR just to track the progress.
📢 Changelog
JS
iOS
Android
🤔 How Has This Been Tested?
📸 Screenshots (if appropriate):
📝 Checklist
CI successfully passed
I added new mocks and corresponding unit-tests if library API was changed
The original idea was to pause all JS updates when keyboard animation happens and I thought to use react-freeze for that, but in reality when it freezes/unfreezes the component I had very big peaks of JS thread (it seems like it mounts/unmounts elements, so I abandoned this idea).
Instead I created ClippingScrollViewDecorator component which extends scrollable area (similar to contentInset property) and doesn't cause layout changes (which VirtualizedLists are sensitive to).
So now KeyboardAwareScrollView/KeyboardChatScrollView are powered by this component and it they have stable 120 FPS 😎
So the only issue remains with KeyboardAvoidingView, which almost always changes layout of the component. But this is how this component is supposed to work and I don't know if I can fix it or not.
What I can say is that the idea with freeze was very perspective, but in reality it doesn't work well. Maybe in future I'll get back to this idea and will find a way to pause updates when keyboard is animating.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
kirillzyusko
added
enhancement
📜 Description
💡 Motivation and Context
This PR is an exploration of what can I do in order to improve animation performance. Most of the problems stems from the fact that devs are wrapping
FlatList/FlashList/LegendListwithKeyboardAvoidingView+paddingbehavior:The issue with such combination is that every frame we change the layout of inner list, which in its turn will re-run calculation of viewport -> trigger re-render -> slow down js thread so in the end we'll have junky animation.
The idea of this PR is to explore a possibility of ignoring those frequent updates so that we can deliver a better performance. The first idea is to wrap inner components with
react-freezewhen keyboard is animating. But from my observation in example app it doesn't give such a significant boost. I'll explore this way further and opening this PR just to track the progress.📢 Changelog
JS
iOS
Android
🤔 How Has This Been Tested?
📸 Screenshots (if appropriate):
📝 Checklist