@sbaiahmed1/react-native-blur

Native blur, vibrancy, and iOS 26 liquid-glass effects for React Native — on iOS, Android, and Web. Six focused components: BlurView, ProgressiveBlurView, VibrancyView, LiquidGlassView, LiquidGlassContainer, and BlurSwitch. Built for the New Architecture (Fabric).

📖 Documentation

Full documentation, guides, and the complete API reference live on the docs site:

👉 https://sbaiahmed1.github.io/react-native-blur/docs

• Installation & requirements
• BlurView · ProgressiveBlurView · VibrancyView
• LiquidGlassView · LiquidGlassContainer · BlurSwitch
• Props reference
• Migration & breaking changes

⚠️ v5 is New Architecture only (React Native 0.80+) and drops legacy Paper support. See Migration & breaking changes.

Demo

iOS (left) and Android (right) blur effects in action

Features

• Six focused components for blur, vibrancy, progressive/gradient blur, iOS 26 liquid glass, and a blurred switch.
• True native effects: UIVisualEffectView / UIGlassEffect on iOS, hardware-accelerated blur on Android.
• Web support out of the box (Expo Web / react-native-web) via CSS backdrop-filter, including a real progressive-blur ramp.
• iOS 26 liquid glass with automatic fallback to an enhanced blur on older iOS, Android, and Web.
• New Architecture (Fabric) components with full TypeScript types.

Requirements

Platform	Minimum version
iOS	13.0+ (Xcode 16; 26.0+ for liquid glass)
React Native	0.80+ (New Architecture required)
Android	API 24+, AGP 8.9.1+
Web	react-native-web (blur needs backdrop-filter)

Installation

yarn add @sbaiahmed1/react-native-blur
# then, for iOS:
cd ios && pod install

Requires React Native 0.80+ with the New Architecture enabled. Full setup notes: Installation docs.

Quick start

import { BlurView } from '@sbaiahmed1/react-native-blur';

<BlurView blurType="light" blurAmount={20} style={{ flex: 1 }}>
  <Text>Content on top of blur</Text>
</BlurView>;

Every component, prop, and platform note is documented on the docs site.

Contributing

See CONTRIBUTING.md. The documentation site lives in website/ — when you change the public API, update the website in the same pull request.

License

MIT

Credits

Built with create-react-native-library. Android blur is powered by QmBlurView.