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 blur library for React Native and Expo that brings two distinct blur components — BlurView and GaussianBlurView — directly to your mobile app. Rather than relying on JavaScript-side approximations, it uses UIVisualEffectView on iOS and a Renderscript/RenderEffect stack on Android to deliver the same crisp, live-updating blur that system UI uses for navigation bars, sheets, and overlays.

BlurView

Blurs whatever is rendered behind it. Ideal for headers, tab bars, and floating overlays using iOS system materials.

GaussianBlurView

Blurs its own children — mirrors SwiftUI’s .blur(radius:opaque:) modifier for frosted-image and soft-focus effects.

Installation

Add expo-backdrop to your project, run prebuild, and launch on a simulator or device in minutes.

Quickstart

Two complete working examples — a frosted-glass overlay and a Gaussian-blurred image — ready to copy and run.

​
Key Features

  • Two complementary components — BlurView blurs what’s behind it, while GaussianBlurView blurs its own children, giving you the right tool for every design pattern.
  • All 21 iOS system materials — choose from systemUltraThinMaterial, systemThinMaterial, systemMaterial, systemThickMaterial, systemChromeMaterial, and every Light/Dark variant.
  • Custom tintColor — when no system material fits your palette, supply any ColorValue directly as a colour wash over the blur.
  • Per-corner radii — pass cornerRadius for a uniform radius or cornerRadii for fully independent corner control; both clip the blur layer and its children so you need no extra overflow: 'hidden' wrapper.
  • Android-specific dials — fine-tune blurRadius, downsampleFactor, blurRounds, and blurReductionFactor to match the iOS look on Android without guesswork.
  • Reanimated support — all animatable props work with Animated.createAnimatedComponent(BlurView), making scroll-driven and gesture-driven blur transitions a first-class use case.

​
Requirements

  • Expo SDK with a development build or bare workflow — native compilation is required.
  • iOS 13+ — both BlurView and GaussianBlurView are supported.
  • Android — BlurView works on all supported Android versions; GaussianBlurView requires API 31 (Android 12)+.
  • Web — not supported; both components will throw an error if rendered in a web environment.
Expo Go does not support expo-backdrop. Because the library contains native Swift and Kotlin code that must be compiled into the app binary, you must use a development build or the bare workflow. Run bunx expo prebuild then bunx expo run:ios / bunx expo run:android to get started.

Build docs developers (and LLMs) love

Get started for freeTalk to us