Skip to main content

​
Overview

The Switch component renders a boolean input toggle. Switch does not support className — use only the color-specific className props below.

​
Styling Convention

Switch uses the accent- prefix for all its className props (e.g., thumbColorClassName="accent-blue-500").
Since 1.6.2: Passing a className without the accent- prefix to a color prop will log a warning to the development console.

​
Uniwind Bindings

​
thumbColorClassName
string
Maps to the thumbColor prop. Requires accent- prefix for color values.
​
trackColorOnClassName
string
Maps to the trackColor.true prop (when switch is on). Requires accent- prefix for color values.
​
trackColorOffClassName
string
Maps to the trackColor.false prop (when switch is off). Requires accent- prefix for color values.
​
ios_backgroundColorClassName
string
Maps to the ios_backgroundColor prop. Requires accent- prefix for color values.

​
Usage Example

import { Switch, View } from 'react-native'

<View className="p-4">
  <Switch
    value={isEnabled}
    onValueChange={setIsEnabled}
    thumbColorClassName="accent-white"
    trackColorOnClassName="accent-blue-500 dark:accent-blue-400"
    trackColorOffClassName="accent-gray-300 dark:accent-gray-700"
    ios_backgroundColorClassName="accent-gray-300"
  />
</View>