Switching tab re-mounts the component within RN 0.24 about navigation-rfc

[ptomasroos]

@hedgerwang created a great example how to keep Scene's mounted with tab bar items today.
facebook/react-native@1dc33b5#diff-4447daf3edd577198f620da6f8ac5cc0R256

For me this can be closed.

[jmurzy]

That is correct. Transitioner and AnimatedView (deprecated) use style interpolators to animate a scene in and out. Your components that are off-screen are not unmounted unless you explicitly remove the route that renders that particular scene from navigationState.

@hedgerwang killed the old examples in UIExplorer. Here's a newer example he recently pushed that uses NavigationCardStack.

@ptomasroos What React Native version are you using? NavigationExperimental is a moving target and I recommend you upgrade to v0.28.0-rc.0 and see if that helps. You should not be losing component state i.e scroll position. These issues were addressed in #61.

🍺

[ptomasroos]

Thanks for your efforts for explaining and responding! I will upgrade!

[jmurzy]

This is likely a dupe of #61. 🤔

Update—

I believe @hedgerwang is working on this. Does this fix your issue? facebook/react-native#81c62c5f

[ptomasroos]

We're facing this problems as well.
How would one go about keeping certain scene's / routes always mounted on a tabbar for instance between tab switching @hedgerwang @ericvicenti ? Very well known behaviour which was supported in Navigator.

[jmurzy]

@ptomasroos Are you losing component state when you set index to a different route? Here's a sample implementation of a tabs reducer that keeps components mounted across tab switches. There's also a sample app in the repo if you want to see it in action.

If you can tell me how to reproduce the issue you're having, I might be able to help.

🍺

[grabbou]

I think it's more the issue that render() method of the Navigator (in official UIExplorer examples) uses plain View and just {this.renderTab} kind of thing, which will unmount the component on tab change anyway.

I've been successfully using react-native-tab-navigator to handle tabs instead and that's been working well.

[ptomasroos]

@jmurzy images gets removed and causes redownloading of images on switching tabs. Very noticeable. Instead vs being on a stack and going back one scene where the underlying Card is displayed already rendered.

Another thing how this is noticed is that scroll position of a list view is 'forgotten' between switching tabs because its unmounted. Hence I would like to avoid the unmounting :)