expo-backdrop README

The project's README from github.com/rit3zh/expo-backdrop. As one markdown file: README.md.

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

Types

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

Platforms

License

MIT © 2026 Ritesh

expo-backdrop (rit3zh/expo-backdrop)

Searching Database…

413 ·GitHub
Expo-backdrop
这是什么？expo-backdrop 是一个 React Native + Expo 库，添加原生模糊视图组件，直接构建在 iOS 和 Android 的公开模糊 API 之上。
这只是一个模糊组件吗？不是，它自带三个：BlurView 模糊它背后的内容，GaussianBlurView 只模糊自己的子元素，ProgressiveBlurView 让模糊强度从一个边缘向对侧渐隐。
怎么把它加进我的 Expo 应用？你需要一个自定义开发构建，因为原生模糊模块无法在 Expo Go 里运行。
GaussianBlurView 在每个 Android 版本上都能用吗？不能，GaussianBlurView 明确需要 Android 12（API 31）或更新版本；BlurView 和 ProgressiveBlurView 没有提到这样的版本下限。
在 Web 上能用吗？不能，Web 明确不受支持，组件在 Web 上使用时会抛出错误。
BlurView 有哪些色调样式可用？default、extraLight、light、dark、regular 和 prominent 等标准选项，外加 systemUltraThinMaterial 等 iOS 系统材质，每种都带 Light/Dark 后缀的变体。
快速滚动时 ProgressiveBlurView 表现如何？它会自动找到自己背后的滚动视图，当内容从其边缘下方滚过时淡入模糊，模仿 iOS 26 的滚动边缘效果，快速滚动时可选用渐变作为后备。
在 Android 上能微调模糊性能吗？可以，blurReductionFactor、downsampleFactor 和 blurRounds 这些 Android 专属属性让你在模糊强度、开销和柔和度之间权衡，因为 Android 没有能与 iOS 相提并论的单一原生模糊 API。
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