LiquidSwitch

A custom animated toggle switch with a liquid-like sliding effect and optional icon support

Features

Smooth switch animation with a unique liquid effect
Optional icons for both ON and OFF states
Customizable track and thumb colors
Responsive size scaling
Fully self-contained, just copy & paste

Dependencies

This component requires React Native Reanimated and Skia:

npx expo install react-native-reanimated @shopify/react-native-skia

Usage

This component is self-contained and can be used by simply copying the file.

Steps

Copy and paste the LiquidSwitch.tsx file into your project

Use it inside your component:

import LiquidSwitch from "./LiquidSwitch"

export default function App() {
  return (
    <LiquidSwitch
      size={100}
      onChange={(val) => console.log("Switched to", val)}
      trackColors={{
        true: "#00C853",
        false: "#CFD8DC"
      }}
      images={{
        true: {
          source: require("./assets/check.png"),
          width: 24,
          height: 24,
          color: "rgba(255,255,255,0.8)"
        },
        false: {
          source: require("./assets/cross.png"),
          width: 24,
          height: 24,
          color: "rgba(255,255,255,0.8)"
        }
      }}
    />
  )
}

Props

Prop	Type	Default
`size?`	`number`	`80`
`onChange`	`function`	-
`containerStyle?`	`ViewStyle`	-
`gap?`	`number`	`4`
`trackColors?`	`object`	`{ true: "#1690F3", false: "#adb5bd" }`
`thumbColor?`	`string`	`"white"`
`images?`	`object`	-
`initialValue?`	`boolean`	`false`

`images.true` and `images.false` structure

Prop	Type	Default
`source`	`string \| number`	-
`width`	`number`	-
`height`	`number`	-
`fit?`	`string`	-
`color?`	`string (rgba)`	-

Made with love by niche.guys