How do I enable scrolling of FlatList TouchableWithoutFeedback nested under a Modal?

Question

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.

Answer 1

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>
        )}
      />