how to make background blur when modal open ups in reactnative - react-native

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

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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