title: TouchableWithoutFeedback breaks ScrollView. How to fix without putting view inside ScrollView?
body: <p>I'm trying to get a <code>TouchableWithoutFeedback</code> wrapped <code>ScrollView</code> work.  </p>
  
  <p><strong>In the real problem I'm unable to access the <code>ScrollView</code>.</strong></p>
  
  <p><a href="https://snack.expo.io/@gollyjer/touchable-wrapped-scrollview" rel="nofollow noreferrer">Here's a working Expo Snack</a> for easy testing.  </p>
  
  <p>And here's the code.</p>
  
  <pre class="lang-js prettyprint-override"><code>import * as React from 'react';
  import {
    Text,
    View,
    StyleSheet,
    ScrollView,
    FlatList,
    TouchableWithoutFeedback,
  } from 'react-native';
  import Constants from 'expo-constants';
  import LongText from './components/LongText';
  
  export default class App extends React.Component {
    render() {
      return (
        &lt;View style={{ flex: 1, paddingTop: Constants.statusBarHeight }}&gt;
          {/* https://stackoverflow.com/a/46606223/25197
              BROKE on iOS 
          */}
          &lt;TouchableWithoutFeedback onPress={() =&gt; console.log('Pressed 2')}&gt;
            &lt;View style={[styles.container, { borderColor: 'red' }]}&gt;
              &lt;Text style={styles.label}&gt;
                {'2) Touchable &gt; View &gt; View &gt; ScrollView\n'}
                {' - iOS:          BROKE\n - Android: WORKING\n'}
              &lt;/Text&gt;
  
              &lt;View
                style={{ flex: 1 }}
                onStartShouldSetResponder={() =&gt; true}
                // onStartShouldSetResponderCapture={() =&gt; true}
                onResponderGrant={() =&gt; console.log('Granted View 2')}&gt;
                &lt;ScrollView
                  style={{ flex: 1 }}
                  keyboardShouldPersistTaps={true}
                  onResponderGrant={() =&gt; console.log('Granted ScrollView 2')}&gt;
                  &lt;LongText /&gt;
                &lt;/ScrollView&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          &lt;/TouchableWithoutFeedback&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      borderWidth: 5,
      flex: 1,
      justifyContent: 'center',
      backgroundColor: '#ecf0f1',
      padding: 8,
    },
  
    label: { fontWeight: 'bold' },
  });
  </code></pre>
  
  <p>The <code>ScrollView</code> works as expected on Android.  </p>
  
  <p>How can I get it working on iOS?</p>
  
  <p><strong>In the real problem I'm unable to access the <code>ScrollView</code>.</strong></p>