react-native-android-liquid-glass-button

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

!Demo

Installation

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

$3

This library requires the following peer dependencies:

* react-native
* react-native-reanimated
* react-native-gesture-handler

Usage

`tsx
import { Button } from 'react-native-android-liquid-glass-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). |