CODEWITHSUNDEEP
androidreact-nativereact-navigation
Baterka
Baterka

Reputation: 3714

React Navigation - Unmounting previous StackNavigator's screen when new is opened

I am using React Navigation (https://reactnavigation.org) for my React Native app for Android.

I made similar flow as is described in: https://reactnavigation.org/docs/en/auth-flow.html

I added SignUp and ForgottenPassword screens. App starts on SignIn screen (When not logged in) and you have option to go to SignUp screen, but here I see small problem. The previous screen (SignIn) is not unmounted and running on background. This is not big problem when using this small example but as my app will grow I will get many nested screens and I dont want all of them to be loaded on background.

Easy question: How to unload (unmount component) after I switch to different screen and load (mount) it back after I hit back button?

Upvotes: 1

Views: 3207

Answers (1)

Martin Janeček
Martin Janeček

Reputation: 585

I'd say this is just how mobile navigation works. The navigation stack is managed automatically by React Navigation, and it's documented here. Imagine an iOS app, where you can swipe back to get to the previous screen - you can see the previous screen during the swipe. This wouldn't be possible if the component did unmount.

You can manage the navigation stack using the navigation prop though: see navigation prop reference. Using navigation.replace should properly unmount the component, as it's replaced by a new route and therefore is not needed anymore (if you didn't replace it with the same route, but with different parameters).

Upvotes: 2

Related Questions