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).

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

• 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.

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

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

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.

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.

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

MIT

Built with create-react-native-library. Android blur is powered by QmBlurView; Android liquid glass by the AndroidLiquidGlassView shader (both by QmDeve, MIT).