Expo BlurView

GitHub

npm

A React component that blurs everything underneath the view.

A React component that blurs everything underneath the view. Common usage of this is for navigation bars, tab bars, and modals.

BlurView on Android is computationally expensive, so it is recommended not to render more than a few BlurView components at once.

Platform Compatibility

Android Device	Android Emulator	iOS Device	iOS Simulator	Web

Known issues

Incorrect rendering during screen transitions
Android

On Android, BlurView may render incorrectly during screen transitions made by react-native-screens.

Component render re-order in case of dynamic list

The blur effect does not update when BlurView is rendered before dynamic content is rendered using, for example, FlatList. To fix this, make sure that BlurView is rendered after the dynamic content component. For example:

<View>
  <FlatList />
  <BlurView />
</View>

Installation

Terminal

- npx expo install expo-blur

If you are installing this in an existing React Native app (bare workflow), start by installing expo in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.

Usage

Basic BlurView usage

import { Text, StyleSheet, View, SafeAreaView } from 'react-native';
import { BlurView } from 'expo-blur';

export default function App() {
  const text = 'Hello, my container is blurring contents underneath!';
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.background}>
        {[...Array(20).keys()].map(i => (
          <View
            key={`box-${i}`}
            style={[styles.box, i % 2 === 1 ? styles.boxOdd : styles.boxEven]}
          />
        ))}
      </View>
      <BlurView intensity={100} style={styles.blurContainer}>
        <Text style={styles.text}>{text}</Text>
      </BlurView>
      <BlurView intensity={80} tint="light" style={styles.blurContainer}>
        <Text style={styles.text}>{text}</Text>
      </BlurView>
      <BlurView intensity={90} tint="dark" style={styles.blurContainer}>
        <Text style={[styles.text, { color: '#fff' }]}>{text}</Text>
      </BlurView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  blurContainer: {
    flex: 1,
    padding: 20,
    margin: 16,
    textAlign: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
    borderRadius: 20,
  },
  background: {
    flex: 1,
    flexWrap: 'wrap',
    ...StyleSheet.absoluteFill,
  },
  box: {
    width: '25%',
    height: '20%',
  },
  boxEven: {
    backgroundColor: 'orangered',
  },
  boxOdd: {
    backgroundColor: 'gold',
  },
  text: {
    fontSize: 24,
    fontWeight: '600',
  },
});

API

import { BlurView } from 'expo-blur';

Component

`BlurView`

Type: React.Component<BlurViewProps>

BlurViewProps

Only for:

Android

`blurReductionFactor`

Optional • Type: number • Default: 4

A number by which the blur intensity will be divided on Android.

Due to platform differences blurs on Android and iOS vary slightly and might look different at different intensity levels. This property can be used to fine tune blur intensity on Android to match it more closely with iOS.