javascript - Styling a custom modal, unwillingly getting white surface around custom modal

Question

---

I want to create a welcome Modal which I then import into a seperate MainScreen.js File and implement it there. No matter how I style the modal, there is always a white surface appearing aroung my modal even tho I tried to make it only appear as a "popup window". I will show you the relevant code parts I struggle with.

MainScreen.js

//Screen Setup for 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:{
        //nothing in here for now
    }
});

export default WelcomeModal;

Here you can see an image of the result (MainScreen with implemented WelcomeModal

As you can see, the WelcomeModal appears and also has a proper border, the problem is that the modal in reality is full screen and the MainScreen is completely hidden behind the "white surface" that is around the red custom Modal. I dont know how to resolve this problem. Any help is appriciated.

question from:https://stackoverflow.com/questions/65645976/styling-a-custom-modal-unwillingly-getting-white-surface-around-custom-modal

Answer 1

I got help from a discord forum related to react-native and now got a solution that worked out for me:

const WelcomeModal = props =>{
    return(
        <Modal
        animationType="slide"
        transparent={true}
        visible={props.modalVisible}
        >
            <View style={{flex:1, backgroundColor: "transparent"}}>
                <View style={styles.ModalWrapper}>
                    <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>
            </View>
        </Modal>
    )
};

const styles = StyleSheet.create({
    ModalWrapper:{
        margin: 50,
        flexDirection: 'column',
        alignItems: 'center',
        borderColor: "black",
        borderRadius: 10,
        borderWidth: 2,
        backgroundColor: "red"
    },
    modalItemsWrapper:{

    }
});

export default WelcomeModal;

What solved my problem was to set transparent={true} inside the modal props and then setting the backgroundColor of the wrapping view inside the modal to "transparent". This made only my wanted red modal to appear.