@sbaiahmed1/react-native-blur
Advanced tools
A modern React Native library providing three specialized components for advanced visual effects: BlurView for native blur effects, LiquidGlassView for cutting-edge liquid glass effects on iOS 26+ (with Android fallback to enhanced blur) and ProgressiveBlurView for smooth, variable blur transitions.`
📦 Current Version: 4.0.0 | ⚠️ Breaking Changes: If upgrading from 3.x, see Breaking Changes section.
| Platform | Minimum Version |
|---|---|
| iOS | iOS 13.0+ |
| Xcode | Xcode 26.0+ (for liquid glass support) |
| React Native | 0.68+ (New Architecture) |
| Android | API 24+ (Android 7.0) |
| Android Gradle Plugin | 8.9.1+ |
⚠️ Note: LiquidGlassView requires Xcode 26.0+ and iOS 26+ for full glass effects. The component automatically falls back to enhanced blur on older versions.
Important: Version 4.0.0 introduces significant API changes. If you're upgrading from 3.x, please read this section carefully.
In version 3.x, we had a single BlurView component with a type prop that switched between blur and liquid glass modes:
// ❌ Old API (v3.x) - DEPRECATED
<BlurView
type="blur" // or "liquidGlass"
blurType="light"
blurAmount={10}
glassType="regular" // Mixed blur and glass props
glassTintColor="#007AFF"
/>
In version 4.0.0, we've separated concerns into two dedicated components for better architecture and cleaner APIs:
// ✅ New API (v4.0.0) - Current
import { BlurView, LiquidGlassView } from '@sbaiahmed1/react-native-blur';
// For blur effects
<BlurView
blurType="light"
blurAmount={10}
/>
// For liquid glass effects (iOS 26+)
<LiquidGlassView
glassType="regular"
glassTintColor="#007AFF"
glassOpacity={0.8}
/>
If you were using blur mode:
// Before (3.x)
<BlurView type="blur" blurType="light" blurAmount={10} />
// After (4.0.0)
<BlurView blurType="light" blurAmount={10} />
If you were using liquid glass mode:
// Before (3.x)
<BlurView
type="liquidGlass"
glassType="regular"
glassTintColor="#007AFF"
glassOpacity={0.8}
/>;
// After (4.0.0)
import { LiquidGlassView } from '@sbaiahmed1/react-native-blur';
<LiquidGlassView
glassType="regular"
glassTintColor="#007AFF"
glassOpacity={0.8}
/>;
BlurView component with type prop (blur or liquidGlass)BlurView for blur, LiquidGlassView for glass effectsBlurView - Dedicated blur effects component with multiple blur typesProgressiveBlurView - Variable/gradient blur transitions (iOS & Android)LiquidGlassView - Separate component for iOS 26+ liquid glass effectsBlurView and LiquidGlassView components for clean architecture// Before
import { BlurView } from '@react-native-community/blur';
// After - same API, now with dedicated components
import { BlurView, LiquidGlassView } from '@sbaiahmed1/react-native-blur';
// Use BlurView for standard blur
<BlurView blurType="light" blurAmount={10} />
// Or LiquidGlassView for glass effects (iOS 26+)
<LiquidGlassView glassType="regular" glassTintColor="#007AFF" glassOpacity={0.8} />
// Before
import { BlurView } from 'expo-blur';
<BlurView intensity={50} tint="light" />;
// After
import { BlurView } from '@sbaiahmed1/react-native-blur';
<BlurView blurAmount={50} blurType="light" />;
Migration Steps:
npm uninstall @react-native-community/blur expo-blurnpm install @sbaiahmed1/react-native-blurcd ios && pod install⚠️ ANDROID USERS: This library requires Android Gradle Plugin (AGP) version 8.9.1 or newer. See Android Setup Requirements for details.
npm install @sbaiahmed1/react-native-blur
# or
yarn add @sbaiahmed1/react-native-blur
Run pod install:
cd ios && pod install
The library uses native Android blur with automatic platform detection. No additional configuration required beyond ensuring minimum requirements:
⚠️ AGP Requirement: Requires Android Gradle Plugin 8.9.1 or newer. Check
android/build.gradle:classpath "com.android.tools.build:gradle:8.9.1" // or higher
📦 Dependency: The library uses QmBlurView from Maven Central:
implementation 'com.qmdeve:QmBlurView:1.0.4.3'
The implementation automatically handles different Android versions:
RenderEffectBlurRenderScriptBlurThe library now provides three specialized components for different visual effects:
Use BlurView for standard blur effects across all platforms:
import React from 'react';
import { View, Text } from 'react-native';
import { BlurView } from '@sbaiahmed1/react-native-blur';
export default function App() {
return (
<View style={{ flex: 1 }}>
<BlurView
blurType="light"
blurAmount={20}
style={{
position: 'absolute',
top: 100,
left: 50,
right: 50,
height: 200,
borderRadius: 20,
}}
>
<Text>Content with blur background</Text>
</BlurView>
</View>
);
}
import React from 'react';
import { BlurView } from '@sbaiahmed1/react-native-blur';
function MyComponent() {
return (
<BlurView
blurType="systemMaterial"
blurAmount={50}
reducedTransparencyFallbackColor="#FFFFFF80"
style={{
padding: 20,
borderRadius: 15,
}}
>
<Text>Advanced blur with custom fallback</Text>
</BlurView>
);
}
NOTE: Progressive blur offset works different between android and iOS
Use ProgressiveBlurView for smooth, gradient blur transitions. This component works on both iOS and Android.
import React from 'react';
import { ProgressiveBlurView } from '@sbaiahmed1/react-native-blur';
function GradientBlurComponent() {
return (
<ProgressiveBlurView
blurType="light"
blurAmount={30}
direction="blurredTopClearBottom"
startOffset={0}
style={{ height: 200 }}
>
<Text>Progressive blur from top (blurred) to bottom (clear)</Text>
</ProgressiveBlurView>
);
}
Perfect for paywall/premium content:
<View style={{ position: 'relative' }}>
<Text>Long content here...</Text>
{/* Progressive blur overlay */}
<ProgressiveBlurView
blurType="light"
blurAmount={20}
direction="blurredBottomClearTop"
startOffset={0.2}
style={{
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: 200,
}}
>
<Text>🔒 Unlock to Read More</Text>
<Button title="Purchase" />
</ProgressiveBlurView>
</View>
Use LiquidGlassView for cutting-edge liquid glass effects. Note: This component automatically falls back to enhanced blur on Android and older iOS versions.
import React from 'react';
import { LiquidGlassView } from '@sbaiahmed1/react-native-blur';
function LiquidGlassComponent() {
return (
<LiquidGlassView
glassType="regular"
glassTintColor="#007AFF"
glassOpacity={0.8}
style={{
padding: 20,
borderRadius: 20,
}}
>
<Text>Beautiful liquid glass effect</Text>
</LiquidGlassView>
);
}
import React from 'react';
import { LiquidGlassView } from '@sbaiahmed1/react-native-blur';
function InteractiveGlass() {
return (
<LiquidGlassView
glassType="regular"
glassTintColor="#007AFF"
glassOpacity={0.9}
isInteractive={true} // Enables touch interaction (iOS 26+ only)
ignoreSafeArea={false}
style={{
flex: 1,
padding: 30,
}}
>
<Text>Interactive liquid glass that responds to touch</Text>
</LiquidGlassView>
);
}
The library now provides two separate components with their own props:
All props are optional and have sensible defaults.
| Prop | Type | Default | Description |
|---|---|---|---|
blurType | BlurType | 'xlight' | The type of blur effect to apply |
blurAmount | number | 10.0 | The intensity of the blur effect (0-100) |
ignoreSafeArea | boolean | false | (iOS only) Controls whether the blur effect should ignore all safe area edges |
reducedTransparencyFallbackColor | string | '#FFFFFF' | Fallback color when reduced transparency is enabled |
style | ViewStyle | undefined | Style object for the blur view |
children | ReactNode | undefined | Child components to render inside the blur view |
All props are optional and have sensible defaults.
| Prop | Type | Default | Description |
|---|---|---|---|
blurType | BlurType | 'regular' | The type of blur effect to apply |
blurAmount | number | 20.0 | Maximum blur radius in pixels |
direction | 'blurredTopClearBottom' | 'blurredBottomClearTop' | 'blurredTopClearBottom' | Direction of the blur gradient |
startOffset | number | 0.0 | Where the gradient starts (0.0 to 1.0) |
reducedTransparencyFallbackColor | string | '#FFFFFF' | Fallback color when reduced transparency is enabled |
style | ViewStyle | undefined | Style object for the blur view |
children | ReactNode | undefined | Child components to render inside the blur view |
Platform Note:
ProgressiveBlurViewworks on both iOS and Android.
- iOS: Uses private Core Animation filters for variable blur effects
- Android: Extends QMBlur's BlurView with custom gradient masking to create progressive blur effect
All props are optional and have sensible defaults.
| Prop | Type | Default | Description |
|---|---|---|---|
glassType | GlassType | 'clear' | The type of glass effect (iOS 26+ only) |
glassTintColor | string | 'clear' | The tint color for glass effect. Accepts hex colors or color names |
glassOpacity | number | 1.0 | The opacity of glass effect (0-1) |
isInteractive | boolean | true | (iOS 26+ only) Controls whether the liquid glass effect is interactive and reacts to touch |
ignoreSafeArea | boolean | false | (iOS only) Controls whether the glass effect should ignore all safe area edges |
reducedTransparencyFallbackColor | string | '#FFFFFF' | Fallback color when reduced transparency is enabled or on older iOS versions |
style | ViewStyle | undefined | Style object for the glass view |
children | ReactNode | undefined | Child components to render inside the glass view |
Note: The
BlurTypeandGlassTypeare exported types from the library. See Blur Types and Glass Types sections below for all available values.
Platform Note:
LiquidGlassViewautomatically falls back toBlurViewon Android and iOS versions older than iOS 26.
The following blur types are supported for BlurView:
'light' - Light blur effect'dark' - Dark blur effect'xlight' - Extra light blur effect'extraDark' - Extra dark blur effect'regular' - Regular blur (iOS 10+)'prominent' - Prominent blur (iOS 10+)'systemUltraThinMaterial' - Ultra thin material (iOS 13+)'systemThinMaterial' - Thin material (iOS 13+)'systemMaterial' - Material (iOS 13+)'systemThickMaterial' - Thick material (iOS 13+)'systemChromeMaterial' - Chrome material (iOS 13+)'systemUltraThinMaterialLight' - Ultra thin light material (iOS 13+)'systemThinMaterialLight' - Thin light material (iOS 13+)'systemMaterialLight' - Light material (iOS 13+)'systemThickMaterialLight' - Thick light material (iOS 13+)'systemChromeMaterialLight' - Chrome light material (iOS 13+)'systemUltraThinMaterialDark' - Ultra thin dark material (iOS 13+)'systemThinMaterialDark' - Thin dark material (iOS 13+)'systemMaterialDark' - Dark material (iOS 13+)'systemThickMaterialDark' - Thick dark material (iOS 13+)'systemChromeMaterialDark' - Chrome dark material (iOS 13+)The following glass types are supported for LiquidGlassView on iOS 26+:
'clear' - Clear glass effect (default)'regular' - Regular glass effect with more pronounced appearanceNote: On Android and iOS versions older than iOS 26,
LiquidGlassViewautomatically falls back to an enhanced blur effect that approximates the glass appearance.
Both components have been completely rewritten using SwiftUI for modern performance and features:
UIVisualEffectView with precise blur intensity controlUIGlassEffect API for true liquid glass effects with customizable tint colors and opacityBlurView with enhanced blur effectsThe component uses the QmBlurView library to provide real blur effects with hardware acceleration. The implementation supports multiple blur algorithms and gracefully falls back to translucent overlay approximation on devices with limited graphics capabilities.
⚠️ Platform Limitation: Liquid glass effects are iOS 26+ exclusive. On Android, LiquidGlassView automatically falls back to BlurView with enhanced blur and tint overlay to approximate the visual effect.
Both components automatically respect the "Reduce Transparency" accessibility setting:
BlurView behaviorYou can customize the fallback color using the reducedTransparencyFallbackColor prop on both components.
This package includes full TypeScript definitions for both components:
import {
BlurView,
LiquidGlassView,
BlurType,
GlassType,
BlurViewProps,
LiquidGlassViewProps,
} from '@sbaiahmed1/react-native-blur';
// BlurType is exported for type checking
const blurType: BlurType = 'systemMaterial';
// GlassType for liquid glass effects
const glassType: GlassType = 'regular';
// BlurViewProps for component props
interface MyBlurComponentProps {
blurProps: BlurViewProps;
}
// LiquidGlassViewProps for glass component props
interface MyGlassComponentProps {
glassProps: LiquidGlassViewProps;
}
// Example with BlurView properties
const blurProps: BlurViewProps = {
blurType: 'systemMaterial',
blurAmount: 50,
reducedTransparencyFallbackColor: '#FFFFFF',
};
// Example with LiquidGlassView properties
const liquidGlassProps: LiquidGlassViewProps = {
glassType: 'regular',
glassTintColor: '#007AFF',
glassOpacity: 0.8,
isInteractive: true,
};
The package includes a comprehensive example app that demonstrates both components with all their features. The example app features:
To run the example:
cd example
yarn install
# For iOS
yarn ios
# For Android
yarn android
UIVisualEffectView for performant renderingUIGlassEffect API with minimal performance impactBlurView with enhanced blur effectsBlurViewreducedTransparencyFallbackColor for better accessibilityLiquidGlassView automatically falls back to BlurView on unsupported platforms⚠️ Breaking Changes: v4.0.0 introduces a major API redesign. See Breaking Changes section above for migration guide.
BlurView into dedicated BlurView and LiquidGlassView componentstype prop: No more switching between blur/liquidGlass modes - use the appropriate component insteadLiquidGlassView component for glass-specific effectsclear and regularBlurViewProps, LiquidGlassViewProps)See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Progressive Blur Implementation:
Android Blur:
Built with create-react-native-library
FAQs
React native modern blur view
The npm package @sbaiahmed1/react-native-blur receives a total of 1,974 weekly downloads. As such, @sbaiahmed1/react-native-blur popularity was classified as popular.
We found that @sbaiahmed1/react-native-blur demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now scans OpenVSX extensions, giving teams early detection of risky behaviors, hidden capabilities, and supply chain threats in developer tools.
Product
Bringing supply chain security to the next generation of JavaScript package managers
Product
A safer, faster way to eliminate vulnerabilities without updating dependencies