React-Native: Reverse zIndex in FlatList

Question

I have a FlatList with some elements where the top element should overlap the bottom element. For this, I wanted to reverse the zIndex, but the FlatList keeps overwriting my zIndex.

In the code below I tried to reverse the zIndex with zIndex: 0 - index but it doesn't work

import React, { Component } from "react";
import { FlatList, Text, View, StyleSheet } from "react-native";

export default class App extends React.Component {
  _renderPost({ index }) {
    return <View style={[styles.item, { zIndex: 0 - index, }]} />;
  }
  render() {
    return <FlatList data={[1, 2, 3, 4, 5,]} renderItem={this._renderPost} />;
  }
}

const styles = StyleSheet.create({
  item: { 
    height: 200, 
    borderWidth:2, 
    borderBottomLeftRadius:50, 
    borderBottomRightRadius:50, 
    marginBottom: -50, 
    backgroundColor:"white",
  },
});

link to Expo Snack

Answer 1

I haven't managed to do it with the help of zIndex, since the Problem seems to be setting zIndex from the index, it just doesn't seem to work.

The way I managed to do it, would be by inverting the FlatList, and using a style for inverted column flex direction so that it actually is scrolled to the top as well. Do note that this would effectively also display the Posts in reverse order, so flipping the underlying arrays would be necessary to achieve the wanted results

import React, { Component } from "react";
import { FlatList, Text, View, StyleSheet } from "react-native";

export default class App extends React.Component {
  _renderPost({ index }) {
    return <View style={styles.item} />;
  }
  render() {
    return <FlatList style={styles.container} inverted data={[1, 2, 3, 4, 5,]} renderItem={this._renderPost}/>;
  }
}

const styles = StyleSheet.create({
  item: { 
    height: 200, 
    borderWidth:2, 
    borderBottomLeftRadius:50, 
    borderBottomRightRadius:50, 
    marginBottom: -50, 
    backgroundColor:"white",
  },
  container: {
    flexDirection: 'column-reverse'
  }
});