BlurView: Native Backdrop Blur with iOS System Materials

BlurView blurs the content rendered behind it — the backdrop — not its own children. Place it over images, maps, or any view and it will apply a live, compositor-driven blur using UIVisualEffectView on iOS (with all 21 system materials) and a custom Gaussian renderer on Android. It is the right choice for headers, tab bars, floating action bars, modal backgrounds, and bottom sheets wherever you want the classic frosted-glass effect.

Basic Usage

basic-blur-view.tsx

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

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Image source={require('./cover.png')} style={StyleSheet.absoluteFill} />
      <BlurView
        intensity={80}
        tint="systemThinMaterialDark"
        cornerRadius={24}
        style={{ margin: 20, padding: 20 }}>
        <Text style={{ color: '#fff' }}>Hello from behind the glass</Text>
      </BlurView>
    </View>
  );
}

Props

intensity

number

default:50

Blur strength from 0 (no blur) to 100 (maximum blur). Maps to the blur radius used by the underlying renderer. On Android, use blurReductionFactor to calibrate the perceived intensity against iOS.

tint

BlurTint

default:"'default'"

The system material washed over the blur layer. Accepts any of the 21 iOS system material tokens such as "systemThinMaterial", "systemChromeMaterialDark", or the legacy "light" / "dark" values. See Tints & Materials for the full list.

tintColor

ColorValue

A custom colour applied over the blur, replacing tint when set. Use this when none of the system materials match your design. Accepts any React Native ColorValue string — hex, rgba, named colours, etc.

blurEnabled

boolean

default:true

Set to false to disable blurring entirely and render only the tint overlay. Useful for conditional degraded states or accessibility preferences.

cornerRadius

number

Uniform corner radius applied to the blur layer and its children. Clips both, so you do not need a separate overflow: 'hidden' wrapper. See Corner Radii for per-corner control.

cornerRadii

BlurViewCornerRadii

Per-corner radii object with optional keys topLeft, topRight, bottomRight, and bottomLeft. When both cornerRadius and cornerRadii are set, cornerRadii takes precedence. See Corner Radii for details and examples.

style

StyleProp<ViewStyle>

Style applied to the outer container view. Use this to set dimensions, margins, padding, and position — the blur fills the container automatically.

children

ReactNode

Content rendered on top of the blur layer. Children are not blurred — they sit above the frosted surface.

blurReductionFactor

number

default:4

Divides the radius that intensity maps to before it is passed to the Android renderer. Android blur reads stronger than iOS at the same intensity value, so this is the main dial for matching them visually.