rn-blur-overlay

GPU-accelerated Gaussian blur container for React Native. Drop it over any content to apply a real native blur — no JS-side image manipulation, no @shopify/react-native-skia dependency required.

| Platform | Blur engine | Sigma match | |---|---|---| | iOS 15.5+ | CIGaussianBlur on Metal | Exact (same σ as Skia) | | Android API 31+ | RenderEffect (Skia-backed) | Exact | | Android API 24–30 | RenderScript + downsample | Approximate |

Installation

npm install rn-blur-overlay

iOS — run CocoaPods after installing:

cd ios && pod install

Android — register the package in MainApplication.kt:

import com.rnblurview.BlurViewPackage

// Inside the packages list:
packages.add(BlurViewPackage())

Usage

import { BlurView } from 'rn-blur-overlay';
import { Image, StyleSheet, View } from 'react-native';

export const BlurredImage = ({ uri }: { uri: string }) => (
  <View style={styles.container}>
    <Image source={{ uri }} style={StyleSheet.absoluteFill} resizeMode="cover" />
    <BlurView blur={20} />
  </View>
);

const styles = StyleSheet.create({
  container: { width: 300, height: 200, overflow: 'hidden' },
});

By default BlurView uses position: 'absolute' and fills its parent (left: 0, right: 0, top: 0, bottom: 0). Place it after the content you want to blur in the view hierarchy.

Props

| Prop | Type | Required | Description | |---|---|---|---| | blur | number | Yes | Gaussian sigma (σ). Higher = more blur. | | style | ViewStyle | No | Overrides the default absoluteFill style. | | pointerEvents | 'none' \| 'auto' \| 'box-none' \| 'box-only' | No | Standard React Native pointer events. | | children | ReactNode | No | Content rendered inside the blur layer. |

Happy Coding :)