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

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