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

expo install expo-blur

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

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() {
  return (
    <View style={{ flex: 1 }}>
      <View style={styles.container}>
        <Image style={styles.blurredImage} source={{ uri }} />

        {/* Adjust the tint and intensity */}
        <BlurView intensity={100} style={[StyleSheet.absoluteFill, styles.nonBlurredContent]}>
          <Text>Hello! I am bluring contents underneath</Text>
        </BlurView>
      </View>
    </View>
  );
}

%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  blurredImage: {
    width: 192,
    height: 192,
  },
  nonBlurredContent: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});

API

import { BlurView } from 'expo-blur';

Props

intensity
Type: number • Default: 50
A number from 1 to 100 to control the intensity of the blur effect.
tint
Type: BlurTint • Default: 'default'
A tint mode which will be applied to the view.

Inherited Props

View

Types

`BlurProps`

undefined extended by:

Name	Type	Description
intensity	`number`	A number from `1` to `100` to control the intensity of the blur effect.
tint	`BlurTint`	A tint mode which will be applied to the view. Default: 'default'

`BlurTint`

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