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?
1import React, { Component } from 'react';2import { AppRegistry, View, Image, StyleSheet } from 'react-native';34const styles = StyleSheet.create({5 container: {6 flex: 1,7 },8 image: {9 flex: 1,10 },11});1213class DisplayAnImage extends Component {14 render() {15 return (16 <View style={styles.container}>17 <Image18 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}2627export default DisplayAnImage;
Output

Thanks For Reading…
Follow me on Twitter
Join our email list and get notified about new content
No worries, I respect your privacy and I will never abuse your email.
Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.