中文网
🌐 Nodejs.cn
首页指南EAS参考教程

Expo BlurView iconExpo BlurView

A React component that blurs everything underneath the view.

Android
iOS
tvOS
Web
Included in Expo Go
Bundled version:
~15.0.8

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 an experimental feature. To enable it use the experimentalBlurMethod prop.

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

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

Usage

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

API

import { BlurView } from 'expo-blur';

Components

BlurView

Android
iOS
tvOS
Web

Type: React.Component<BlurViewProps, BlurViewState>

BlurViewProps

blurMethod

Android
Optional • Type: BlurMethod • Default: 'none'

Blur method to use on Android.

blurReductionFactor

Android
Optional • Type: number • Default: 4

A number by which the blur intensity will be divided on Android.

When using experimental blur methods on Android, the perceived blur intensity might differ from iOS at different intensity levels. This property can be used to fine tune it on Android to match it more closely with iOS.

blurTarget

Android
Optional • Type: RefObject<View | null>

A ref to a BlurTargetView, which this BlurView will blur as its background.

intensity

Android
iOS
tvOS
Web
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.

tint

Android
iOS
tvOS
Web
Optional • Type: BlurTint • Default: 'default'

A tint mode which will be applied to the view.

Inherited Props

BlurTargetView

Android
iOS
tvOS
Web

Type: React.Element<BlurTargetViewProps>

BlurTargetViewProps

ref

Android
iOS
tvOS
Web
Optional • Type: RefObject<View | null>

Inherited Props

Types

BlurMethod

Android

Literal Type: string

Blur method to use on Android.

  • 'none' - Renders a semi-transparent view instead of rendering a blur effect.

  • 'dimezisBlurView' - Uses a native blur view implementation based on BlurView library. This method may lead to decreased performance on Android SDK 30 and below.

  • 'dimezisBlurViewSdk31Plus' - Uses a native blur view implementation based on BlurView library on Android SDK 31 and above, for older versions of Android falls back to 'none'. This is due to performance limitations on older versions of Android, see the performance section to learn more.

Acceptable values are: 'none' | 'dimezisBlurView' | 'dimezisBlurViewSdk31Plus'

BlurTint

Android
iOS
tvOS
Web

Literal Type: string

Acceptable values are: 'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark'

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.