Navigate back to the homepage

How to blur background in react native

Infinitbility
React Native
August 1st, 2021 · 1 min read
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?

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

React Native, Image, Blur

Thanks For Reading…

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.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

Markdown emoji Example with code

Markdown emoji Example with code

All emoji list with code example

July 31st, 2021 · 1 min read
How to check whole commit ( log ) in smartsvn

How to check whole commit ( log ) in smartsvn

SmartSVN Log tutorial

July 28th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]