Switch

A controlled component that renders a boolean input.

Switch requires an onValueChange callback that updates the value prop in order for the component to reflect user actions. If the value prop is not updated, the component will continue to render the supplied value prop instead of the expected result of any user actions.

import { Switch } from 'react-native';

<Switch {...props} />;

API

Props

...ViewProps ?ViewProps

All the props supported by View.

activeThumbColor ?string = "#009688"

The color of the thumb grip when the switch is turned on. (Web-only)

activeTrackColor ?string = "#A3D3CF"

The color of the track when the switch is turned on. (Web-only)

disabled ?boolean

Disables interactions with the element. If true, the user won’t be able to interact with the switch.

onValueChange ?(boolean) => void

Invoked with the new value when the value changes.

thumbColor ?string = "#FAFAFA"

The color of the thumb grip when the switch is turned off.

trackColor ?string => "#939393"

The color of the track when the switch is turned off.

value ?boolean = false

The value of the switch. If true the switch will be turned on.

Examples

Custom sizes can be created using styles.

  For TV Examples: LRUD navigation is already enabled in this sandbox. Use your keyboard arrow keys to move focus.