How to Blur an Image in React Native

The Image is one of the most important components in react native. Sometimes, you may need to blur the image for making UI pretty. In this blog post, let’s learn how to blur an image easily in react native.

The Image component comes with the blurRadius property that helps us to apply the blur effect to the image. See the code snippet given below.

 <Image style={styles.image} source={cat} blurRadius={3} />

Then you will get the following output.

On iOS, you should give a value greater than 5 to see the blur effect.

Following is the complete code.

import {StyleSheet, Image, View} from 'react-native';
import React from 'react';
import cat from './cat.jpg';

const App = () => {
  return (
    <View style={styles.container}>
      <Image style={styles.image} source={cat} blurRadius={3} />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    height: 250,
    width: 250,
  },
});

That’s how you blur images in react native.