Search code examples
react-nativereact-native-stylesheet

how to make background blur when modal open ups in reactnative

enter image description here

import React from 'react'
import { View, StyleSheet, Text, TouchableOpacity, Modal } from 'react-native'

const ModalContent = ({ visiblity, toggleModal }) => {
    return (
        <Modal animationType='slide' transparent={true} visible={visiblity} onRequestClose={() => {
            toggleModal()
        }} >
            <View style={styles.container}>
                <TouchableOpacity>
                    <Text style={styles.textButton}>Edit</Text>
                </TouchableOpacity>
                <TouchableOpacity>
                    <Text style={styles.textButton}>Invite</Text>
                </TouchableOpacity>
                <TouchableOpacity>
                    <Text style={styles.textButton}>Delete</Text>
                </TouchableOpacity>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        borderTopRightRadius: 25,
        borderTopLeftRadius: 25,
        height: 150,
        alignItems: 'center',
        elevation: 10,
        alignItems: 'flex-start',
        justifyContent: 'space-around',
        paddingLeft: 20,
        marginTop: 420
    },

    textButton: {
        fontSize: 13,
        color: 'black',
    }
})

export default ModalContent


    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React from 'react'
import { View, StyleSheet, Text, TouchableOpacity, Modal } from 'react-native'

const ModalContent = ({ visiblity, toggleModal }) => {
    return (
        <Modal animationType='slide' transparent={true} visible={visiblity} onRequestClose={() => {
            toggleModal()
        }} >
            <View style={styles.container}>
                <TouchableOpacity>
                    <Text style={styles.textButton}>Edit</Text>
                </TouchableOpacity>
                <TouchableOpacity>
                    <Text style={styles.textButton}>Invite</Text>
                </TouchableOpacity>
                <TouchableOpacity>
                    <Text style={styles.textButton}>Delete</Text>
                </TouchableOpacity>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        borderTopRightRadius: 25,
        borderTopLeftRadius: 25,
        height: 150,
        alignItems: 'center',
        elevation: 10,
        alignItems: 'flex-start',
        justifyContent: 'space-around',
        paddingLeft: 20,
        marginTop: 420
    },

    textButton: {
        fontSize: 13,
        color: 'black',
    }
})

export default ModalContent
Solution

  • just simply adding backgroundcolor with opacity>>>>

    backgroundColor: rgba(255, 0, 0, 0.2);

    because in modal there is view contains view so if you give background color to that conatining view it will added blacky effect