How to create blur view in React Native

Introduction :

React native doesn’t provide any inbuilt component to make blur view. But we can use react-native-blur library provided by the react-native-community (@react-native-community/blur). It is easy to integrate and works seamlessly on both Android and iOS. In this post, I will show you how to use this blur library with example on both Android and iOS.

How to install react-native-community/blur :

This library is can be installed via npm or yarn :

yarn add @react-native-community/blur

or

npm install --save @react-native-community/blur

You don’t have to link this library manually for react native 0.6 and higher versions. For older react native, you can link it as like below :

react-native link @react-native-community/blur

For iOS, install this library from cocoapods :

npx pod-install

That’s it. You can now import and use it as like below :

import { BlurView } from "@react-native-community/blur";

Properties of BlurView :

Following are the important properties of BlurView. You can check this github page to learn more about other properties :

Type of blur :

Type of blur is assigned by blurType property. It can be any of the below options :

• xlight : extra light blur
• light : light blur
• dark : dark blur
• extraDark : Extra dark blur. Available only for tvOS
• regural : Regular blur. Available only for iOS 10+ and tvOS
• prominent : Prominent blur. Available only for iOS 10+ and tvOS

Amount of blur :

Amount of blur is defined by the blurAmount property. It is a number. By default it is 10. You can set it a value in the range of 0 to 100. For Android, maximum is 32. Anything above will be changed to 32.

iOS : reducedTransparencyFallbackColor :

This is a color property. It defines the color to use if ReduceTransparency is enabled in iOS.

Android : blurRadius :

By default, it matches blurAmount value. It is a number and you can assign between 0 and 25. On Android, this property manually adjust the blur radius.

Android : downsampleFactor :

It is a number and takes value between 0 and 25. It scales down the image before blurring on Android.

Android : overlayColor :

It is a color property to set one custom overlay color on Android.

Example program :

In this example program, we will add one blur view and one circular image view on top. Adding a blur view is similar to other views. We can add style and place it wherever we want. Below is the complete program :

import React from 'react';
import {BlurView} from '@react-native-community/blur';
import {StyleSheet, View, Image} from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Image
        style={styles.absolute}
        source={{
          uri: 'https://..../robot.png',
        }}
      />
      <BlurView
        style={styles.absolute}
        blurType="light"
        blurAmount={20}
        reducedTransparencyFallbackColor="white"
      />
      <View style={styles.roundImageBackground}>
        <Image
          style={styles.roundImage}
          source={{
            uri: 'https://....robot.png',
          }}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  roundImage: {
    height: 200,
    width: 200,
  },
  roundImageBackground: {
    backgroundColor: 'white',
    height: 300,
    width: 300,
    borderRadius: 150,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

We don’t have to place one view inside the BlurView. We can place it below to appear it on top. On Android, it looks like :

And on iOS, it looks similar.