0.2.0 • Published yesterday

react-native-blur-vibe

Licence

MIT

Version

0.2.0

Deps

Size

149 kB

Vulns

Weekly

Summary Dependency Versions

React Native Blur-Vibe

A modern, actively maintained blur view for React Native. Works on iOS and Android with both Old (Paper) and New (Fabric) Architecture support.

The key difference from other blur libraries: overlayColor works on both iOS and Android — letting you control blur visibility the same way CSS backdrop-filter + background-color works on the web.

Platform matrix

Feature	iOS 13+	Android API 31+	Android API 21–30
Backdrop blur
Overlay tint
Progressive blur
Noise texture
Full RN style props
`blurType`
`enabled` / `autoUpdate`
`blurRadius` downsample
Split-screen / PiP / Freeform
Old Architecture (Paper)
New Architecture (Fabric)

Installation

npm install react-native-blur-vibe
# or
yarn add react-native-blur-vibe

Android

Minimum SDK: API 21 (Android 5.0). No extra configuration needed.

Quick start

import { BlurView } from 'react-native-blur-vibe';
import { StyleSheet, ImageBackground } from 'react-native';

export default function Card() {
  return (
    <ImageBackground source={require('./bg.jpg')} style={styles.container}>
      <BlurView
        blurAmount={25}
        overlayColor="#FFFFFF20"
        style={StyleSheet.absoluteFill}
      />
    </ImageBackground>
  );
}

Props

`blurAmount`


Type	`number`
Default	`10`
Platform	iOS + Android

Blur intensity from 0 (no blur) to 100 (maximum blur).

`blurAmount`	CSS equivalent	Visual feel
`5`	`backdrop-blur-sm` (4px)	Subtle hint
`15`	`backdrop-blur` (8px)	Light glass
`25`	`backdrop-blur-md` (12px)	Standard card
`50`	`backdrop-blur-xl` (24px)	Heavy glass
`75`	`backdrop-blur-2xl`	Dense blur
`100`	`backdrop-blur-3xl`	Maximum — nearly opaque frosted panel

<BlurView blurAmount={30} style={StyleSheet.absoluteFill} />

`overlayColor`


Type	`string`
Default	`"transparent"` (iOS) · `"#00000030"` (Android)
Platform	iOS + Android

RGBA color composited on top of the blur. Equivalent to:

backdrop-filter: blur(Xpx);
background-color: <overlayColor>;

Value	Effect
`"#00000000"`	Transparent — pure blur, no tint
`"#00000040"`	25% black tint — dark frosted glass
`"#FFFFFF30"`	19% white tint — light frosted glass
`"#FF000080"`	50% red tint
`"#000000FF"`	Fully opaque — blur hidden

Supported formats: "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"

`blurType`


Type	`BlurType`
Default	`"light"`
Platform	iOS only — ignored on Android

Maps to UIBlurEffect.Style. Use overlayColor to tint on Android.

Value	Description
`"light"`	Light frosted glass
`"dark"`	Dark frosted glass
`"extraLight"`	Brighter than light
`"regular"`	System default
`"prominent"`	Higher contrast
`"systemUltraThinMaterial"`	Thinnest, most transparent
`"systemThinMaterial"`	Thin material
`"systemMaterial"`	Medium — iOS sheet background
`"systemThickMaterial"`	Thick material
`"systemChromeMaterial"`	For toolbars / nav bars

Also available: Light and Dark suffixed variants (e.g. "systemMaterialDark"). See BlurType in types.

<BlurView blurType="systemMaterial" blurAmount={100} style={StyleSheet.absoluteFill} />

`reducedTransparencyFallbackColor`


Type	`string`
Default	`"#F2F2F2"`
Platform	iOS + Android

Solid color shown when blur is unavailable (iOS Reduce Transparency enabled, or Android API < 21).

`blurRadius`


Type	`number` (integer 1–8)
Default	`4`
Platform	Android API < 31 only

RenderScript capture downsample factor. Higher = faster but softer. Ignored on API 31+ and iOS.

`enabled`


Type	`boolean`
Default	`true`
Platform	iOS + Android

Enable or disable the blur effect. When false, the view renders transparently. Useful for toggling blur based on scroll position or performance mode.

<BlurView blurAmount={30} enabled={isScrolling ? false : true} style={StyleSheet.absoluteFill} />

`autoUpdate`


Type	`boolean`
Default	`true`
Platform	iOS + Android

When false, blur is captured once at mount and never updated. Use for completely static backgrounds (e.g. blurred album art) to eliminate all per-frame cost on Android API < 31.

<BlurView blurAmount={40} autoUpdate={false} style={StyleSheet.absoluteFill} />

`progressiveBlurDirection`


Type	`ProgressiveBlurDirection`
Default	`"none"`
Platform	iOS + Android API 31+

Direction the blur intensity fades across the view.

Value	Blur starts at	Fades towards
`"none"`	— uniform blur —	—
`"topToBottom"`	Top edge	Bottom edge
`"bottomToTop"`	Bottom edge	Top edge
`"leftToRight"`	Left edge	Right edge
`"rightToLeft"`	Right edge	Left edge
`"radial"`	Center	Outer edges

<BlurView
  blurAmount={40}
  progressiveBlurDirection="topToBottom"
  progressiveStartIntensity={1}
  progressiveEndIntensity={0}
  style={StyleSheet.absoluteFill}
/>

`progressiveStartIntensity`


Type	`number` (0.0–1.0)
Default	`1.0`
Platform	iOS + Android API 31+

