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:
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: 'https://reactnativecode.com/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: 'https://reactnativecode.com/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:-
Kindly upload image uplad to php server
Jithin I’d already posted tutorial on upload image here is the link : https://reactnativecode.com/upload-image-to-server-using-php-mysql/ .
Rn fetch blob is not working with new expo version.
Any other option