Menu
how to make the blur effect with react-native ? like 'background-image'
and i want to switch the effect 'blur' and 'none'，'none' means no blur effect
817
To add the blur effect with React Native, we can set the blurRadius of the Image . to add the Image component to add an image. Then we set the blurRadius prop to a positive number to add the blur effect.
To set Alpha of an image or view component in React Native based application, style's property opacity is used. Developers can make the shape or image background transparent according to his requirement in a fixed manner; in a fixed percentage, the view is made transparent by setting alpha.
Use rgba value for the backgroundColor . This sets it to a grey color with 80% opacity, which is derived from the opacity decimal, 0.8 . This value can be anything from 0.0 to 1.0 .
Now you can do this without any library using the prop: blurRadius.
E.g
<Image style={styles.img} resizeMode='cover' source={imgSrc} blurRadius={1} /> Explanation: the number(1) means the amount of blur you want to apply on the image, the higher the number, the blurrier the image.
Unfortunately, this doesn't work on Android yet (RN 0.40.0). Nevertheless, it could be useful to who's looking for only an iOS solution.
Edit: It seems to be working on Android now.
162
Try using {ImageBackground} from 'react-native' and set blurRadius={number} like this:
<ImageBackground style={{flex: 1}} source={require('../assets/example.jpg')} blurRadius={90}> <Text>Blur background<Text> </ImageBackground> https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting https://facebook.github.io/react-native/docs/image.html#blurradius
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
