title: How to cancel TouchableOpacity responder when touch is dragging instead of pressing?
body: <p>I am trying to implement my own react-native swiper component but the swiper stops working immediately when TouchableOpacity is added inside the Animated.View. I think the Touchable will become the responder and my own panResponder will not work. (You can see the Opacity of the pressing)</p>
  
  <p>The problem is that I want the touchable to work, but if the touch to the screen is not one tap but dragging then I want the swiper to work. (This behavior is working when using scrollView with Touchables)</p>
  
  <p>Here: <a href="https://stackoverflow.com/questions/37610705/make-touchableopacity-not-highlight-element-when-starting-to-scroll-react-nativ#new-answer">Make TouchableOpacity not highlight element when starting to scroll [React Native]</a>
  is said that: "A scroll gesture should cancel the TouchableOpacity touch responder" But how this is done?</p>
  
  <p>For testing purposes I have tried to capture the responder to my Animated.View with this:</p>
  
  <pre><code>onStartShouldSetResponderCapture: () =&gt; true,
  </code></pre>
  
  <p>But it seems to have no effect (I was expecting that with this the swiping would work but the touchable not).  </p>
  
  <p>Here is the sample code (If you change the TouchableOpacity to View the swiping is working):</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Animated, PanResponder, Dimensions, TouchableOpacity, Text } from 'react-native';
  
  class App extends Component {
  
    componentWillMount() {
      const position = new Animated.ValueXY();
      const panResponder = PanResponder.create({
        onStartShouldSetPanResponder: () =&gt; true,
        onPanResponderMove: (event, gesture) =&gt; {
          position.setValue({ x: gesture.dx, y: 0 })
        },
        onPanResponderRelease: (event, gesture) =&gt; {
            Animated.spring(this.state.position, {
                  toValue: { x: 0, y: 0 }
                }).start();
        }
      });
      this.state = { panResponder, position };
    }
  
    render() {
      return (
            &lt;Animated.View style={[this.state.position.getLayout(), styles.viewStyle]} {...this.state.panResponder.panHandlers}&gt;
                &lt;TouchableOpacity style={styles.touchableStyle}&gt;
                       &lt;Text&gt;Swipe not working&lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
            &lt;/Animated.View&gt;
      );
    }
  }
  
  const styles = {
    viewStyle: {
      position: 'absolute',
      top: 0,
      bottom: 0,
      width: Dimensions.get('window').width
    },
    touchableStyle: {
      backgroundColor: '#ddd',
      height: 100,
      borderWidth: 5,
      borderColor: '#000',
      justifyContent: 'center',
      alignItems: 'center'
    }
  };
  
  export default App;
  </code></pre>
  
  <p>Please help me, if you have solution. I have trying to get this to work for some time now.</p>