expo-backdrop README

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

expo-backdrop

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

413 ·GitHub

Expo-backdrop

What is this?

expo-backdrop is a React Native + Expo library that adds native blur view components, built directly on the public blur APIs of iOS and Android.

Is this just one blur component?

No, it ships three: BlurView blurs whatever is behind it, GaussianBlurView blurs only its own children, and ProgressiveBlurView fades the blur strength from one edge to the opposite.

How do I add it to my Expo app?

You need a custom development build, since the native blur modules won't run inside Expo Go.

Does GaussianBlurView work on every Android version?

No, GaussianBlurView specifically needs Android 12 (API 31) or newer; BlurView and ProgressiveBlurView have no such floor mentioned.

Does this work on web?

No, web is explicitly unsupported and the components throw an error if used there.

What tint styles are available for BlurView?

Standard options like default, extraLight, light, dark, regular and prominent, plus iOS system materials such as systemUltraThinMaterial, each with Light/Dark suffixed variants.

How does ProgressiveBlurView behave during fast scrolling?

It automatically finds the scroll view behind it and fades the blur in as content scrolls under its edge, mimicking iOS 26's scroll edge effect, with an optional gradient fallback during fast scrolls.

Can I fine-tune blur performance on Android?

Yes, Android-only props like blurReductionFactor, downsampleFactor, and blurRounds let you trade off blur strength, cost, and softness since Android has no single native blur API matching iOS.

What are similar projects?

morphlet, react-native-calendars, ng-native, react-native-elements, react-native-swiper, react-native-ui-kitten, awesome-react-native, react-native-vector-icons

Which topics is it in?

expo, react-native, mobile-development, kotlin, apple, component-library, ui-components, animation, mobile, ui, ios, android

Creator: rit3zh
Size: 89.2 MB
Stars: 413
Updated: CommitSep 22
Age: 2mo
Commits · 90 Days

expo-backdrop README

expo-backdrop

Installation

Components

BlurView

GaussianBlurView

ProgressiveBlurView

BlurTint