Overlay 反应原生 flatlist 项目

Question

Guys why my flatlist items are not rendering over the succeeding text input. I can see my white background text input rendering over the flatlist items. I wan't to have the flatlist items over the text input.

const SearchScreen = () => {

    return (
        <SafeAreaView>
            <View>
               <TextInput
                   style={styles.textInput}
                   placeholder={placeholder}
                   value={place}
                   onChangeText={(str) => handlePlace(str)}/>
               <FlatList style={styles.flatList}
                   data={data}
                   keyExtractor={item => item.place_google_id}
                   renderItem={({item}) => (
                       <View style={{backgroundColor: "#000"}}>
                           <Text style={{color: "#FFF"}}>{item.description}</Text>
                       </View>
                   )}
               />
            </View>
            <TextInput style={{backgroundColor: "white"}}/>
        </SafeAreaView>
    )
};

flatList: {
    flex: 1,
    left: 10,
    position: "absolute",
    right: 10,
    top: 50,
}

Answer 1

you can add zIndex to your flatlist styles:

flatList: {
    flex: 1,
    left: 10,
    position: "absolute",
    right: 10,
    top: 50,
zIndex:4 // add this
}

Hope it helps. feel free for doubts