Blur a playing video in React Native on Android

On Android, most blur libraries leave a playing video perfectly sharp behind the glass. This page explains why, and how to blur expo-video and react-native-video.

GitHubnpmChangelogllms.txt

Why the video stays sharp

Android players such as expo-video and react-native-video draw frames into a SurfaceView. The system compositor puts a SurfaceView in its own layer, outside your app's view tree. A blur that captures or renders the view tree never sees that layer, so the video shows through untouched.

How this library blurs it

BlurView finds SurfaceViews among its children, copies their frames with PixelCopy (downscaled 4×, about 30 fps) and draws the copy in their place. The RenderEffect blur then applies to the video like everything else.

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.

Blur a whole video (content mode)

import BlurView from "@nguyenduy1412/react-native-blur";
import { useVideoPlayer, VideoView } from "expo-video";

export function BlurredVideo({ source, locked }) {
  const player = useVideoPlayer(source, (p) => p.play());
  return (
    <BlurView style={{ flex: 1 }} intensity={locked ? 60 : 0}>
      <VideoView player={player} style={{ flex: 1 }} />
    </BlurView>
  );
}

Content mode works with the default SurfaceView. Set intensity to 0 to remove the blur without unmounting the player.

Frosted button over a video (backdrop mode)

To blur only the area under a button and keep the rest of the video sharp, use backdrop mode and render the video into a TextureView on Android:

<View style={{ flex: 1 }}>
  <VideoView player={player} surfaceType="textureView" style={StyleSheet.absoluteFill} />

  <BlurView mode="backdrop" intensity={85} tint="dark" style={{ borderRadius: 999, paddingVertical: 12, alignItems: "center" }}>
    <Text style={{ color: "white" }}>Play</Text>
  </BlurView>
</View>

With react-native-video, render into a TextureView on Android (viewType={ViewType.TEXTURE}, or useTextureView in older versions).

Limits

• Video copies refresh at about 30 fps at quarter resolution. This is invisible once blurred but noticeable at very low intensity.
• Backdrop mode cannot see a SurfaceView behind it; use a TextureView.

FAQ