Expo BlurView

A React component that blurs everything underneath the view.

Android

iOS

tvOS

Web

Included in Expo Go

Recommended version:

~56.0.4

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

In SDK 55 and later, expo-blur is stable on Android, but some code changes are required for the BlurView to work. See the Android support section to learn more.

Known issues

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

- yarn expo install expo-blur

- pnpm expo install expo-blur

- bun expo install expo-blur

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic iOS and web-only BlurView usage

This is the legacy way of creating a BlurView, which will result in a blur only on iOS. On Android, this will result in a view with a semi-transparent background.

Basic iOS-only BlurView usage

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

export default function App() {
  const text = 'Hello, my container is blurring contents underneath!';
  return (
    <View 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>
    </View>
  );
}

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',
  },
});

Basic BlurView usage with Android support

To blur the background of a view on Android, wrap the content to be blurred in a BlurTargetView component and pass its ref to the BlurView.

Note: Notice that, as long as all of the BlurViews fit into the bounds of a single BlurTargetView, you can use the single BlurTargetView for multiple BlurViews. This is more efficient than creating multiple BlurTargetViews.

Basic BlurView usage with Android support

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

export default function App() {
  const targetRef = useRef<View | null>(null);
  const text = 'Hello, my container is blurring contents underneath!';

  return (
    <View style={styles.container}>
      <BlurTargetView ref={targetRef} style={styles.background}>
        {[...Array(20).keys()].map(i => (
          <View
            key={`box-${i}`}
            style={[styles.box, i % 2 === 1 ? styles.boxOdd : styles.boxEven]}
          />
        ))}
      </BlurTargetView>
      <BlurView
        blurTarget={targetRef}
        intensity={100}
        style={styles.blurContainer}
        blurMethod="dimezisBlurView">
        <Text style={styles.text}>{text}</Text>
      </BlurView>
      <BlurView
        blurTarget={targetRef}
        intensity={80}
        tint="light"
        style={styles.blurContainer}
        blurMethod="dimezisBlurView">
        <Text style={styles.text}>{text}</Text>
      </BlurView>
      <BlurView
        blurTarget={targetRef}
        intensity={90}
        tint="dark"
        style={styles.blurContainer}
        blurMethod="dimezisBlurView">
        <Text style={[styles.text, { color: '#fff' }]}>{text}</Text>
      </BlurView>
    </View>
  );
}

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',
  },
});

Android support

The blurring feature is stable on Android. There are a few things to keep in mind when migrating:

API

To blur the background of a view on Android, wrap the content to be blurred in a BlurTargetView component and pass its ref to the BlurView. You can see an example in the Usage section.

Performance

The blur can be achieved efficiently only by using the RenderNode Android API, which was introduced in Android SDK 31 (Android 12.0). Due to this, on older versions of Android expo-blur uses the much less efficient RenderScript API. If you want to avoid the performance penalty on older platforms you can use the dimezisBlurViewSdk31Plus BlurMethod which will only blur on newer versions of Android and fall back to the none on older versions.

API

import { BlurView } from 'expo-blur';

No API data file found, sorry!

Using `borderRadius` with `BlurView`

When using BlurView on Android and iOS, the borderRadius property is not applied when provided explicitly. To fix this, you can use the overflow: 'hidden' style since BlurView inherits props from <View>. See Usage for an example.