https://github.com/user-attachments/assets/b8a424d1-ae20-49ae-add5-1e9f758d2922

Native blur views for Expo, built on public iOS and Android APIs only.

Installation

bunx expo install expo-backdrop
bunx expo prebuild

Needs a development build. Expo Go is not supported.

Components

Component	Blurs
BlurView	What's behind it
GaussianBlurView	Its own children
ProgressiveBlurView	What's behind it, fading from one edge to the opposite

All components accept style and children.

BlurView

import { BlurView } from 'expo-backdrop';

<BlurView intensity={80} tint="systemThinMaterialDark" cornerRadius={24} />;

Prop	Type	Default	Description
intensity	number	50	Blur strength, 0–100
tint	BlurTint	'default'	Material applied over the blur
tintColor	ColorValue	—	Custom colour over the blur; replaces tint when set
blurEnabled	boolean	true	false renders only the tint
cornerRadius	number	—	Uniform radius; clips the blur and its children
cornerRadii	BlurViewCornerRadii	—	{ topLeft, topRight, bottomRight, bottomLeft }; overrides cornerRadius

Android only

Prop	Type	Default	Description
blurReductionFactor	number	4	Divides the radius intensity maps to; use it to match iOS
blurRadius	number	—	Explicit radius in dp; overrides intensity
downsampleFactor	number	0	Downsampling before blurring; higher is cheaper and softer, 0 is auto
blurRounds	number	2	Blur passes per capture; more is softer
autoUpdate	boolean	true	false freezes the backdrop over static content

GaussianBlurView

import { GaussianBlurView } from 'expo-backdrop';

<GaussianBlurView blurRadius={12}>
  <Image source={cover} style={{ width: 300, height: 200 }} />
</GaussianBlurView>;

Prop	Type	Default	Description
blurRadius	number	0	Blur strength, in points on iOS and dp on Android
opaque	boolean	false	false fades the edges out; true keeps them solid

Matches SwiftUI's .blur(radius:opaque:). Requires Android 12 (API 31)+.

ProgressiveBlurView

import { ProgressiveBlurView } from 'expo-backdrop';

<ProgressiveBlurView
  edge="top"
  style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 120, pointerEvents: 'none' }}
/>;

Prop	Type	Default	Description
edge	ProgressiveBlurEdge	'top'	'top', 'bottom', 'left' or 'right'; where the blur is strongest
intensity	number	50	Strength at the blurred edge, 0–100
startOffset	number	0	Fraction 0–1 from edge held at full strength before fading
tint	BlurTint	'systemUltraThinMaterial'	Material the blur uses
tintColor	ColorValue	page background at 85%	Wash rising to the blurred edge; 'transparent' turns it off
scrollFallback	boolean	true	Swaps to a gradient while the scroll view behind moves fast
fallbackColor	ColorValue	page background	Colour of that gradient

It finds the scroll view behind it automatically and fades in once content scrolls under its edge, like iOS 26's scroll edge effect. Set pointerEvents: 'none' so touches reach the content underneath.

BlurTint

• default, extraLight, light, dark, regular, prominent
• systemUltraThinMaterial, systemThinMaterial, systemMaterial, systemThickMaterial, systemChromeMaterial
• Each material with a Light or Dark suffix, e.g. systemThinMaterialDark

Types

import type {
  BlurViewProps,
  BlurViewCornerRadii,
  GaussianBlurViewProps,
  ProgressiveBlurViewProps,
  ProgressiveBlurEdge,
  BlurTint,
} from 'expo-backdrop';

Platforms

• iOS 13+
• Android: all components; GaussianBlurView needs API 31+
• Web: not supported; components throw

License

MIT © 2026 Ritesh