react-native-modern-blur-view

A lightweight, Fabric/New Architecture BlurView for React Native that blurs whatever is behind it — with precise control over blur radius, tint color, and tint opacity. Works on iOS & Android (Fabric/New Architecture).

✨ Includes a demo app with a draggable blur square and adjustable controls.

Features

• 🧊 True background blur, not a screenshot hack
• 🎛️ Props for blurRadius, tintColor, tintOpacity
• 🧱 Drop-in <View/> replacement (accepts all ViewProps)
• ⚙️ !! ONLY !! Compatible with New Architecture

Installation

# with npm
npm i react-native-modern-blur-view

# with yarn
yarn add react-native-modern-blur-view

iOS (New Architecture)

cd ios
RCT_NEW_ARCH_ENABLED=1 pod install
cd ..

• Xcode ≥ 15 recommended.

Android

• No manual steps required.
• Tested on Android 12+. (Older versions may work, but are not tested.)

Quick Start

import { View, StyleSheet } from 'react-native';
import { BlurView } from 'react-native-modern-blur-view';

export default function Example() {
  return (
    <View style={styles.container}>
      {/* Content behind the blur goes here */}

      <BlurView
        enabled
        blurRadius={16}        // 0..25 on Android, > 25 on iOS
        tintColor="#2323FF"    // any CSS color
        tintOpacity={0.35}     // 0..1
        style={styles.blurBox}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  blurBox: {
    position: 'absolute',
    right: 24,
    bottom: 24,
    width: 160,
    height: 160,
    borderRadius: 16,
  },
});

Props

The component extends ViewProps.

| Prop | Type | Default | Platform | Description | | ------------- | ---------------------- | ----------- | ----------- | -------------------------------------------------------------------------------- | | blurRadius | number | 10 | iOS/Android | Strength of blur, 0–25 (Android scale, > 25 values are supported on iOS). Use higher values for heavier blur. | | tintColor | string | undefined | iOS/Android | CSS color string (#RRGGBB, etc.). Applied over the blur. | | tintOpacity | number | 0 | iOS/Android | 0–1 opacity of the tint overlay. | | enabled | boolean | true | iOS/Android | Toggles the effect without unmounting the view. | | style | StyleProp<ViewStyle> | — | iOS/Android | Size/position/border radius, like any <View/>. |

ℹ️ The view blurs content behind it, so you’ll usually want it properly positioned over existing content.

Demo App (Draggable BlurView)

Demo Videos

Android

https://github.com/user-attachments/assets/4d49d68e-dd6c-4975-b0a6-6da96566a677

iOS

https://github.com/user-attachments/assets/8b656e06-8374-4672-bc10-18d86b0a1629

This repo ships with an example showcasing:

• Scrollable content (images + text)
• A draggable floating BlurView (no extra gesture libs)
• Bottom control panel with + / – buttons for size, opacity, radius

Run it locally:

# in the repo root
yarn
yarn prepare
cd example
yarn

# iOS
yarn ios

# Android (device/emulator running)
yarn android

Tips & Best Practices

• Visual parity with design tools: The blurRadius passes the raw value to underlying views. On Android 25 is the max value, on iOS it goes way beyond.

• Performance: Keep the blur area reasonably sized. On older devices, very large blurs can be expensive.

API Surface (TypeScript)

import { ViewProps } from 'react-native';

export type BlurViewProps = ViewProps & {
  blurRadius?: number;   // float
  tintColor?: string;    // '#2323FF', etc.
  tintOpacity?: number;  // 0..1
  enabled?: boolean;     // default: true
};

Have a feature request? Open an issue!

Contributing

PRs welcome! Please:

1. Branch from main
2. Keep changes minimal and well-scoped
3. Add/adjust example if you change behavior
4. Run example on both iOS & Android before opening your PR

Credits

• Hardik Srivastava (@oddlyspaced)

References

• https://github.com/Kureev/react-native-blur
• https://github.com/efremidze/VisualEffectView