BlurView

A React component that blurs everything underneath the view. On iOS, it renders a native blur view. On Android, it falls back to a semi-transparent view. Common usage of this is for navigation bars, tab bars, and modals.

Platform Compatibility

Android Device	Android Emulator	iOS Device	iOS Simulator	Web

Installation

Terminal

→ expo install expo-blur

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Usage

Basic BlurView usage

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

const uri = 'https://s3.amazonaws.com/exp-icon-assets/ExpoEmptyManifest_192.png';

export default function App() {
  const text = 'Hello, my container is blurring contents underneath!';
  return (
    <View style={styles.container}>
      <Image style={[StyleSheet.absoluteFill, styles.image]} source={{ uri }} />
      <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>
  );
}

%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  image: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
  },
  blurContainer: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: '600'
  },
});

API

import { BlurView } from 'expo-blur';

Component

`BlurView`

Type: Component<{ intensity: number, tint: BlurTint } & ViewProps>

Props

`intensity`

Optional • Type: number • Default: 50

A number from 1 to 100 to control the intensity of the blur effect.

You can animate this property using Animated API from React Native or using react-native-reanimated.

Animating this property using Animated API from React Native with setNativeDriver: true does not work.

`tint`

Optional • Type: BlurTint • Default: 'default'

A tint mode which will be applied to the view.

Inherited Props

ViewProps

Types

`BlurTint`

string - Acceptable values are: 'light', 'dark', 'default'.