search

react-navigation / rfcs

RFCs for changes to React Navigation
Other
88 stars 16 forks source link

Idea: Preloading #73

Open Karsens opened 5 years ago

Karsens commented 5 years ago

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)

trevorwhealy commented 5 years ago

Yes, this would be incredible!

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

slorber commented 5 years ago

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 commented 5 years ago

51

mfbx9da4 commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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