How does this package work?
lewatt23 opened this issue · comments
Hello, I just stumble on this package, and am curious on how the package works behind the wood to optimized the navigation screens, please can the author explain this me? thanks
Hey, thanks for the question. From the readme:
What does it do?
Delay rendering a component until interactions are complete, using InteractionManager. Then it fades in your screen.
Basically, you pass it a screen, and it won’t render that screen until any active interactions have finished. For example, if react navigation is sliding open a new item in a stack, this library will delay actually rendering that screen until the navigation transition is done. This helps ensure that your navigation transition isn’t choppy, since it prevents clogging up the JS thread.
It also adds a fade-in transition when your screen is ready to display, as well as allowing you to optionally render a placeholder screen in the meantime.
Wawoo thanks, i feel like it can be helpful in my current project, is there a way to add it globally? cause I have close to 20+ screens and most of them are doing some sort of interactions.
Unfortunately there’s no global way since react navigation doesn’t have its own way of handling this problem. You’ll have to wrap each screen in the file when you export it, as shown in the readme. This allows you to set specific placeholders for different screens, too. You could wrap all 20 screens in just a few minutes of copy-and-pasting this type of thing at the end of each of your screen files:
export default optimizeHeavyScreen(YourScreen)okay thanks :)
No problem!