title: React Native nested ScrollView locking up
body: <p>I'm trying to nest ScrollViews in React Native; a horizontal scroll with nested vertical scrolls. </p>
  
  <p>Here's an example:</p>
  
  <pre><code>var Test = React.createClass({
      render: function() {
          return (
              &lt;ScrollView
                  style={{width:320, height:568}}
                  horizontal={true}
                  pagingEnabled={true}&gt;
  
                  {times(3, (i) =&gt; {
                      return (
                          &lt;View style={{width:320, height:568}}&gt;
  
                              &lt;ScrollView&gt;
                                  {times(20, (j) =&gt; {
                                      return (
                                          &lt;View style={{width:320, height:100, backgroundColor:randomColor()}}/&gt;
                                      );
                                  })}
                              &lt;/ScrollView&gt;
  
                          &lt;/View&gt;
                      );
                  })}
  
              &lt;/ScrollView&gt;
          );
      },
  });
  
  AppRegistry.registerComponent('MyApp', () =&gt; Test);
  </code></pre>
  
  <p>The outer scroller works flawlessly, but the inner one sticks when you touch it while it's moving. What I mean is: if you scroll, lift your finger and touch it again while it's still moving with momentum, it stops and doesn't react at all to touch moves. To scroll more you have to lift your finger and touch again. </p>
  
  <p>This is so reproducible it feels like something to do with the Gesture Responder. </p>
  
  <p>Has anyone seen this issue?</p>
  
  <p>How would I even begin to debug this? Is there a way to see what's responding to touches, granting and releasing, and when?</p>
  
  <p>Thanks.</p>
  
  <p><strong>Update:</strong> </p>
  
  <p>It looks like it is the responder system, by putting <code>onResponderMove</code> listeners on the inner and outer scrollers:</p>
  
  <pre><code>&lt;ScrollView 
      onResponderMove={()=&gt;{console.log('outer responding');}}
      ...
  
      &lt;ScrollView
          onResponderMove={()=&gt;{console.log('inner responding');}}&gt;
          ...
  </code></pre>
  
  <p>It's clear that the outer ScrollView is grabbing control. The question, I guess, is how do I stop the outer scroller from taking control when trying to scroll vertically? And why is this only happening when you try to scroll an already moving inner ScrollView? </p>