Blur Image in React Native

Published On: 2024-05-15

Posted By: Harish

We know how to add an image in react native with different resize modes. But what if we want a blur effect to that image.

For that we can use blurRadius prop to output the perfect blurred image. This props accepts a number which represents the blur intensity.

Lets see this in action.

Create A New Project

Create a new react-native project by using npx. Check documentation for creating a new react native project.

npx react-native@latest init ImageRN

Example Implementation

We will create a simple image component with a blur effect.

Import and add Image component with an image source. I imported a local image file, but you can use a local image file or a remote image.

//App.tsx
...
import { Image } from 'react-native';
...
<Image
  style={styles.image}
  source={require('./assets/fav.png')}
  resizeMode="cover"
/>

If we run the app,

#for Android
npx react-native run-android

#for ios
npx react-native run-ios

You will see the linked image.

Now to give a blur effect, add blurRadius prop with a number between 1 to 100. I will give 10 for this example.

...
<Image
  ...
  blurRadius={10}
/>

If we reload the app, you will see that the blur effect has been added to the image.

Please note that the blur intensity is different for iOS and android for a single value.

Blurred image in react native android and ios

Both the operating systems have the same value, but their blur intensities are different for iOS and android.

So, give different values based on the operating system.

Complete code of our example,

//App.tsx
import React from "react";
import {
  Text,
  StyleSheet,
  SafeAreaView,
  StatusBar,
  View,
  Image,
} from "react-native";

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
      <StatusBar
        barStyle="dark-content"
      />
      <View style={styles.container} >
        <Text style={styles.text}>
          ifelsething.com
        </Text>
        <Text style={styles.text}>
          blurred image in react native
        </Text>
        <Image
          style={styles.image}
          blurRadius={10}
          source={require('./assets/fav.png')}
          resizeMode="cover"
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: 10,
    gap: 20
  },
  text: {
    fontSize: 15,
    color: 'black',
    fontStyle: 'italic'
  },
  image: {
    flexShrink: 1,
    width: '100%'
  }
});

Share is Caring

Create A New Project

Example Implementation

Related Posts