How to disable back swipe gesture in react native navigator

Question

I am developing one iOS application in react native. I have used Navigator component of react native. When I am pushing user from one screen to another then user can able to pop the screen by swipe on the left edge of the screen. I know how to disable it in native iOS code. However is there any way we can Stop that behavior in React-native app.

Thanks,

Answer 1

Here's great way to do it.

You do not need to hack the node module!!

define a new scene configuration.

const NoBackSwipe ={
  ...Navigator.SceneConfigs.HorizontalSwipeJump,
    gestures: {
      pop: {},
    },
};

You can copy whatever SceneConfig they have written, and just set the pop gesture to {}.

This way it will only affect the scene you want it to, and you can still use all the default configs as well.

_configureScene(route){
   switch (route.name){
     case 'Foo':
       return NoBackSwipe
       break;
     case 'Bar':
       return Navigator.SceneConfigs.HorizontalSwipeJump
       break;
   }
};

The normal HorizontalSwipeJump still has a backswipe, and the custom NoBackSwipe is not allowing back swiping...

<Navigator 
 ...other props...
 configureScene={ this._configureScene }
/>

boom.

Answer 2

I solved it below way,

In React Project I have node_modules folder. There is code for Navigator component at this path,

/node_modules/react-native/Libraries/CustomComponents/Navigator/Navigator.js

In that file There is actions for Gestures on Navigations. By removing 'pop' gesture from there stops poping back when slide in from left edge of the screen.

Just replace below code,

var GESTURE_ACTIONS = [
  'pop',
  'jumpBack',
  'jumpForward',
];

with this code,

var GESTURE_ACTIONS = [
  'jumpBack',
  'jumpForward',
];

Answer 3

The scene configs are objects with lots of overridable properties in them. If you want to start with FloatFromBottom and disable gestures, you can do this:

configureScene={() => ({
  ...Navigator.SceneConfigs.FloatFromBottom,
  gestures: {}, // or null
})

The component should unmount when dismissing with a pop gesture.