Blur intensity at the start of the gradient direction. 1.0 = full blur, 0.0 = no blur.

`progressiveEndIntensity`


Type	`number` (0.0–1.0)
Default	`0.0`
Platform	iOS + Android API 31+

Blur intensity at the end of the gradient direction.

`noiseFactor`


Type	`number` (0.0–1.0)
Default	`0.08`
Platform	iOS + Android API 31+

Noise grain overlay for tactile frosted-glass texture.

Value	Effect
`0`	No noise — clean digital blur
`0.08`	Subtle grain (default)
`0.15`	Noticeable grain
`0.30`	Heavy grain

BlurView accepts all standard React Native View style props via StyleSheet — including borderRadius, borderColor, borderWidth, opacity, backgroundColor, elevation, shadowColor, and all others.

`borderRadius` via StyleSheet

Use borderRadius directly inside style — it works exactly like any other RN view:

// ✅ Via StyleSheet (recommended)
<BlurView
  blurAmount={30}
  overlayColor="#FFFFFF20"
  style={{
    borderRadius: 20,
    overflow: 'hidden',   // required on iOS for clipping
    ...StyleSheet.absoluteFillObject,
  }}
/>

// ✅ Via StyleSheet.create
const styles = StyleSheet.create({
  blur: {
    borderRadius: 16,
    overflow: 'hidden',
    position: 'absolute',
    top: 0, left: 0, right: 0, bottom: 0,
  },
});

<BlurView blurAmount={25} overlayColor="#00000040" style={styles.blur} />

Note: Add overflow: 'hidden' when using borderRadius on iOS to ensure child content is clipped correctly. On Android this is handled automatically via clipToOutline.

Rounded frosted card

import { BlurView } from 'react-native-blur-vibe';
import { StyleSheet, View, Text, ImageBackground } from 'react-native';

function FrostedCard() {
  return (
    <ImageBackground source={require('./bg.jpg')} style={styles.bg}>
      <View style={styles.card}>
        <BlurView
          blurAmount={35}
          overlayColor="#FFFFFF18"
          noiseFactor={0.1}
          style={[StyleSheet.absoluteFill, styles.blur]}
        />
        <Text style={styles.title}>Now Playing</Text>
      </View>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  bg: { flex: 1 },
  card: {
    margin: 20,
    borderRadius: 24,
    overflow: 'hidden',   // clips blur to card shape on iOS
    padding: 20,
  },
  blur: {
    borderRadius: 24,     // matches card borderRadius
  },
  title: { color: '#fff', fontSize: 18, fontWeight: '600' },
});

Individual corner radii

<BlurView
  blurAmount={25}
  style={{
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0,
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
    overflow: 'hidden',
  }}
/>

Border with blur

<BlurView
  blurAmount={30}
  overlayColor="#FFFFFF10"
  style={{
    borderRadius: 16,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.3)',
    overflow: 'hidden',
  }}
/>

Usage examples

Basic frosted glass card

<ImageBackground source={require('./bg.jpg')} style={styles.bg}>
  <View style={styles.card}>
    <BlurView
      blurAmount={30}
      overlayColor="#FFFFFF20"
      noiseFactor={0.1}
      style={[StyleSheet.absoluteFill, { borderRadius: 20 }]}
    />
    <Text style={styles.title}>Hello</Text>
  </View>
</ImageBackground>

Sticky header with progressive blur

<BlurView
  blurAmount={40}
  overlayColor="#00000020"
  progressiveBlurDirection="topToBottom"
  progressiveStartIntensity={1}
  progressiveEndIntensity={0}
  style={[StyleSheet.absoluteFill, { height: 120 }]}
/>

Bottom sheet scrim

<BlurView
  blurAmount={50}
  overlayColor="#00000040"
  progressiveBlurDirection="bottomToTop"
  progressiveStartIntensity={1}
  progressiveEndIntensity={0}
  style={StyleSheet.absoluteFill}
/>

Music player card — dark frosted glass

<BlurView
  blurAmount={60}
  blurType="systemMaterial"
  overlayColor="#00000050"
  noiseFactor={0.12}
  style={[StyleSheet.absoluteFill, { borderRadius: 16 }]}
/>

Toggle blur on scroll

const [isScrolling, setIsScrolling] = React.useState(false);

<BlurView
  blurAmount={30}
  enabled={!isScrolling}
  style={StyleSheet.absoluteFill}
/>

Static background blur (best performance)

// Capture once, never update — great for album art, splash screens
<BlurView
  blurAmount={50}
  autoUpdate={false}
  overlayColor="#00000030"
  style={StyleSheet.absoluteFill}
/>

<Modal visible={visible} transparent>
  <BlurView
    blurAmount={20}
    overlayColor="#00000060"
    style={StyleSheet.absoluteFill}
  />
  <View style={styles.content}>{/* content */}</View>
</Modal>

Inside FlatList / FlashList

<FlatList
  data={items}
  renderItem={({ item }) => (
    <ImageBackground source={{ uri: item.image }} style={styles.card}>
      <BlurView
        blurAmount={20}
        overlayColor="#FFFFFF15"
        style={[StyleSheet.absoluteFill, { borderRadius: 12 }]}
      />
      <Text>{item.title}</Text>
    </ImageBackground>
  )}
/>

TypeScript

Full TypeScript support with detailed JSDoc on every prop.

import type { BlurViewProps, BlurType, ProgressiveBlurDirection } from 'react-native-blur-vibe';

License

MIT Pritam Nanda