rslabdocs

Switch

An iOS-style toggle: the thumb slides and squashes ever so slightly under your thumb while pressed.

ReanimatedHapticsNativeWindSource

Prerequisites

Just Reanimated and haptics, no icons involved.


npx expo install react-native-reanimated expo-haptics react-native-css

Install


npx @rslab/cli add switch

Usage

import { Switch } from '@/components/ui/Switch';

const [enabled, setEnabled] = useState(false);

<Switch value={enabled} onValueChange={setEnabled} />;

<Switch value={wifi} onValueChange={setWifi} onColor="#0a84ff" />

<Switch value disabled onValueChange={() => {}} />

Props

PropTypeDefault
value
boolean
-
onValueChange
(value: boolean) => void
-
onColor?
string
'#34c759'

Track color when on, defaults to iOS green.

disabled?
boolean
false

Fades the switch and blocks presses.

haptic?
boolean
true

Light haptic tick on flip. Set false to mute it.

className?
string
-

Extend or override the outer Pressable.

See exactly how this works with an RSLAB subscription.

Get Pro

On this page