How to blur background in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This article will help you to add blur effect on your react native images and background images, here you will get answer of how to add blur effect in image react native.

Let start today article How to blur background in react native

Introduction

React Native provide blurRadius attribute to make blur images it’s work on both component ( Image and ImageBackground ). both component is support blurRadius attribute and you have to blur image between 1 to 100 numbers.

blurRadius Example

Below example wil explain, how to use blurRadius in image component of react native with code example and output.

Here, we use blurRadius with 10 values and see what we get?

Copy 
1import React, { Component } from 'react';
2import { AppRegistry, View, Image, StyleSheet } from 'react-native';
3
4const styles = StyleSheet.create({
5  container: {
6  flex: 1,
7  },
8  image: {
9  flex: 1,
10  },
11});
12
13class DisplayAnImage extends Component {
14  render() {
15    return (
16      <View style={styles.container}>
17        <Image
18          style={styles.image}
19          source={{uri: 'https://i.pinimg.com/564x/16/d6/68/16d668bd5bf00285a7e21899eb4b420f.jpg'}}
20          blurRadius={10}
21        />
22      </View>
23    );
24  }
25}
26
27export default DisplayAnImage;

Output

Thanks For Reading…