React Native FlatList с абсолютной позицией позади компонентов ⇐ CSS

[Anonymous]

У меня есть несколько компонентов SearchBar, и когда я что-то ищу, он отображает FlatList, я хочу, чтобы Flatlist находился над остальными компонентами SearchBars, указанными ниже, поэтому я добавил позицию: Absolute, но это только работает с первым элементом, со второго элемента список отображается за SearchBars, я также добавил zIndex: 100 в список и в контейнер, но он остается прежним. SearchBars добавляются с помощью карты массива:

Код: Выделить всё

export default function Game() {

const arr = [0,1,2,3]
const data = Data.players

const [filteredData, setFilteredData] = React.useState([])
const [actualPosition, setActualPosition] = React.useState(0)

function search(text) {
if(text.length < 3) return setFilteredData([])
if(text.length >= 3){
setFilteredData(data.filter(i => i.name.toLowerCase().includes(text.toLowerCase())))
}
}

const getItem = (item) => {
// Function for click on an item
setActualPosition(actualPosition + 1)
setFilteredData([])
};

const ItemView = ({ item }) => {
return (
// Flat List Item
 getItem(item)}>

{item.name}


);
};

return (

{arr.map(i => {
return (

 search(text)}
onSearchPress={() => console.log("Search Icon is pressed")}
onClearPress={() => search("")}
/>
{actualPosition === i && filteredData.length > 0 &&

 index.toString()}
renderItem={ItemView}
/>

}

)
})}

);
}

И CSS:

Код: Выделить всё

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
container2: {
flexDirection: 'column',
width: '100%',
alignItems: 'center',
},

searchBarContainer: {
marginTop: 5,
width: '125%'
},
searchBar: {
borderBottomWidth: 0.75,
marginBottom: 5
},
flatListContainer: {
position: 'relative',
marginLeft: 30,
zIndex: 100,
width: '100%'
},
flatList: {
position:'absolute',
zIndex: 100,
borderWidth: 0.75,
backgroundColor: 'white',
width: '95%'
},
});

export { styles };

Я хочу, чтобы все списки отображались поверх остальных компонентов, и почему работает только с первым элементом?
Спасибо.< /п>

Подробнее здесь: https://stackoverflow.com/questions/724 ... components