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: react-navigation/react-navigation#5437)

[trevorwhealy]

Yes, this would be incredible!

I completely agree with your UX sentiment, @EAT-CODE-KITE-REPEAT

[slorber]

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.

[satya164]

#51

[mfbx9da4]

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.

[maxedahlgren]

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.

[VadimZP]

@maxedahlgren I see that this solution works only for tabs, rather than screens