Expo

Documentation

BlurView

A React component that renders a native blur view on iOS and falls back to a semi-transparent view on Android. A common usage of this is for navigation bars, tab bars, and modals.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb
✅✅✅✅✅

Installation

For managed apps, you'll need to run expo install expo-blur. To use it in a bare React Native app, follow its installation instructions.

Usage

import React from 'react';
import { Image, 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={styles.container}>
      <Image style={{ width: 192, height: 192 }} source={{ uri }} />

      {/* Adjust the tint and intensity */}
      <BlurView tint="light" intensity={50} style={styles.notBlurred}>
        <Image style={{ width: 96, height: 96 }} source={{ uri }} />
      </BlurView>
    </View>
  );
}

API

import { BlurView } from 'expo-blur';

Props

  • tint (string) -- light, default or dark.
  • intensity (number) -- A number from 1 to 100 to control the intensity of the blur effect.