Common React Native blur issues and how to fix them

Q: Which Android versions get a real blur?

Android 12 (API 31) and later, where RenderEffect exists. Android 11 and earlier draw a translucent material plate without blur, so content stays readable.

The problems developers report most often in expo-blur and @react-native-community/blur, why they happen, and how @nguyenduy1412/react-native-blur handles each one.

GitHub npm Changelog llms.txt

Problem	Why it happens	In this library
Video stays sharp behind the blur on Android	Players draw into a `SurfaceView`, outside the view tree	SurfaceView frames are copied with PixelCopy and blurred
Android blur looks grey and flat	One Gaussian blur plus a flat tint	Per-material colour matrix calibrated against iOS (1.95 / 255 mean error)
Overlay shows only a tint on Android	A view-based blur over other views has nothing of its own to blur	`mode="backdrop"` records and blurs what is behind the view
Blur does not work inside `<Modal>` on Android	Modal is a separate window	The activity window is copied with PixelCopy and blurred
Crashes or "not found in UIManager" on the New Architecture	Legacy bridge components	Native Fabric component generated with Codegen
Build fails: `Could not find BlurView-version-2.0.3.aar`	Dependency on a JitPack artifact	No third-party native dependencies
Android 15 16 KB page size warnings	Prebuilt native `.so` libraries	Pure Kotlin and Swift, no native libraries
Cannot animate `intensity` with Reanimated	Ref or props land on a wrapper view	The ref is forwarded to the native view; `useAnimatedProps` works
Blur ignores the app's dark mode override on Android	Night-mode overrides are not dispatched to views	The current `Appearance` scheme is passed to the native view
`borderTopLeftRadius` and other corners ignored	Only a uniform radius is applied	Per-corner radii clip the blur, tint and rim
Backdrop freezes while scrolling on Android 12	Android 12 caches the blurred layer of a reused RenderNode	A fresh RenderNode per frame on API 31-32
Blur strength changes after navigation or returning from background (iOS)	The paused animator behind `intensity` is reset	The effect is rebuilt when the view re-enters a window or the app returns to the foreground
Android 11 and older show an unreadable overlay	No RenderEffect, and no fallback	A translucent plate in the material's colour

Animate intensity with Reanimated

import Animated, { useAnimatedProps, useSharedValue, withTiming } from "react-native-reanimated";
import BlurView from "@nguyenduy1412/react-native-blur";

const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);

function Overlay({ visible }) {
  const intensity = useSharedValue(0);
  useEffect(() => {
    intensity.value = withTiming(visible ? 80 : 0);
  }, [visible]);
  const animatedProps = useAnimatedProps(() => ({ intensity: intensity.value }));
  return <AnimatedBlurView mode="backdrop" animatedProps={animatedProps} style={StyleSheet.absoluteFill} />;
}

Install

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.

FAQ

Why is my BlurView grey on Android?

Either the BlurView sits over other views in content mode (use mode="backdrop"), the device runs Android 11 or earlier (no RenderEffect), or the library applies a flat tint. This library rebuilds iOS materials with a calibrated colour matrix.

How do I fix 'Could not find BlurView-version-2.0.3.aar'?

That error comes from libraries depending on Dimezis BlurView from JitPack. This library has no third-party native dependencies.

Does it work in Expo Go?

No. The package contains native code, so it needs a development build (npx expo run:ios / npx expo run:android) or EAS Build. React Native CLI apps work after pod install and a rebuild.

Does it work without Expo?

Yes. Since 2.0 it is a plain React Native Fabric component, so a React Native CLI app only needs npm install and pod install.

Which Android versions get a real blur?

Android 12 (API 31) and later, where RenderEffect exists. Android 11 and earlier draw a translucent material plate without blur, so content stays readable.