Can navigator pop gesture be disabled?

[syousif94]

I want to disable the swipe down to dismiss gesture for a navigator scene that's floated in from the bottom, but I can't figure out if it's possible.

Also, componentWillUnmount() does not fire if the view is dismissed with a gesture.

[mwilc0x]

@syousif94 I don't believe there is currently a way to do this.

I was playing around with this and was able to get something working, but I'm not sure if it is the right fix. You would configure to disable it like so:

var sceneConfig = Navigator.SceneConfigs.FloatFromBottom;
sceneConfig.gestures.pop.disabled = true;

this.props.navigator.push({
  title: 'Search',
  component: SearchList,
  sceneConfig: sceneConfig
})

I had to change one line in Navigator.js to get this to work:

Navigator.js:

_matchGestureAction: function(gestures, gestureState) {
  if (!gestures) {
    return null;
  }

  var sceneConfig = this.state.sceneConfigStack[this.state.presentedIndex];

  if (sceneConfig.gestures.pop.disabled || this.state.isResponderOnlyToBlockTouches || 
      this.state.isAnimating) {
    return null;
  }

  // ...

not sure about the componentWillUnmount() issue..

@ericvicenti how do you handle adding additional configuration to a sceneConfig? Do you think the above could work?

[ericvicenti]

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. That might be a bug

[syousif94]

@ericvicenti thank you!

[mwilc0x]

@ericvicenti awesome, that works!

So how about disabling only for a select few and not all screens? It seems like gestures would then need to be opt-in?

configureScene={(route) => ({
  ...route.sceneConfig || Navigator.SceneConfigs.FloatFromBottom,
  gestures: route.gestures
})}

And then when pushing a route:

// enable back gestures
this.props.navigator.push({
  title: 'Search',
  component: SearchList,
  sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
  gestures: Navigator.SceneConfigs.FloatFromBottom.gestures
})

or ..

// disable back gestures
this.props.navigator.push({
  title: 'Search',
  component: SearchList,
  sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
  gestures: null // or just don't include this
})

[mwilc0x]

@ericvicenti this will call componentWillUnmount with pop gesture:

if (transitionVelocity < 0 || this._doesGestureOverswipe(releaseGestureAction)) {
  this._transitionToFromIndexWithVelocity(transitionVelocity);
} else {
  this._handlePop();
  this._transitionToToIndexWithVelocity(transitionVelocity);
}

[syousif94]

@mjw56 you can already extend objects like this (how I'm doing it)

this.props.navigator.push({
  title: 'Search',
  component: SearchList,
  sceneConfig: {
    ...Navigator.SceneConfigs.FloatFromBottom,
    gestures: {}
  }
})

[mwilc0x]

@syousif94 ah, yes that works 👍

So then what does your configureScene look like for the Navigator component?

Right now I have this working:

// extend off route.sceneConfig if provided, otherwise default to FloatFromRight
configureScene={(route) => ({
  ...route.sceneConfig || Navigator.SceneConfigs.FloatFromRight
})}

[syousif94]

@mjw56 same as yours essentially

[ericvicenti]

👍

@mjw56 , Navigator should call componentWillUnmount on a scene after the pop transition completes. If that doesn't work, could you re-file as another issue?

[HendrikPetertje]

Hey guys.
In case you want to remove the anoying gesture

Check the code from here: https://rnplay.org/apps/HPy6UA
This is an attempt to change the animation and he in this case stretches the gesture space to the whole screen.. but you can remove the gesture to here.

Replace:

var CustomSceneConfig = Object.assign({}, BaseConfig, {
  // A very tighly wound spring will make this transition fast
  springTension: 100,
  springFriction: 1,
  // Use our custom gesture defined above
  gestures: {
    pop: CustomLeftToRightGesture,
  }
});

With:

var CustomSceneConfig = Object.assign({}, BaseConfig, {
  gestures: {
    pop: null,
  }
});

But in your case you could call the method you want from within the custom pop gesture

[shahankit]

Setting gestures to {} or null sometimes gave me error when a component using a scroll view in pushed. I used the following and it solved that issues sceneConfig.gestures.pop.edgeHitWidth = 0;

[shahankit]

@mjw56 @ericvicenti @syousif94 Can you please help, There is a problem with my solution above and other specified don't work well somehow. I want to keep pop gesture for some screen and not for the rest. So for some I set edgeHitWidth to 0 and for the rest 30/150 depending on direction. After I push any component with nonzero edgeHitWidth all the others pushed with zero edgeHitWidth also now have pop gesture. Somehow only single of Navigator.SceneConfig.FloatFromXYZ is being used across all component. Changing in one persists the changes across all instead of assigning new sceneConfig to each component push.