How can I reveal an element behind a flatlist and have it interactable in React Native?-CodePudding

I am trying to render an element that is positioned absolutely behind a flatlist and it will be revealed once the user scrolls to the bottom. The issue I am facing is that the element needs to be interactable, and the flatlist root element takes all pointerevents instead of the background element.

const FlatlistOverElement: FC = () => (
  <View style={{ flex: 1, width: '100%' }}>
    <FlatList
      data={data}
      style={{ flexGrow: 1 }}
      ListFooterComponent={() => (
        <View style={{ height: BACKGROUND_ELEMENT_HEIGHT, opacity: 0 }} />
      )}
      renderItem={RenderItem}
    />
    <AbsolutelyPositionedElementBehindFlatList />
  </View>
)

I have tried to remove pointerevents from the flatlist, then the flatlist is not scrollable.

I have tried to set the height of the flatlist smaller, and let the content overflow. This allows the user to interact with the element, but for that part of the screen, the user can not scroll the flatlist.

What other approach can I utilise in order to solve this issue ?

CodePudding user response：

You can use zIndex property on the scroll completion. Just provide a higher zIndex value than that of FlatList to absolute component whenever the scroll is completed. zIndex Layout Props

CodePudding user response：

Thanks for the suggestions. I ended up using a zIndex to put the interactable content in front of the flatlist when having scrolled to the end, as well as adding snap points on both sides of the element. To prevent the user from half revealing the element and not be able to interact with it.