Here is my setup:
<Modal
statusBarTranslucent
visible={isOpen}
onDismiss={onRequestClose}
onRequestClose={onRequestClose}
animationType={animationPreset}>
<TouchableWithoutFeedback
onLayout={onLayout}
onPressOut={onRequestClose}>
<View
style={modalContainerStyle}>
<TouchableWithoutFeedback>
<View
style={style.modalChildStyle}>
{children}
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
and here is the FlatList child:
<View>
<FlatList
data={dataItems}
scrollEnabled
keyExtractor={(item) => item.id}
renderItem={({item}) => (<SomeComponent someComponentData={item} />)}
/>
</View
The FlatList doesn't scroll!
I tried adding onStartShouldSetResponder={() => true}
to Views
within the Modal
and the one wrapping the FlatList
, and none works. I also tried adding style={{flex: 1}}
and that doesn't work either.
Here is how I solved the issue: by wrapping the component in renderItem
with a View
that has onStartShouldSetResponder={() => true}
. Eg:
<FlatList
data={dataItems}
scrollEnabled
keyExtractor={(item, index) => item.id}
renderItem={({item}) => (
<View onStartShouldSetResponder={() => true}>
<SomeComponent
someComponentData={item}
key={uuid()}
/>
</View>
)}
/>