Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/rit3zh/expo-backdrop/llms.txt

Use this file to discover all available pages before exploring further.

expo-backdrop is a native Expo module that gives your React Native app pixel-perfect blur effects on both iOS and Android. BlurView blurs whatever is rendered behind it — ideal for headers, tab bars, and floating overlays — while GaussianBlurView blurs its own children, mirroring SwiftUI’s .blur(radius:opaque:) modifier.

Installation

Install the package and prebuild your native app in two commands.

Quickstart

Add a frosted-glass panel to your screen in under five minutes.

BlurView

Backdrop blur using iOS system materials and Android’s Gaussian renderer.

GaussianBlurView

Blur your own content — images, icons, and any child views.

What’s inside

Tints & Materials

All 21 iOS system materials plus custom tintColor support.

Corner Radii

Uniform and per-corner radii that clip both blur and children.

Android Tuning

Fine-grained Android controls — radius, rounds, downsampling.

Animations

Animate blur intensity with Reanimated’s createAnimatedComponent.

At a glance

1

Install

Add expo-backdrop to your project with your package manager of choice.
2

Prebuild

Run expo prebuild so the native iOS and Android code is compiled in.
3

Import and use

Drop <BlurView> or <GaussianBlurView> into your JSX and style as needed.
4

Animate (optional)

Wrap with Animated.createAnimatedComponent to animate any blur prop.
expo-backdrop requires a development build or bare workflow. Expo Go is not supported because the module includes native code.

Build docs developers (and LLMs) love