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, добавляющая нативные компоненты blur view, построенные прямо на публичных blur-API iOS и Android.
Это всего один blur-компонент?Нет, их три: BlurView размывает всё позади себя, GaussianBlurView размывает только собственных детей, а ProgressiveBlurView плавно меняет силу размытия от одного края к противоположному.
Как добавить его в моё Expo-приложение?Нужна кастомная dev-сборка, поскольку нативные blur-модули не запустятся внутри Expo Go.
GaussianBlurView работает на любой версии Android?Нет, GaussianBlurView требует именно Android 12 (API 31) или новее; для BlurView и ProgressiveBlurView такого минимума не указано.
Это работает на вебе?Нет, веб явно не поддерживается, и компоненты выкидывают ошибку при попытке использовать их там.
Какие стили tint доступны для BlurView?Стандартные варианты вроде default, extraLight, light, dark, regular и prominent, плюс системные материалы iOS наподобие systemUltraThinMaterial, у каждого — варианты с суффиксами Light/Dark.
Как ProgressiveBlurView ведёт себя при быстрой прокрутке?Он автоматически находит scroll view позади себя и плавно проявляет размытие, когда контент прокручивается под его краем, повторяя scroll edge effect из iOS 26, с опциональным градиентным фолбэком при быстрой прокрутке.
Можно ли тонко настроить производительность размытия на Android?Да, пропсы только для Android — blurReductionFactor, downsampleFactor и blurRounds — позволяют балансировать между силой размытия, стоимостью и мягкостью, поскольку на Android нет единого нативного blur-API, сопоставимого с 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