How can i disable swipe back in react native navigator

Question

I'm using react native navigator for communication between two screens login and landing screen when i do logout from the landing screen even i can swipe back to landing screen from login screen so how can i disable swipe back in react native navigator

Answer 1

Using immediatelyResetRouteStack() will not display any transition. To push a new scene and disallow swipe back have your configureScene return this:

return {
  ...CustomNavigatorSceneConfigs.FloatFromRight,
  gestures: {}
};

My configureScene function looks like this:

configureScene: function(route) {
  if (route.sceneConfig) {
    return route.sceneConfig;
  }
  return {
    ...CustomNavigatorSceneConfigs.FloatFromRight,
    gestures: {}
  };
}

Answer 2

I assume you have done something like this-

Your navigator looks similar to this-

<Navigator 
  style={styles.container} 
  initialRoute={{ name: 'signin', index: 0 }} 
  renderScene={ this.renderScene } 
  configureScene={ () => { return Navigator.SceneConfigs.PushFromRight; }}
/>

And when you click on "Sign in" button-

this.props.navigator.push({name: 'componentName'});

Instead of push() use immediatelyResetRouteStack() -

this.props.navigator.immediatelyResetRouteStack([{name: 'componentName'}]);

This will reset the routeStack and prevent going back to the login screen.

Similarly, when you log out of your landing screen, use immediatelyResetRouteStack() and prevent user to go back to landing screen.