How to deliver press event to component which is covered by another component?

Question

I have a data list and the list is overlapped by an invisible scroll-view for more dynamic interaction.

The scroll-view have to scrollable always. And the data list should also be touchable.

However, now only the scroll function works and the data is not touched.

What can I do for this?

code is like that :

<View style={{ height: 500 }}>
  <View
    style={{
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    }}
  >
    {[1, 2, 3, 4, 5].map((data, index) => (
      <View
        key={index}
        style={{
          height: 100,
          borderWidth: 1,
          borderColor: "black",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Pressable
          style={{ width: 100, height: 30, backgroundColor: "red" }}
          onPress={() => console.log(`pressed ${data}`)}
        >
          <Text>{data.toString()}</Text>
        </Pressable>
      </View>
    ))}
  </View>
  <ScrollView
    style={{
      height: 500,
    }}
    contentContainerStyle={{
      backgroundColor: "gray",
      opacity: 0.5,
      height: 800,
    }}
  />
</View>

I tried to use react-native-gesture-handler but failed. Maybe it was because I didn't know how to use it.

Answer 1

I solved it by changing the dom design and adding animation.

I put content in a scroll view, set the content to an absolute position, and adjusted the top of the content according to scrolling.