How To Disable PanResponder on Child Component - React Native

Question

Friend I will take oneView of Parents and Inside the View I take one TouchableOpacity. I Will Added panResponder on main View, And when touch of main view its working fine. But TouchableOpacity is not working, I want to remove panResponder on TouchableOpacity. So that TouchableOpacity is work.

Code :

    this._panResponder = PanResponder.create({
      // Ask to be the responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,


      onPanResponderGrant: (evt, gestureState) => {
        // The gesture has started. Show visual feedback so the user knows
        // what is happening!

        // gestureState.d{x,y} will be set to zero now

        // this.toggleModal()
      },
      onPanResponderMove: (evt, gestureState) => {
        // The most recent move distance is gestureState.move{X,Y}

        // The accumulated gesture distance since becoming responder is
        // gestureState.d{x,y}
        console.log('onPanResponderMove');
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {
        // The user has released all touches while this view is the
        // responder. This typically means a gesture has succeeded
        console.log('onPanResponderRelease');

        this.toggleModal()
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // Another component has become the responder, so this gesture
        // should be cancelled

        console.log('onPanResponderTerminate');

      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // Returns whether this component should block native components from becoming the JS
        // responder. Returns true by default. Is currently only supported on android.

        console.log('onShouldBlockNativeResponder');

        return true;
      },
    });
 }

Pan added on Parents View :

render() {
    return (
      <View {...this._panResponder.panHandlers}>
        <TouchableOpacity onPress={this._onPressButton}>
         <Image
          style={styles.button}
          source={require('./myButton.png')}
         />
       </TouchableOpacity>
      </View>
    );
  },

The Button OnPress event isn't working when adding Pan on mainView.

Hope this link willl help you [Maintain Touchable Items with a Parent PanResponder](http://browniefed.com/blog/react-native-maintain-touchable-items-with-a-parent-panresponder/) — Ajith Pandian, Aug 22 '17 at 07:01

score 9 · Accepted Answer · answered Aug 22 '17 at 10:27

9

Change this line then inner Touchables will get the event.

when returning true, it will prevent child from become responder.

  onStartShouldSetPanResponderCapture: (evt, gestureState) => false,

From document:

So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

answered Aug 22 '17 at 10:27

Val

21,938
10
68
86

1

I have also same problem on the FlatList. FlatList add in the parents view and the parents view have pan gesture. but when click on FlatList then parents view gesture always called. – Kirit Modi Feb 09 '18 at 10:26
`onStartShouldSetPanResponderCapture` doesn't work well in iOS 14.0.1 – xi.lin Dec 07 '20 at 16:13
doesnt work for me. onStartShouldSetPanResponderCapture makes absolutely no difference – showtime Jul 02 '22 at 15:37

How To Disable PanResponder on Child Component - React Native

1 Answers1