Anwar Hussain
Anwar Hussain

Reputation: 495

How can i disable swipe back in react native navigator

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

Upvotes: 9

Views: 9810

Answers (2)

David
David

Reputation: 2821

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: {}
  };
}

Upvotes: 11

Mihir
Mihir

Reputation: 3902

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.

Upvotes: 9

Related Questions