title: Stop propagation of press event / prevent bubbling on React-Native app when modal is open
body: <p>I currently work on a React-Native mobile application.</p>
  
  <p>I have a <code>PanResponder</code> set on my main view. My main view creates a component that contains a <code>Modal</code>.</p>
  
  <p>My issue is when the <code>Modal</code> is open, the <code>PanResponder</code> which is below the modal (in the main view) still responds of the swipe events, and I'm trying to block them.</p>
  
  <p>I tried to create a <code>PanResponder</code> in the <code>Modal</code> itself to block the one behind, but it doesn't work.</p>
  
  <p><strong>MainView.js</strong></p>
  
  <pre><code>componentWillMount() {
      this.panResponder = PanResponder.create({
          onStartShouldSetPanResponderCapture: () =&gt; false,
          onMoveShouldSetPanResponderCapture: () =&gt; true,
      });
  }
  render() {
      return (
          &lt;View {...this.panResponder.panHandlers}&gt;
              {...}
              &lt;SubView /&gt;
          &lt;/View&gt;
      )
  }
  </code></pre>
  
  <p><strong>SubView.js</strong></p>
  
  <pre><code>componentWillMount() {
      // Tentative of blocking the main view PanResponder
      this.panResponder = PanResponder.create({
          onStartShouldSetPanResponder: () =&gt; true,
          onStartShouldSetPanResponderCapture: () =&gt; true,
          onMoveShouldSetPanResponder: () =&gt; true,
          onMoveShouldSetPanResponderCapture: () =&gt; true,
      });
  }
  render() {
      return (
          &lt;Modal transparent {...this.panResponder.panHandlers}&gt;
              {...}
          &lt;/Modal&gt;
      )
  }
  </code></pre>
  
  <p>I'd like to avoid to change the <code>PanResponder</code> set on the main view, I don't want it to be aware if there is a modal open or not.</p>
  
  <p>Do you know of a good solution to stop the propagation of events?</p>
  
  <p>Thanks</p>