Navigation in my application feels a little janky, because there's always a period of time (Even if it's just a split second) that the page is empty, between initialization and the first render call completing.
I've done everything I can to make sure the component can render as fast as possible. I have my images cached, and all data is available before navigating to the component in my redux store. I'm getting a logged time of 51ms between constructor
and componentDidMount
which seems negligable, but it's enough that you can visually see the component flash onto the screen.
I'm wondering if there's a way to preload a component and making sure that it's rendered before showing the screen. Since this is a react-native application, I can't just "Render it offscreen" and then use it when I'm ready, as far as I know, but I may be wrong. However, we also don't want all of our screens to just be rendered constantly.
Being able to do something like..
Preloader.preload(<MyComponent />)
.then(navigate('myComponent'))
Would be really nice. Sometimes components have large lists, that take awhile to render. Being able to have the list already there when the view slides into the screen would make an application's flow feel so much better.
WebView
component, so rendering takes on the order of seconds instead of milliseconds. I have used the "render it offscreen" technique withoutreact-navigation
, and that works. However, I would like to make it work withreact-navigation
. – Attractive