CODEWITHSUNDEEP
reactjsreact-nativestack-navigator
Neha
Neha

Reputation: 389

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?

Upvotes: 2

Views: 4301

Answers (4)

Nagibaba
Nagibaba

Reputation: 5358

It might help to reset navigation:

navigation.reset({ index: 0, routes: [{ name: 'HomePage' }] })

Upvotes: 0

hong developer
hong developer

Reputation: 13906

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
    }
  }

Upvotes: 0

Abdeen
Abdeen

Reputation: 932

Problem

Your code is fine, thing is when you navigate from Home -> Screen 3 to say Profile the navigation stack has the history of Screen 3 being the last route on stack, so when you head back to Home it will show you Screen 3 not Screen 1.

Solution

A simple approach to this would before you call this.props.navigation.navigate('Profile') you can clear the stacked routes, like so:

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);

Note: Am not sure what version of react-navigation you are using so check the docs here for the right version and right usage, but this should give you an idea of how to do it.

Hope this Helps!

Upvotes: 0

goldvenus
goldvenus

Reputation: 938

The screen names of BottomTabNavigator and StackNavigator should not be the same.

You can change this code like below.

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

Upvotes: 1

Related Questions