react native list without transparency - reactjs

Question

I got the following problem: I want to implement a location search bar with the google maps places api to generate results. Everything is working, but the listview(which's position prop is set to absolute) seems to be transparent.
i already tried to set the containers opacity to 1 but that didnt helped. can someone tell me what i need to change to make to underlaying test-text not visible in the container?
my code:
locationPicker:
<View style={styles.modalContainer}>
<SafeAreaView style={styles.safeArea}>
<View style={styles.searchContainer}>
<LocationSearchBar/>
</View>
</SafeAreaView>
<View style={styles.modalContent}>
<Text>test</Text>
</View>
</View>
searchContainer: {
alignItems: "center",
justifyContent: "center",
minHeight: 60,
paddingHorizontal: 16,
paddingVertical: 10,
backgroundColor: theme.colors.screen.alter
}
locationSearchBar:
<React.Fragment>
<TextInput
autoCorrect={false}
onChangeText={handleTextChange}
value={inputValue}
label={<Icon name={"search"} />}
placeholder={"Search location..."}
/>
<ScrollView style={styles.autoCompleteResultList}>
{locationResults.map((el, i) => (
<AutoCompleteItem
{...el}
fetchDetails={fetchDetails}
key={String(i)}
/>
))}
</ScrollView>
</React.Fragment>
AutoCompleteItem:
<View style={styles.autoCompleteItemContainer}>
<RkText rkType={"primary2"}>{this.props.structured_formatting.main_text}</RkText>
<RkText rkType={"primary1"}>{this.props.structured_formatting.secondary_text}</RkText>
</View>
autoCompleteItemContainer: {
backgroundColor: "red",
paddingHorizontal: 5,
paddingVertical: 5
},
autoCompleteResultList: {
maxHeight: 200,
position: "absolute",
backgroundColor: theme.colors.screen.alter,
width: "100%",
top: 55
}
cheers!

Answer 1

I think it's not a background-color or opacity problem.
It seems overlay problem of your position:absolute and default views
test is normal or default one so it has highest priority to come over any position:absolute views.
hence, test is above the results.
You'll need to change this position and make result above the test.
so do this by zIndex.
autoCompleteResultList: {
maxHeight: 200,
position: "absolute",
backgroundColor: theme.colors.screen.alter,
width: "100%",
top: 55,
zIndex:1 // highest number of zIndex in your current screen if you have other zIndex
}