↗
Switch
iOS
Android
Web
An animated toggle switch with a smooth slide animation. Works as a drop-in replacement for React Native's Switch with additional style control and a programmatic ref API.
Import
tsx
import { Switch, type SwitchProps, type SwitchRef } from 'react-native-cross-elements';
Basic usage
switch.tsx
Airplane Mode
OFF
Props
disabled
trackColor (true)
indigo
green
rose
amber
Programmatic control via ref
Use a ref to call toggle() programmatically.
tsx
import React from 'react'; import { View, Text, Pressable } from 'react-native'; import { Switch, type SwitchRef } from 'react-native-cross-elements'; export default function Example() { const [on, setOn] = React.useState(false); const switchRef = React.useRef<SwitchRef>(null); return ( <View style={{ gap: 12 }}> <Switch ref={switchRef} defaultValue={on} onValueChange={setOn} /> <Pressable onPress={() => switchRef.current?.switch()}> <Text style={{ color: '#6366f1' }}>Toggle programmatically</Text> </Pressable> </View> ); }
Custom track & thumb colors
tsx
<Switch defaultValue={on} onValueChange={setOn} trackColors={{ off: '#27272a', on: '#6366f1', disabled: '#3f3f46' }} thumbStyle={{ backgroundColor: on ? '#ffffff' : '#71717a' }} />
Props
Prop
Type
Default
Description
defaultValue
boolean
Initial state of the switch.
onValueChange
(value: boolean) => void
Called when the switch is toggled.
disabled
boolean
false
Disable interaction.
trackColors
{ off?: ColorValue; on?: ColorValue; disabled?: ColorValue }
Track colors for each state.
thumbStyle
ViewStyle
Thumb (circle) style.
animationConfig
AnimationConfig
Reanimated timing config for the slide animation.
style
ViewStyle
Container style.