react-native-blur: frosted glass and backdrop blur for React Native and Expo

⚡ The gist in 5 seconds - The react-native-blur library by nguyenduy1412 delivers backdrop blur and frosted glass for React Native and Expo on iOS and Android. - Available on GitHub; install via npm, yarn, pnpm, or bun, then pod install for iOS. - Limitation: due to native code, it doesn't work in Expo Go — you need a development build or EAS Build. ### 🔍 What we found The react-native-blur project has been published on GitHub — a native Fabric component for React Native CLI and Expo with no JS dependencies. On iOS it uses UIVisualEffectView with system styles; on Android it uses a RenderEffect chain (Gaussian blur + color matrix), calibrated against iOS screenshots: an average error of 1.95/255 across 187 color samples. Two modes are supported: backdrop (blurs what's behind the view — overlays, headers, tab bars) and content (blurs the internal content, including an entire screen or video). Android also has a separate mechanism for SurfaceView players, such as expo-video and react-native-video. Minimum requirements: React Native 0.76 with the new architecture (Fabric), iOS 15.1, and Android API 31 (Android 12) for full blur. On older Android versions, only tint and border remain. Expo SDK 57 has been verified. A single prop, intensity from 0 to 100, controls blur, color, and highlight simultaneously; light and dark themes are supported, plus tintColor, blurRadius, and saturation settings. For web, there's a fallback to CSS backdrop-filter. ### 💡 Why it matters Most existing blur libraries for React Native break on Android in three typical ways: they don't blur overlays, can't see video from SurfaceView, and look different than on iOS. Here, backdrop mode captures everything rendered behind the view and blurs it, so headers, cards, popups, and buttons behave on Android just like on iOS. Content mode automatically picks up SurfaceView players, so video — including Play/Stop controls on top of it — blurs correctly. It's a ready-made cross-platform solution for apps that need a "glassy" interface. ### 🧩 Context The video problem on Android arises because the SurfaceView playing the video is composited by the system on top of the app window — libraries that take a snapshot of the view tree simply can't see that layer. So the video stays sharp behind the "glass." react-native-blur works around this by operating at the native render level. On Android, it can also emulate iOS system materials, including an edge highlight that creates a sense of glass "thickness." Calibration across 187 colors brings visual fidelity close to the original. For developers, this reduces the need to write per-platform workarounds.

🔗 Read on github.com