How to blur an image in React Native? Code Example

Table of Contents Hide

Code Example
1. Live Demo
Conclusion

React Native Image component provides blurRadius prop which accepts a numerical value. This prop can be used to add blur to the images.

0 value means no blur, while any value greater than 0 will increase the magnitude of blur in proportion of the provided number. Higher the number, more will be the blur.

Code Example

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    flexDirection: 'row',
    justifyContent: 'space-around'
  },
  image: {
    height: 200,
    width: 150,
  },
});

const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.image}
        source={{uri: 'https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg?itok=iQEwihUn'}}
        blurRadius={0}
      />
      <Image
        style={styles.image}
        source={{uri: 'https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg?itok=iQEwihUn'}}
        blurRadius={2}
      />
    </View>
  );
}

export default DisplayAnImage;

The output will look like this –

Adding blur to the image in React Native — Blur Radius = 0 (Left), Blur Radius = 2 (Right)

The above image is the side by side comparison of two values of blurRadius prop. The first is at blurRadius 0 which is same as original image and we can simply omit the use of this prop in it. The second is at blurRadius 2. If you increase the value, the image will get more blurry.

Note: For iOS, you need to provide blurRadius > 5.