[PanResponder] how to unbind a <View> and/or unmount it.

[amitverma]

How can I unbind PanResponder on a . Also, how do I unmount a altogether? I tried to remove it by setting it to null but that would break in case of further renders.

I want to remove PanResponder from a node after I move it out of a .

handlePanResponderEnd: function(evt: Object, gestureState: Object){
        if (Math.abs(this.translate) > width/4){
            var setoff = -(2 * width);
            var that = this;
            this.nextItem = <View style={styles.container} ><Story data={this.data[that.state.currentItem + 2]} /></View>;
            this.setState({ left: setoff, currentItem: this.state.currentItem + 1 });
            // this.setPanResponder();  

        } else {
            this.setState({ left: this.translate });    
        }   
    }

[PhilippKrone]

Hi amitverma,

your post is not showing correctly, as you are not using the markdown syntax correctly for code - could you fix that please?

If you want to disable a PanResponder, you can just set

  _handleStartShouldSetPanResponder: function() {
    return false;
  },

  _handleMoveShouldSetPanResponder: function() {
    return false;
  },

Regards Philipp

[amitverma]

Hey Philipp,

I wouldn't want to return false. I want a way to remove the binding from the <View> If that is not possible, I'd appreciate if you could tell me how to unmount this View.

[amitverma]

Is there no way to unmount a <View> or to remove panResponder?

[brentvatne]

render() {
  if (this.state.bindPanhandlerToView) {
     return <View {...this._panResponder.panHandlers} />
  } else {
     return <View />
  }
}

If this doesn't work, ping me with a runnable example and I'll reopen this issue @amitverma :smile:

[TroySK]

Hey @brentvatne! That solution didn't work for me. Is there an alternative? I want to disable pan responders depending on a state or prop.

I'm trying to replicate the Tinder UI and want to disable pan responders when the detail view of the card is active. Looking for pointers! 😄

[kohver]

This is so not intuitive that I can't just do this:

render() {
    return <View {...(this._panResponder && this._panResponder.panHandlers)} />
}

My workaround is:

    onStartShouldSetPanResponder: () => !!this._panResponder

[arnihermann]

I have this issue as well. I'm using a third party component that has a disabled property (https://github.com/oliviertassinari/react-swipeable-views/blob/master/packages/react-swipeable-views-native/src/SwipeableViews.animated.js#L384) but it seems once the panHandler has been set, I cannot disable it by passing a disabled={true} to the third party component. This behavior breaks my mental model of how React components should behave. I briefly looked at how this might be fixed properly but I'm a bit lost, so if anyone could point me in the right direction I'd be happy to work on this problem.

[kohver]

@arnihermann did you try my workaround with onStartShouldSetPanResponder?

[arnihermann]

Yeah that didn't work for me for some reason. I did something like this:

      onMoveShouldSetPanResponder: (event, gestureState) => {
        if (this.props.disabled) {
          return false;
        }
      ...
    }