I am trying to create a welcome modal that I can import into my MainScreen.js file and integrate it there. However, no matter how I style the modal, a white surface always appears around it despite my attempts to make it look like a "popup window". Below is the relevant code snippet where I am facing this issue.
MainScreen.js
//Code for setting up the MainScreen
return(
<View style={styles.screen}>
<View style={styles.tophalf}>
<CustomItemPicker/>
</View>
<View style={styles.bottomhalf}>
<View style={styles.topbuttons}>
<CustomButton
style={styles.button}
onPress={addTheItem}
children="Add a Item"
/>
<CustomButton
style={styles.button}
onPress={() => props.navigation.push('Profile')}
children = "My Profile"
/>
</View>
<View style={styles.bottombuttons}>
<CustomButton
style={styles.button}
children = "My Messages"
/>
<CustomButton
style={styles.button}
children = "options"
/>
</View>
</View>
<WelcomeModal
modalVisible={modalVisible}
/>
</View>
)
};
//Visual Definition of all components
const styles = StyleSheet.create({
screen:{
flexDirection: "column",
flex: 1
},
button:{
fontFamily: "AmaticBold",
//Shadow Properties
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.34,
shadowRadius: 6,
elevation: 3.5,
width: 125,
textAlign: 'center'
},
tophalf:{
flex: 1,
alignItems: "center",
justifyContent:"center"
},
bottomhalf:{
flex:1,
alignItems: "center",
flexDirection: 'column',
justifyContent: 'space-between'
},
topbuttons:{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around'
},
bottombuttons:{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around'
}
});
export default MainScreen;
WelcomeModal:
const WelcomeModal = props =>{
return(
<Modal
animationType="slide"
transparent={false}
visible={props.modalVisible}
>
<View style={styles.ModalWindow}>
<View style={styles.modalItemsWrapper}>
<Text style={{fontFamily:"AmaticBold", fontSize: 10}}>
bla bla bla bla bla
</Text>
</View>
<View style={styles.modalItemsWrapper2}>
<Text>Pick a Nickname: </Text>
<TextInput/>
</View>
<View>
<Text></Text>
<Checkbox/>
<Checkbox/>
<Checkbox/>
</View>
</View>
</Modal>
)
};
const styles = StyleSheet.create({
ModalWindow:{
backgroundColor: "red"
margin: 50,
flexDirection: 'column',
alignItems: 'center',
borderColor: "black",
borderRadius: 10,
borderWidth: 2
//justifyContent: "center",
},
modalItemsWrapper:{
//Empty for now
}
});
export default WelcomeModal;
Here is an image showing the result (MainScreen with implemented WelcomeModal) https://i.sstatic.net/Yggda.jpg
Although the WelcomeModal looks visually appealing and has a proper border, the issue arises when the modal appears as full screen and the MainScreen is hidden behind the white surface surrounding the red custom Modal. I am seeking help to resolve this problem. Any assistance would be greatly appreciated.