react-native-lg

A customizable Liquid Glass effect library for React Native, supporting both Android and iOS platforms.

Features

• 🎨 Customizable liquid glass/glassmorphism effects
• 🔄 Refraction with depth and chromatic aberration
• 💫 Blur and backdrop effects
• 🎯 Inner shadows and highlights
• 📱 Cross-platform support (Android & iOS)
• ⚡ High performance with native rendering
• 🎭 Multiple effect combinations

Installation

npm install react-native-lg

or

yarn add react-native-lg

iOS

cd ios && pod install

Note: You may see editor warnings in VS Code for iOS Swift files. These are false positives and can be safely ignored. The code compiles correctly when building the app.

Usage

Basic Liquid Glass View

import { LiquidGlassView } from 'react-native-lg';

export default function App() {
  return (
    <LiquidGlassView
      style={{ width: 200, height: 100, borderRadius: 20 }}
      refractionAmount={30}
      refractionHeight={10}
      blurRadius={20}
    >
      <Text>Liquid Glass Effect</Text>
    </LiquidGlassView>
  );
}

Advanced Configuration

<LiquidGlassView
  style={{ 
    width: 300, 
    height: 150, 
    borderRadius: 25 
  }}
  refractionAmount={40}
  refractionHeight={15}
  depthEffect={0.5}
  chromaticAberration={2}
  blurRadius={25}
  innerShadow={{
    offsetX: 0,
    offsetY: 2,
    blurRadius: 10,
    color: 'rgba(0, 0, 0, 0.3)',
  }}
  highlight={{
    color: 'rgba(255, 255, 255, 0.5)',
    blurRadius: 15,
  }}
>
  <Text style={{ fontSize: 20, color: 'white' }}>
    Beautiful Liquid Glass
  </Text>
</LiquidGlassView>

API Reference

LiquidGlassView Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | style | ViewStyle | - | Standard React Native style | | refractionAmount | number | 30 | Amount of refraction distortion | | refractionHeight | number | 10 | Height of refraction effect | | depthEffect | number | 0.0 | Depth perception (0.0 - 1.0) | | chromaticAberration | number | 0 | Color dispersion amount | | blurRadius | number | 20 | Blur intensity | | innerShadow | InnerShadow | - | Inner shadow configuration | | highlight | Highlight | - | Highlight configuration |

InnerShadow

{
  offsetX: number;
  offsetY: number;
  blurRadius: number;
  color: string;
}

Highlight

{
  color: string;
  blurRadius: number;
}

Examples

Check out the example app for more advanced usage and component examples:

• Liquid Button
• Liquid Toggle
• Liquid Slider
• Liquid Bottom Tabs

Credits

This library is inspired by and ported from AndroidLiquidGlass by Kyant.

License

Apache-2.0

Made with ❤️ for React Native