rfcs
rfcs copied to clipboard
react-navigation
Idea: Preloading
Hi, this is not really an issue but more of an idea. When you navigate to a new screen for the first time, the component will be mounted and rendered. But then it stays in the background, also if you leave the page. I know this because the second time (going back to the screen), it is much faster! This is certainly the case if there are some remote images on the page.
I care very much about the UX and it's not nice if the user sees images being loaded. That's why I was thinking... what if you could already mount and render the page before going there? Then the first time experience would be exactly the same as a second time experience and would generally improve the apps experience.
instead of this.props.navigation.navigate(options) we need something like this.props.navigation.preload(options).
I don't really know much about how this would and could work behind the scenes, so I just post it here. I'm very curious if this is even possible and easy to implement or very hard.
(Original post: https://github.com/react-navigation/react-navigation/issues/5437)
Yes, this would be incredible!
I completely agree with your UX sentiment, @EAT-CODE-KITE-REPEAT
Agree this could be a nice feature and enable some new kind of mobile ux
Preload could return a promise which would permit to give some user feedback is preloading takes time. Like navigating a link on GitHub which displays a top progress bar.
We could also imagine to load screen data, for exemple using Suspense and attempting to make sure the preloaded screen won't contain any spinner.
This would make a huge improvement to UX. The solution noted in #51 of deferring rendering is more of a hack.
Preloading and recycling views seems like a primitive which is missing from react native in general. I wonder if some inspiration could be borrowed from FlashList.
I came across this thread while troubleshooting a related issue and found the desired behaviour can be achieved by setting the screen option lazy: false.
@maxedahlgren I see that this solution works only for tabs, rather than screens
