how to make the blur effect with react-native?

Question

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

Answer 1

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.

Answer 2

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