react-native-android-liquid-glass-button

A React Native button component with a unique Android "Liquid Glass" effect using OpenGL.

Installation

npm install react-native-android-liquid-glass-button

Peer Dependencies

This library requires the following peer dependencies:

• react-native
• react-native-reanimated
• react-native-gesture-handler

Usage

import { Button } from 'react-native-android-liquid-glass-button';

// ...

<Button 
  refraction={0.25}
  magnification={0.8}
  offsetX={80}
  offsetY={0}
  color="#37cf18"
  onToggle={(isOn) => {
    console.log('Button State:', isOn ? 'ON' : 'OFF');
  }}
/>

Props

All props are optional.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | refraction | number | 0.25 | Controls the intensity of the refraction effect. | | magnification | number | 0.8 | Controls the zoom level of the background sample. | | offsetX | number | 80 | Horizontal offset for the glass effect. Adjust this to align the refraction with your UI. | | offsetY | number | 0 | Vertical offset for the glass effect. | | color | string | #37cf18 | Active track color. | | onToggle | (isOn: boolean) => void | - | Callback fired when the button state toggles. true = ON (Right), false = OFF (Left). |