position: absolute inside FlatList view child not overlay

user_10125076 0
Viewed 473

I have a FlatList with N childs, i want position a view with absolute, each children has a view who can be visible or not, I'm using position: absolute and z-index: 20 in the view styles but didn't work, my view with position absolute is behind the children (the red container in the image)

Code example: https://codesandbox.io/s/react-native-flatlist-example-forked-kchk5u?file=/src/App.js The purple square in the image below should be in front of all red rectangles

enter image description here

flatlist react-native absolute position
1 Answers

If I understand it correctly, you want a purple square in front of the entire flatlist container. Your approach of {index === 1 && ( it's wrong, because position absolute means it's absolute just to the item, not the entire flatlist.

What you should do instead, is to mount the square at the same level with flatlist and position it over the flatlist, not inside it.

Something like this:

<ScrollView style={{ flex: 1 }}>
  <View
    style={{
      width: 100,
      height: 100,
      backgroundColor: "red",
      position: "absolute",
      top: 0,
      right: 0,
      zIndex: 1
    }}
  />
  <FlatList
    data={[1, 2, 3, 4, 5]}
    renderItem={({ item }) => renderRestaurantInfo(item)}
    keyExtractor={(item) => item.toString()}
    style={{
      flexGrow: 5,
      backgroundColor: "#ccc"
    }}
  />
</ScrollView>
user_66023560
Related