Push page transition could destroy and recreate whole component again

[skywalkerlw]

My application needs to keep all screens in the stack mounted. MainContainer is my main component (embedded with a list). Click any list item will refresh and show another list within this component. I wrapped with Stack like below and found each time I click any item, it has to unmount MainContainer first then create/mount again, rather than state change and re-rendering.

I notice you say:

"Many stack navigators keep all screens in the stack mounted when you push new screens onto the stack. This library is different, in that it unmounts the previous route's screen when a new one is pushed on. If you have state that needs to be maintained even after a screen unmounts, you will need to store that state in a parent component that contains the stack or possibly use another state management solution such as AsyncStorage, Redux, or MobX."

How can I do the way of "you will need to store that state in a parent component that contains the stack ", could you give some code snippets here?

      <Provider store={store}>
        <APIServiceProvider baseUrl={apiEndPoint}>
          <NativeRouter>
            <Stack>
              <Switch>
                <Route
                    path="/(aa)/:bb/"
                    render={(routeProps: any) => (
                      <MainContainer
                        {...routeProps}
                      />
                    )}
                  />
              </Switch>
            </Stack>
          </NativeRouter>
        </APIServiceProvider>
      </Provider>

Thanks

[Traviskn]

Hi @wangbourne, something to keep in mind is that the Stack component works almost exactly like react-router's Switch component. The only thing the Stack component does differently is add a transition animation. I notice in your code example you have a Switch nested inside your Stack, that shouldn't be necessary. The un-mounting and re-mounting behavior you're seeing is the exact same behavior you would get if you just used a plain Switch component for react router.

There a many potential ways you could refactor, for example rather than putting your MainContainer in the Switch, you could put the Switch inside the render method of your MainContainer. Unfortunately I won't be able to help debug or refactor every potential situation, the best I can do is give some high level advice.

What I'm hoping to do is create more example applications in the examples/ folder of this repository to demonstrate more advanced patterns.