react-native-web/docs/components/Switch.md

Switch

This is a controlled component that 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.

Props

...View props

disabled: bool = false

If true the user won't be able to interact with the switch.

onValueChange: func

Invoked with the new value when the value changes.

value: bool = false

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

(web) activeThumbColor: color = #009688

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

(web) activeTrackColor: color = #A3D3CF

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

(web) thumbColor: color = #FAFAFA

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

(web) trackColor: color = #939393

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

Examples

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

class ColorSwitchExample extends Component {
  constructor(props) {
    super(props)
    this.state = {
      colorTrueSwitchIsOn: true,
      colorFalseSwitchIsOn: false
    }
  }

  render() {
    return (
      <View>
        <Switch
          activeThumbColor='#428BCA'
          activeTrackColor='#A0C4E3'
          onValueChange={(value) => this.setState({ colorFalseSwitchIsOn: value })}
          value={this.state.colorFalseSwitchIsOn}
        />
        <Switch
          activeThumbColor='#5CB85C'
          activeTrackColor='#ADDAAD'
          onValueChange={(value) => this.setState({ colorTrueSwitchIsOn: value })}
          thumbColor='#EBA9A7'
          trackColor='#D9534F'
          value={this.state.colorTrueSwitchIsOn}
        />
      </View>
    )
  }
}