How can I keep mounted a screen without destroying its state and navigate between screens back & forth in react navigation 5?

Question

I have a video call screen in my react native app. I want to user to go back to app from video call screen and keep using app during call but when I try to go back to a screen in stack navigator video call screen gets unmounted and lost its state though call still running background. I want to keep mounted the video call screen and navigate between the apps without destroying the screen state. Modal is not preferable in my case. Since using react navigation 5 can't use switch navigator also. Thanks in advance.

Answer 1

I did not exactly kept the screen mounted for my case but i used another approach that will require using Redux,First When you open your app the index.js gets called then App.js but while we cannot use Redux in App.js the next we call mostly is navigation component, so if you use navigation v5 or any navigation component you can pass the video call component and use redux to pass the boolean when to show or hide that video call and also to pass the data to the call, for example with react navigation v5:

 <NavigationContainer>
    {reduxStateShowCall?<VideoCallComponent data={dataStoredInRedux}/>} 
 <Stack.Navigator>
      <Stack.Screen name="HomeScreen" component={Home}/>
      <Stack.Screen name="OtherScreen" component={OtherScreen}/>
  </Stack.Navigator>
 </NavigationContainer>

So when you pass value true to reduxStateShowCall the VideoCallComponent will be rendered above all the screens mounted in the stack navigator and you can navigate between the screens inside that NavigationContainer while the call component is rendered ,when you pass value false to reduxStateShowCall it will not be rendered.