react-native-liquid-glass

A beautiful React Native library that provides an animated liquid glass effect component for Android using Jetpack Compose.

Features

• ✨ Beautiful liquid glass animation effect
• 🎯 Built with Jetpack Compose for smooth performance
• 🔧 Customizable title and elevation
• 📱 Android support (iOS support coming soon)
• 🎨 Glassmorphism design trend
• ⚡ Hardware accelerated animations

Installation

npm install react-native-liquid-glass

or

yarn add react-native-liquid-glass

Android Setup

This library uses Jetpack Compose and requires Android SDK 21+ with Compose enabled in your android/app/build.gradle:

android {
    compileSdkVersion 34
    
    buildFeatures {
        compose true
    }
    
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

Usage

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { LiquidGlass } from 'react-native-liquid-glass';

export default function App() {
  return (
    <View style={styles.container}>
      <LiquidGlass 
        style={styles.liquidGlass} 
        title="Hello World" 
        elevation={8} 
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#0F0F23',
  },
  liquidGlass: {
    width: 300,
    height: 180,
  },
});

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | "Liquid Glass" | The text to display on the card | | elevation | number | 8 | The elevation (shadow depth) of the card | | style | ViewStyle | - | Style object for the component container |

Example

The example app demonstrates various configurations of the LiquidGlass component:

# Clone the repository
git clone https://github.com/yourusername/react-native-liquid-glass.git

# Install dependencies
cd react-native-liquid-glass
yarn install

# Run the example app
yarn example android

Technical Details

This library implements a liquid glass effect using:

• Jetpack Compose: For smooth, hardware-accelerated UI rendering
• Canvas API: For custom liquid shapes and animations
• Infinite Transitions: For continuous floating motion
• Blend Modes: For realistic glass overlay effects
• Gradient Brushes: For depth and transparency

The effect combines multiple animated elements:

• Floating circular shapes with varying opacities
• Custom path-based liquid blob shapes
• Radial gradients for glass-like reflections
• Smooth sine/cosine wave animations

Platform Support

| Platform | Support | Version | |----------|---------|---------| | Android | ✅ | API 21+ | | iOS | ⏳ | Coming Soon |

Inspiration

This library is inspired by the LiquidGlass-JetpackCompose project by Arda Kazanci, adapted for React Native usage.

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

License

MIT © [Your Name]

Made with ❤️ for the React Native community