I'm working with a react native modal and encountering an issue where the backgroundColor I apply is only showing at the top of the modal. How can I ensure that the color fills the entire modal view?
Any suggestions on how to fix this problem and make sure the background color spans across the whole modal?
return (
<Modal visible={isUserVisible}>
<View style={styles.container}>
{/* <View> */}
<View>
<TouchableOpacity
style={styles.cross}
onPress={() => setIsUserVisible(false)}>
<Thumbnail
source={{
uri:
'https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png',
}}></Thumbnail>
</TouchableOpacity>
<Text>HELLOO</Text>
</View>
<View style={styles.searchLocationContainer}>
<UserInfoContainer
firstName={firstName}</UserInfoContainer>
</View>
</View>
</Modal>
export const styles = StyleSheet.create({
container: {
backgroundColor: '#323443',
//backgroundColor: 'red',
},
button: {
paddingTop: 0,
},
text: {
color: 'black',
},
cross: {
paddingTop: 50,
paddingLeft: 40,
},
searchLocationContainer: {
flex: 1,
},
});