React-native component cache (or prevent unmounting) (react-navigation)

Question

So my question is quite simple.

I have a navigation by react-navigation. Scenario

1. navigate from screen A to screen B.
   - each components in screen B are mounting / creating
2. go back from B to A
   - each components from screen B are unmounting
3. navigate once again from A to B
   - each components from screen B are mounting again.

IS there any way to prevent that? Data are not a problem, Im keeping them in redux store. The case is with components.

In my app user will keep switching between two screens, and I do not want to build one of them every single time.

Any ideas?

Answer 1

Well, this is not a perfect solution,

But I have also searched a lot but could not find this thing to work.

So as handy trick, you can use any Tab Navigator and hide the Tab Bar.

Because There is only Tab Navigator which maintains all screens in its stack even if you left the screen.

See this,

export const MainTabs = createBottomTabNavigator(
    Home: {
           screen: Home,
           navigationOptions: () => {
               return { tabBarVisible: false };
           },
    }
    Dashboard: {
           screen: Dashboard,
           navigationOptions: () => {
               return { tabBarVisible: false };
           },
    }
)

This will maintain all screens in Tab and you'll also not see any Tabs.