TouchableWithoutFeedback breaks ScrollView. How to fix without putting view inside ScrollView?

Question

I'm trying to get a TouchableWithoutFeedback wrapped ScrollView work.

In the real problem I'm unable to access the ScrollView.

Here's a working Expo Snack for easy testing.

And here's the 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 (
      <View style={{ flex: 1, paddingTop: Constants.statusBarHeight }}>
        {/* https://stackoverflow.com/a/46606223/25197
            BROKE on iOS 
        */}
        <TouchableWithoutFeedback onPress={() => console.log('Pressed 2')}>
          <View style={[styles.container, { borderColor: 'red' }]}>
            <Text style={styles.label}>
              {'2) Touchable > View > View > ScrollView\n'}
              {' - iOS:          BROKE\n - Android: WORKING\n'}
            </Text>

            <View
              style={{ flex: 1 }}
              onStartShouldSetResponder={() => true}
              // onStartShouldSetResponderCapture={() => true}
              onResponderGrant={() => console.log('Granted View 2')}>
              <ScrollView
                style={{ flex: 1 }}
                keyboardShouldPersistTaps={true}
                onResponderGrant={() => console.log('Granted ScrollView 2')}>
                <LongText />
              </ScrollView>
            </View>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    borderWidth: 5,
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },

  label: { fontWeight: 'bold' },
});

The ScrollView works as expected on Android.

How can I get it working on iOS?

In the real problem I'm unable to access the ScrollView.

Answer 1

Snack working link https://snack.expo.io/@mehran.khan/touchable-wrapped-scrollview

You should change this code

 <View
              style={{ flex: 1 }}
              onStartShouldSetResponder={() => true}
              // onStartShouldSetResponderCapture={() => true}
              onResponderGrant={() => console.log('Granted View 2')}>
              <ScrollView

Add onStartShouldSetResponder={() => true} to View instead of Scrollview

<ScrollView
                style={{ flex: 1 }}>
                <View  onStartShouldSetResponder={() => true}><LongText /></View>
              </ScrollView>

App Preview