Search code examples
reactjsreact-nativestack-navigator

React-Native how to clear inner navigation stack?


I'm new to react-native and am developing an app which has bottom tab navigation.For implementing this , I've used react-navigation-material-bottom-tabs ,which is working perfectly fine.Like I have 3 screens ,say Home,Profile and About in the bottom tab navigator.But in the Home screen I have multiple screens flow to be implemented.For that I used Stack Navigator ,which is also working fine. So my app flow is like Home-> Screen1-> Screen2-> Screen3 Where I'm facing problem is that suppose I'm on Screen3 and then I switch to Profile screen from bottom navigation ,and then again switch to Home screen ,

I should be able to see Home Screen there but currently it shows Screen3

It is where I left.What should I do ? Following is my code

App.js (which contains bottom navigation)

export default BottomTabNavigator = createMaterialBottomTabNavigator(
{
Home: {
  screen: HomeRoutes,
  },
},
Profile: {
  screen: ProfileScreen,
},
About: {
  screen: AboutScreen,
 },
},
{
initialRouteName: 'Home',
},
);

HomeRoutes.js

export default createStackNavigator(
{
  Home:{
     screen: Home,
   },
  Screen1: {
     screen: Screen1,
   },
Screen2: {
    screen: Screen2,
  },
Screen3: {
  screen: Screen3,
   },
},
{
  initialRouteName: 'Home',
},
);

Or maybe can I do something like this ,when I navigate to screen1 from home screen, the bottom tab navigation is not shown to the user?


Solution

  • I think you want to see the home screen again when you press the home tab again. Then this can solve the problem by comparing the values on the current screen when you press the Home tab again.

    last Screen in HomeRoute

    import { StackActions } from 'react-navigation';
    ...
    let chk = false
    ...
     componentDidUpdate(){
        if (!chk){
          chk = true // Change value when rendering screen
        } else {
          //The popToTop action takes you back to the first screen in the stack, dismissing all the others.
          this.props.navigation.dispatch(StackActions.popToTop()); 
          chk = false //Initialization
        }
      }