Skip to content

sbaiahmed1/react-native-blur

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

250 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@sbaiahmed1/react-native-blur

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

npm version downloads per month license stars

New Architecture Liquid Glass

📖 Documentation

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

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

Demo

iOS Demo Android 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.
  • iOS 26 liquid glass with automatic fallback to an enhanced blur on older iOS and Android.
  • 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.76+ (New Architecture required)
Android API 24+, AGP 8.9.1+

Installation

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

Requires React Native 0.76+ 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.

About

A modern React Native blur view component that provides native blur effects for both iOS and Android platforms. also adds progressive blur and liquidGlass

Topics

Resources

License

Code of conduct

Contributing

Stars

311 stars

Watchers

5 watching

Forks

Packages

 
 
 

Contributors