# margelo/react-native-blur

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/margelo-react-native-blur).**

3,881 stars · 568 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/margelo/react-native-blur
- awesome-repositories: https://awesome-repositories.com/repository/margelo-react-native-blur.md

## Topics

`react-native` `react-native-blur` `react-native-component`

## Description

react-native-blur provides cross-platform UI components for rendering native blur and vibrancy effects in mobile applications. It functions as a native-backed UI element that creates visual hierarchy and depth through blurred overlays and enhanced content contrast.

The project includes an accessibility-aware component that automatically detects system preferences for reduced transparency and provides solid fallback colors. It utilizes native rendering to apply background blur and vibrancy layers, improving the legibility of foreground content.

These components encapsulate platform-specific rendering APIs to provide a unified interface for hardware-accelerated filtering and dynamic vibrancy blending.

## Tags

### User Interface & Experience

- [Real-Time Background Blurs](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/blur-effects/gaussian-blur-implementations/real-time-background-blurs.md) — Provides high-performance, real-time background blur effects for mobile user interfaces. ([source](https://github.com/margelo/react-native-blur#readme))
- [Transparency-Aware Components](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-components/transparency-aware-components.md) — Ships a component that automatically detects reduced transparency settings and provides solid fallback colors.
- [Vibrancy Adjustments](https://awesome-repositories.com/f/user-interface-experience/color-systems/color-rendering-adjustments/color-saturation-adjusters/vibrance-and-saturation-controls/vibrancy-adjustments.md) — Utilizes native vibrancy layers to increase the contrast and legibility of foreground content over blurred backgrounds.
- [Transparency Preference Adaptations](https://awesome-repositories.com/f/user-interface-experience/customizable-mobile-interfaces/transparency-preference-adaptations.md) — Ensures interface readability by automatically switching blur effects to solid colors based on user transparency preferences.
- [System Transparency Fallbacks](https://awesome-repositories.com/f/user-interface-experience/floating-window-components/transparency-controls/transparency-visualization/system-transparency-fallbacks.md) — Provides automatic switching to solid background colors when system-level reduced transparency is enabled for accessibility.
- [Home Screen Legibility Optimizations](https://awesome-repositories.com/f/user-interface-experience/home-screen-legibility-optimizations.md) — Implements visual techniques using native vibrancy to ensure foreground UI elements remain readable over blurred backgrounds.
- [Mobile Visual Depth Effects](https://awesome-repositories.com/f/user-interface-experience/mobile-visual-depth-effects.md) — Creates visual hierarchy and depth in mobile interfaces by applying native blur filters and overlays.
- [JSON Message Bus Bridges](https://awesome-repositories.com/f/user-interface-experience/native-rendering-bridges/json-message-bus-bridges.md) — Implements a bridge that serializes style and intensity parameters as messages to a native host for rendering.
- [Cross-Platform Native Renderers](https://awesome-repositories.com/f/user-interface-experience/native-ui-component-libraries/native-ui-renderers/cross-platform-native-renderers.md) — Translates declarative component definitions into native platform views for real-time background filtering.

### Mobile Development

- [Cross-Platform Mobile Blur Libraries](https://awesome-repositories.com/f/mobile-development/cross-platform-mobile-blur-libraries.md) — Offers a cross-platform library for rendering hardware-accelerated blur and vibrancy effects on iOS and Android.
- [React Native Components](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-components.md) — Provides pre-built visual components for implementing blur and vibrancy effects in React Native applications.
- [Visual Depth Effects](https://awesome-repositories.com/f/mobile-development/android-ui-customization/visual-depth-effects.md) — Implements design patterns for creating perceived visual depth through the use of native blurs and overlays.

### Graphics & Multimedia

- [Filter Acceleration](https://awesome-repositories.com/f/graphics-multimedia/gpu-hardware-acceleration/filter-acceleration.md) — Maps abstract component properties to system-level rendering engines for hardware-accelerated blur and vibrancy effects.

### Software Engineering & Architecture

- [Platform-Specific API Implementations](https://awesome-repositories.com/f/software-engineering-architecture/polymorphism-patterns/platform-specific-api-implementations.md) — Wraps distinct mobile operating system rendering calls into a single unified interface for cross-platform consistency.