Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter

Expo BlurView iconExpo BlurView



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 DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb

Known issues

Incorrect rendering during screen transitions 

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:

  <FlatList />
  <BlurView />


npx expo install expo-blur

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


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 => (
            style={[styles.box, i % 2 === 1 ? styles.boxOdd : styles.boxEven]}
      <BlurView intensity={100} style={styles.blurContainer}>
        <Text style={styles.text}>{text}</Text>
      <BlurView intensity={80} tint="light" style={styles.blurContainer}>
        <Text style={styles.text}>{text}</Text>
      <BlurView intensity={90} tint="dark" style={styles.blurContainer}>
        <Text style={[styles.text, { color: '#fff' }]}>{text}</Text>

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',
  box: {
    width: '25%',
    height: '20%',
  boxEven: {
    backgroundColor: 'orangered',
  boxOdd: {
    backgroundColor: 'gold',
  text: {
    fontSize: 24,
    fontWeight: '600',


import { BlurView } from 'expo-blur';



Type: React.Component<BlurViewProps>


Only for:


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.


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 react-native-reanimated.


Optional • Type: BlurTint • Default: 'default'

A tint mode which will be applied to the view.

Inherited Props

  • ViewProps



Literal Type: string

Acceptable values are: 'light' | 'dark' | 'default'

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.