Blur image effect also known as Gaussian Blur Smoothing Image Effect can create in react native application using blurRadius={} prop. This prop accepts value in Number format and permit us to reduce and change the Image Noise and make the image with blurry effect. So in this tutorial we would going to make a react native app with Blur Background Image Effect. We are using the Image component as Root View so you can put all of your children component inside Image Component.
Below is the sample Guitar image used in this tutorial :
Contents in this project Create Blur Background Image Effect in React Native App:
1. Import StyleSheet, Image and Platform component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Image, Platform } from ‘react-native’;
|
2. Create Image component inside render’s return block. We would load image from our website using HTTP URL. You can set image from both Local and Online URL.
Note : Inside the blurRadius={} prop we are first checking the OS platform version using Platform API. If the application run in iOS application then it will set blurRadius={} value as 10 and if app opens in Android then it will set blurRadius={} value as 5. I am doing this because with the same value there are some difference in blur effect in both Android and iOS devices.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
render() {
return (
<Image
blurRadius={ Platform.OS == ‘ios’ ? 10 : 5 }
source={ {uri: ‘/wp-content/uploads/2017/10/Guitar.jpg’} }
style={ styles.Container } >
{/* Put All Your Component Here Inside Root Image Component. */}
</Image>
);
}
|
3. Create Style for Image component.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const styles = StyleSheet.create(
{
Container: {
flex: 1,
width: null,
height: null,
justifyContent: ‘center’,
alignItems: ‘center’,
}
});
|
4. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
import React, { Component } from ‘react’;
import { StyleSheet, Image, Platform } from ‘react-native’;
export default class MyProject extends Component {
render() {
return (
<Image
blurRadius={ Platform.OS == ‘ios’ ? 10 : 5 }
source={ {uri: ‘/wp-content/uploads/2017/10/Guitar.jpg’} }
style={ styles.Container } >
{/* Put All Your Component Here Inside Root Image Component. */}
</Image>
);
}
}
const styles = StyleSheet.create(
{
Container: {
flex: 1,
width: null,
height: null,
justifyContent: ‘center’,
alignItems: ‘center’,
}
});
|
Screenshot in Android app:
Screenshot in iOS Application:
