Flatlist not working inside TouchableWithoutFeedback

Question

I have a component that dismisses the keyboard. I then wrap my entire component with this one so whenever I tap outside of the TextInput the keyboard gets dismissed . But the problem is that in my other component I have a Flatlist and it does not scroll at all with TouchableWithoutFeedback. Any recommendations will be appreciated because I have not found a solution yet for hours! Thank you!

export const DismissKeyboard: React.FC<{
    isKeyboardOpen?: boolean
    style?: ViewStyle
}> = ({ children, style }) => (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={style}>{children}</View>
    </TouchableWithoutFeedback>
)

<DissmissKeyboard>
<FlatList 
...flatlist data
 />
</DissmissKeyboard>

Answer 1

Wrap the FlatList renderItem component into a TouchableWithoutFeedback or a TouchableOpacity