Welcome friends, In today’s tutorial we would learn about an amazing react native npm package known as @react-native-community/blur . The React Native Community Blur package is used to create blur background view in react native both android & iOS applications. There are basically 3 type of blur effects available in React Native Community Blur package dark, light and xlight. Today we would make a react native application and install the @react-native-community/blur package in our project app using NPM server. After done installing we would write the code of making blur view in react native. So let’s get started .
Contents in this project React Native Community Blur Background View Android iOS Example:-
1. The first step is to install the @react-native-community/blur package in our project. So open your project’s Root directory in Command Prompt or Terminal and execute below command.
|
1
|
npm install —save @react–native–community/blur
|
Screenshot:
Screenshot after done installation:-
2. Now in android you don’t have to execute any other command for installation process. But for iOS we have to execute below command to complete the installation process.
|
1
|
cd ios && pod install && cd ..
|
Screenshot after done installing pod :
3. Now the next step is to start the coding for the app. So open your project’s main App.js file and import View, StyleSheet, Text, Image & BlurView component in your project.
|
1
2
3
4
5
|
import React from ‘react’;
import { View, StyleSheet, Text, Image } from ‘react-native’;
import { BlurView } from ‘@react-native-community/blur’;
|
4. Creating our main export default App functional component.
|
1
2
3
4
5
6
|
export default function App() {
return (
);
}
|
5. Now in the return block first we would make a Root View component -> The Background Image component -> BlurView Component. Now we would make a Text component to show which blur effect we’re applying on the Blur View component.
There are basically 3 types of BlurView effects available here :-
1. dark
2. light
3. xlight
Available Prop :
1. style :- Used to apply style on blur View component.
2. blurType :- Used to set blur type, supported values are dark, light, xlight.
3. blurAmount:- Used to set Adjusts blur intensity.
4. reducedTransparencyFallbackColor :- iOS only, black, white, #rrggbb, etc – background color to use if accessibility setting ReduceTransparency is enabled.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
return (
<View style={styleSheet.MainContainer}>
<Image
source={{ uri: ‘/wp-content/uploads/2021/04/beach_new.jpg’ }}
style={styleSheet.image}
key={‘blurryImage’} />
<BlurView
style={styleSheet.blurView}
blurType=“light” // Values = dark, light, xlight .
blurAmount={10}
// viewRef={this.state.viewRef}
reducedTransparencyFallbackColor=“white”
/>
<Text style={{ fontSize: 34, color: ‘white’, fontWeight: ‘bold’, textAlign: ‘center’ }}> React Native Blur View Dark</Text>
</View>
);
|
6. Creating Style.
|
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
|
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 12
},
blurView: {
position: “absolute”,
top: 0,
left: 0,
bottom: 0,
right: 0,
},
image: {
position: “absolute”,
top: 0,
left: 0,
bottom: 0,
right: 0,
resizeMode: ‘cover’,
width: null,
height: null,
}
});
|
7. 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
import React from ‘react’;
import { View, StyleSheet, Text, Image } from ‘react-native’;
import { BlurView } from ‘@react-native-community/blur’;
export default function App() {
return (
<View style={styleSheet.MainContainer}>
<Image
source={{ uri: ‘/wp-content/uploads/2021/04/beach_new.jpg’ }}
style={styleSheet.image}
key={‘blurryImage’} />
<BlurView
style={styleSheet.blurView}
blurType=“light” // Values = dark, light, xlight .
blurAmount={10}
// viewRef={this.state.viewRef}
reducedTransparencyFallbackColor=“white”
/>
<Text style={{ fontSize: 34, color: ‘white’, fontWeight: ‘bold’, textAlign: ‘center’ }}> React Native Blur View Dark</Text>
</View>
);
}
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 12
},
blurView: {
position: “absolute”,
top: 0,
left: 0,
bottom: 0,
right: 0,
},
image: {
position: “absolute”,
top: 0,
left: 0,
bottom: 0,
right: 0,
resizeMode: ‘cover’,
width: null,
height: null,
}
});
|
Screenshots:-
Also Read :
Add Rounded Corners Border to Text Component in React Native iOS Android
React Native JSON FlatList with Images and Text iOS Android Tutorial
React Native Set Header Bar Title Text in React Navigation 5.x
React Native Integrate Google Maps in Android iOS App Example Tutorial
Configure Firebase SDK in React Native iOS Project Tutorial
