Back to React Native Paper

Switch

docs/public/1.0/switch.html

5.15.11.1 KB
Original Source

Switch

Switch is a visual toggle between two mutually exclusive states — on and off.

Android (enabled)

Android (disabled)

iOS (enabled)

iOS (disabled)

Usage

js
import * as React from 'react';
import { Switch } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    isSwitchOn: false,
  };

  render() {
    const { isSwitchOn } = this.state;
    return (
      <Switch
        value={isSwitchOn}
        onValueChange={() =>
          { this.setState({ isSwitchOn: !isSwitchOn }); }
        }
      />
    );
  }
}

Props

disabled Type: boolean

Disable toggling the switch.

value Type: boolean

Value of the switch, true means 'on', false means 'off'.

color Type: string

Custom color for switch.

onValueChange Type: Function

Callback called with the new value when it changes.

style Type: any

theme Type: Theme