React Native Blur View with Liquid Glass Effect

Description:

A React Native component for creating native blur and liquid glass effects in your apps.

It is designed for the new React Native architecture (Fabric) and provides hardware-accelerated blur effects on both iOS and Android platforms.

Features

🌊 Liquid Glass Effects: Implements native liquid glass effects on iOS 26+ using the UIGlassEffect API.
📱 Cross-Platform Support: Delivers hardware-accelerated blur on Android and native blur effects on iOS.
🚀 Modern Architecture: Built as a Turbo Module for full compatibility with React Native’s Fabric architecture.
🎨 Multiple Blur Styles: Offers various blur types, including iOS system materials, with graceful fallbacks on Android.
🔧 Customizable Properties: You can adjust blur intensity, tint colors, and opacity to match your app’s design.
♿ Accessibility Ready: Automatically adapts to the “Reduce Transparency” setting by displaying a solid fallback color.

Preview

Use Cases

Modal Views: Apply a blur effect to the background when a modal or dialog is active to focus the user’s attention on the foreground content.
Navigation and Tab Bars: Create translucent navigation and tab bars that blur the content scrolling beneath them for a layered, modern look.
Overlays and Banners: Use a frosted glass effect for notification banners or informational overlays that appear on top of other content.
Card Backgrounds: Design interactive UI cards where the background is a blurred version of an image or content layer behind it.

How to Use It

1. Install react-native-blur.

npm install @sbaiahmed1/react-native-blur

2. For iOS, navigate to the ios directory and install the necessary pods.

cd ios && pod install

The current version of the library requires Xcode 26.0 or higher to support liquid glass effects. If you are using an older version of Xcode, you should install version 2.1.0 of the library instead.

3. To add a simple blur effect, import the BlurView component and place it in your layout. You can control the appearance with the blurType and blurAmount props.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { BlurView } from '@sbaiahmed1/react-native-blur';
export default function App() {
  return (
    <View style={styles.container}>
      {/* Content that will be blurred */}
      <View style={styles.backgroundContent} />
      <BlurView
        style={styles.blurContainer}
        blurType="light"
        blurAmount={15}
      >
        <Text style={styles.text}>Blurred Content</Text>
      </BlurView>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  blurContainer: {
    width: 250,
    height: 150,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20,
    overflow: 'hidden', // Required for borderRadius to work
  },
  backgroundContent: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'orange', // Example background
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

4. For the liquid glass effect on compatible iOS devices, set the type prop to 'liquidGlass'. You can further customize it with glassType, glassTintColor, and glassOpacity. On Android and older iOS versions, this will fall back to a standard blur with a tint.

import { BlurView } from '@sbaiahmed1/react-native-blur';
function LiquidGlassExample() {
  return (
    <BlurView
      style={styles.glassContainer}
      type="liquidGlass"
      glassType="regular"
      glassTintColor="#007AFF"
      glassOpacity={0.7}
    >
      <Text>Liquid Glass Effect</Text>
    </BlurView>
  );
}
// Add to your StyleSheet
const styles = StyleSheet.create({
  // ... other styles
  glassContainer: {
    padding: 20,
    borderRadius: 25,
    overflow: 'hidden',
  },
});

5. All available props.

type: 'blur' | 'liquidGlass'
Specifies the type of effect to apply. The default is 'blur'. Note that 'liquidGlass' is only available on iOS 26+ and falls back to an enhanced blur on Android.
blurType: BlurType
Sets the style of the blur effect. Common values include 'light', 'dark', 'xlight', and various iOS system material types. The default is 'xlight'.
blurAmount: number
Controls the intensity of the blur effect, ranging from 0 to 100. The default value is 10.
glassType: GlassType
Defines the type of glass effect when type is set to 'liquidGlass'. Available options are 'clear' and 'regular'. The default is 'clear'.
glassTintColor: string
Applies a tint color to the glass effect. The default is 'clear'.
glassOpacity: number
Adjusts the opacity of the glass effect, from 0 (fully transparent) to 1 (fully opaque). The default is 1.0.
isInteractive: boolean
(iOS only) Determines if the liquid glass effect responds to touch and movement. This prop only applies when type is 'liquidGlass' on iOS 26+. The default is true.
reducedTransparencyFallbackColor: string
Sets the solid color to display when the user has enabled “Reduce Transparency” in their device’s accessibility settings. The default is '#FFFFFF'.
style: ViewStyle
Applies standard React Native styling to the BlurView container.
children: ReactNode
Renders any child components inside the BlurView.

FAQs

Q: What is the “liquid glass” effect and on which platforms is it available?
A: The liquid glass effect is a modern visual style available on iOS 26 and newer, implemented using Apple’s native UIGlassEffect API. On Android and older iOS versions, the component provides a fallback to an enhanced blur with a tint overlay to approximate the effect.

Q: Does this library provide a true blur effect on Android?
A: Yes, it provides a hardware-accelerated, real-time blur effect on Android by using the native RenderEffectBlur on supported API levels.

Q: What are the main requirements for using the latest version of this library?
A: To use version 3.0.0 and above, which includes the liquid glass effects, your development environment must have Xcode 26.0 or higher. For Android, the minimum SDK level is 24 (Android 7.0).