React Native Blur: Real Frosted Glass & Video Blur on Android (Demo & Logic)
Backdrop blur on iOS and Android: frosted button over a playing video, frosted popup over a map, and frosted sticky header over a scrolling list. The Problem: Why Video Escapes The Blur on Android On iOS, UIVisualEffectView handles blur at the system compositor level, blurring everything underneath—including live video. On Android, players like expo-video and react-native-video default to…
React Native Blur offers realistic frosted glass and video blur effects for Android, addressing a significant issue with video playback. On iOS, UIVisualEffectView handles blur at the system level, blurring everything beneath, including live video. However, on Android, video players like expo-video and react-native-video default to SurfaceView for hardware playback.
This causes the WindowManager to create a hole in the app window, allowing video frames to be composited directly by Android's SurfaceFlinger outside the standard View hierarchy. Standard blur libraries can't capture this video, resulting in a sharp, untinted appearance behind the blur.
To overcome this limitation, @nguyenduy1412/react-native-blur implemented a native pipeline for the New Architecture (Fabric). The process involves PixelCopy Frame Capture, which locates child SurfaceView instances, captures frames via Android's PixelCopy API (downscaled to 4× at approximately 30 FPS on a worker thread), and replaces the transparent hole with the captured stream.
Following this, RenderEffect Blur applies a hardware-accelerated Gaussian blur to the stream on the GPU. To compensate for the washout effect of Gaussian blur, a Color Matrix Calibration recreates Apple's internal .materialrecipe specifications using a ColorMatrix chain, matching native iOS materials with a minimal color error of only 1.95/255.
The library provides four blur options: no blur at all, the React Native Blur implementation, the same library for iOS, and the standard Expo blur on Android. Quick comparisons show that React Native Blur successfully handles video blur on Android through the PixelCopy + RenderEffect method, unlike Expo Blur, which leaves video sharp.
For backdrop overlays such as headers, popups, and sticky headers, React Native Blur offers native, tint-controlled, and color-calibrated solutions, outperforming Expo and standard blur implementations on Android. The library works seamlessly with both the React Native CLI and Expo, providing comprehensive installation instructions, API references, and examples on its GitHub repository and npm page.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
