how to make background blur when modal open ups in reactnative

Question

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

score 3 · Accepted Answer · answered Aug 26 '21 at 08:28

3

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

answered Aug 26 '21 at 08:28

Rutvik Prajapati

188
1
3
11

i think this is the best solution if you want to avoid downloading a library – hndvf Aug 11 '22 at 08:24
Why 0 votes? Best solution. Fast and simple – auron344 Dec 12 '22 at 10:33
1

the question is about **blurring** the background, this answer only darkens it then adds transparency – benmneb Jan 19 '23 at 06:44

score 0 · Answer 2 · answered Aug 21 '21 at 07:06

0

In case you are using expo use import { BlurView } from 'expo-blur';

When I added a blurView to my project, I browsed around for some third party libs and ended up with adding react-native-unimodules.

answered Aug 21 '21 at 07:06

Michael Bahl

2,941
1
13
16

score 0 · Answer 3 · answered Aug 26 '21 at 12:34

https://www.npmjs.com/package/@react-native-community/blur

you can use blurview so you can trigger blur when the bottomsheet opens or else make it normal

.
.
.
.

const [opensheet,setopensheet]=useState(false)
const [blur,setblur]=useState(0)
const ViewRef=useRef()
useEffect(
()=>
{
    const changeBlur=()=>
    {
        if(opensheet)
        setblur(25)
        else
        setblur(0)
        
        
    }
    
    
    changeBlur()
},
[opensheet]
)
.
.
.
return
(
    <BlurView
    ref={ViewRef}
     blurAmount={blur}
    >
    .
    .
    .
)

--here opensheet is state of your modal which is defined by bool open/true and close/false

score -1 · Answer 4 · answered Aug 21 '21 at 11:09

you have multiple way to solve this one is using this library

https://github.com/Kureev/react-native-blur

one is with image with opacity blurradius

<Image
    style={{opacity:0.8}
    resizeMode='cover'
    source={path} 
    blurRadius={1}
/>

another approach would to drop shadow with transparent background

i would go with first option becuase i already tried it

how to make background blur when modal open ups in reactnative

4 Answers4