React Native Liquid Glass

Enhance your user interface with React Native Liquid Glass, a cutting-edge component designed to bring a sophisticated glassmorphic look to mobile applications using Apple’s UIGlassEffect available in iOS 18 and above. With a user-friendly approach, this component is not only visually appealing but also simple to implement without the need for native configurations.

Core Features

• System-native glassmorphism: Utilizes the UIGlassEffect for authentic iOS-level transparency and blur, creating a visually stunning experience.
• Easy integration: Seamlessly integrate into your component tree—no additional native setup required.
• TypeScript support: Built with TypeScript to provide full IntelliSense and prop validation, enhancing development efficiency.
• Cross-platform compatibility: Includes a safe fallback to <Pressable /> for Android and earlier iOS versions, ensuring compatibility without complex conditional logic.
• Optimized performance: Lightweight with no extra dependencies, this component ensures fast load times and minimal impact on system resources.

Performance Recommendations

For optimal performance, particularly on iOS, it is advisable to maintain either the width or height of the LiquidGlassView below 65px. The UIGlassEffect can be resource-intensive, and smaller dimensions help in retaining smooth performance.

Usage Example

To get started, implement it in your project with a simple code snippet:

import { LiquidGlassView } from 'rn-liquid-glass-view';

<LiquidGlassView
  style={{ width: 200, height: 61 }}
  onPress={() => console.log('Tapped the glass!')}
/>

Visual Demonstration

A brief look at what this component can achieve:

This repository welcomes contributions, with a detailed contributing guide available to assist in the development process.