How do I make an absolut positioned touchable element on top of a FlatList catch only press events and let other events propagate to the FlatList?

Question

I have a FlatList in React Native with fullscreen image and video items (with pagingEnabled). I want to have a short descriptive touchable text floating on top of the FlatList, to open up a view with some information about the image/video when pressed.

To make the user experience nice, I'd like to be able to scroll the FlatList through the touchable text as well. I.e. if the user happen to start their scrolling motion on top of the text, the FlatList would scroll but if it is a simple press event I'd like to open the view with details about the image/video.

No mater what I try I end up with either the text being able to react to the press OR the FlatList being able to scroll. I have tried different configurations with a custom PanResponder and pointerEvents but seem to always end up with a state were one thing does not work. Do you guys have any smart ideas? I am probably just stuck in the wrong train of thought.

This is a simplified view of my component structure:

<View>
  <View style={{ position: 'absolute', bottom: 100, zIndex: 10 }}>
    <TouchableOpacity onPress={() => console.log('press')}>
      <Text>Some Descriptive Text</Text>
    </TouchableOpacity>
  </View>
  <FlatList pagingEnabled horizontal {...otherFlatListProps} />
</View>