Don't render twice when goBack and re navigate on same screen

[thomasarbona]

I use StackNavigator for a small application with some screens.

Current Behavior

When I am on screen B, goBack on screen A (B was unmount) and re navigate on B, B is re-mount.

Expected Behavior

I expect that the StackNavigator keep screen B mount so when I re navigate on B it don't render it twice.
How to do that ? Should I navigate without goBack ? (I use fade transition)

Your Environment

software	version
react-navigation	1.0.0-beta.11
react-native	0.43.4
node	6.10.3
npm or yarn	3.10.10

[spencercarli]

Here's a snack to go along with this.

I'm not sure why you would want the behavior you described as going back would imply you're not longer interested in that screen.

I also imagine it would add a host of issues with tracking navigation state (what happens when you go from screen 1 to screen 2, back to screen 1, then to screen 3 - does screen 2 get unmounted?)

[sseyha]

@spencercarli
I'm not sure about @thomasarbona purpose.
But in my thought, he might not want to reload the content data again and again.
And that is what i want either, because i don't want user stuck on reload the content of screen page as always when they navigate from screen to screen.
Hope it will have the solution. Regards, :)

[spencercarli]

@sseyha ah that makes complete sense! Hadn't thought about that - thanks for clarifying.

I'm typically using Redux so in cases like this I would have saved the data to the store after the first screen mount and then any subsequent screen mounts would use the old data and refresh in the background.

[sseyha]

@spencercarli
Wow, you have a great idea. You blow my mind now.
It's a bit hard for me, because i'm new with React and Redux as well.
If you don't mind, could you please share us small project about this?
It will be honor and save my day of spending on React Navigation.
Please... :)

[spencercarli]

I don't have any small examples directly related to this but you can see this strategy in action in this repo.

That repo is broken down into a bunch of branches (it's for a course) but the final app can be found on the module-7-lesson-4-upload branch.

[sseyha]

@spencercarli I will learn more about redux. However, Thank so much for your guide. Appreciate!

[thomasarbona]

Thanks for your answers. Like @sseyha said, I don't want to reload the component again and again, but my problem with the reloading isn't about reloading any data (effectively stored in redux) but is to reload a few GLView components that take time to render.
I can't avoid this because react-navigation creates a new instance of screen B when I return on it.

[spencercarli]

Ah, I see. I'm not sure of a solution to this issue. I suppose I've seen a similar issue when pushing a screen with a map onto the stack. I'll do some thinking and if I can think of anything useful I'll try to add it to this thread.

[sseyha]

@spencercarli You how to refresh or reload the current active page of drawer?

[farzd]

related i guess : #2365

[nhuthan]

+1

[callmejm]

+1 , don't want to reload the component again and again when re-enter the screen. Hope there have a solution for this. Because I also finding solution Close screen / unmount screen

[kelset]

Pinging OP @thomasarbona since this issue has not been active for a while, and it's related to an old version of the lib.

Please let me know if you want this to remain open; if I get no answer in the next 7 days I will close it.

Moreover:

When I am on screen B, goBack on screen A (B was unmount) and re navigate on B, B is re-mount.

This is literally the way a stack is supposed to work.

If there are data you need to manage/show in the second screen, you need to use a state manager like Redux. Or you could use a tab navigator without showing the tabbar.

[kelset]

Hi there @thomasarbona ,

In an effort to cleanup this project and prioritize a bit, since this issue had no follow up since my last comment I'm going to close it.

If you are still having the issue with the latest version (especially if it's a bug report) please check the current open issues, and if you can't find a duplicate, open a new one that uses the new Issue Template to provide some more details to help us solve it.

[ShamarYarde]

To the above posters that want to reload the content data, you can create a function which resets the data to their original state. An example is as follows:

onPress(){ this.setState({ value1: 'value1', value2: 'value2' } }

[emilemoureau]

Hello! Someone found a solution?