React Native Blur

Backdrop blur and frosted glass for React Native and Expo, on iOS and Android. Blur what is behind headers, tab bars, cards, popups and buttons while their content stays sharp, or blur a whole screen or a playing video.

GitHubnpmChangelogllms.txt

Features

• Backdrop blur (mode="backdrop"): frosted headers, tab bars, cards, popups and buttons that blur whatever is behind them, with sharp content on top. Works over scrolling lists and playing video.
• Blurs video on Android, including SurfaceView players such as expo-video and react-native-video.
• Real iOS materials: UIVisualEffectView with the system blur styles.
• Android matched to iOS: a RenderEffect blur plus colour matrix per material, calibrated against iOS screenshots (mean error 1.95 / 255 across 187 sampled colours).
• One intensity prop from 0 to 100 drives blur, colour and glass rim together.
• Web fallback with CSS backdrop-filter.
• React Native CLI and Expo: a native Fabric component with no JS dependencies and no Expo requirement.

Installation

React Native CLI

npm install @nguyenduy1412/react-native-blur
cd ios && pod install

Rebuild the app. Autolinking picks the library up; no Expo packages are needed.

Expo

npx expo install @nguyenduy1412/react-native-blur
npx expo run:ios
npx expo run:android

It contains native code, so it does not run in Expo Go. Use a development build or EAS Build.

Requirements

Quick start

import BlurView from "@nguyenduy1412/react-native-blur";

<BlurView mode="backdrop" intensity={80} tint="systemThinMaterial" style={{ borderRadius: 24, padding: 16 }}>
  <Text>Frosted card</Text>
</BlurView>

<BlurView style={{ flex: 1 }} intensity={50} tint="systemMaterial">
  <YourContent />
</BlurView>

Guides

• Frosted glass header and tab barSticky headers and floating tab bars that blur the list scrolling under them.
• Blur a video on AndroidWhy video stays sharp under most blur libraries, and how to blur it.
• Blurred modal backgroundBlur the screen behind a modal, bottom sheet or popup.
• expo-blur alternativeHow this library compares with expo-blur and @react-native-community/blur.
• Common blur issues and fixesVideo stays sharp, grey Android blur, Modal, New Architecture crashes and more.

API

<BlurView /> accepts every View prop, plus:

tint values

How it works

iOS. A UIVisualEffectView with the matching UIBlurEffect style sits over the children in content mode and underneath them in backdrop mode. intensity scrubs a paused UIViewPropertyAnimator, so every value is a real system blur rather than an opacity fade.

Android (API 31+). A RenderEffect chain applies a Gaussian blur, then a ColorMatrix that restores the brightness and saturation the blur removes and lays down the material's tint. The numbers come from Apple's own material recipes and are checked against colours sampled from iOS screenshots.

Video on Android. SurfaceViews inside the view are copied with PixelCopy (downscaled 4×, about 30 fps) and drawn in place, where the blur applies to them like everything else.

Backdrop on Android. The view records what is drawn behind it (ancestor backgrounds and earlier siblings, with scroll offsets and transforms) into a RenderNode, blurs it, and draws the children on top. It refreshes on every frame where something changed.

Web. CSS backdrop-filter: blur() saturate() with a tint background.

Limitations

• Android 11 and below have no RenderEffect, so they draw a translucent material plate instead of a blur.
• blurRadius and saturation are ignored on iOS.
• Backdrop inside <Modal> on Android copies the screen behind with PixelCopy at about 30 fps, half resolution.
• Backdrop mode on Android cannot see a SurfaceView behind it. Use a TextureView video (surfaceType="textureView" in expo-video). Content mode blurs SurfaceView video fine.

FAQ