Logo

Switch

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

Android (enabled)
Android (disabled)
iOS (enabled)
iOS (disabled)

Usage

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

const MyComponent = () => {
  const [isSwitchOn, setIsSwitchOn] = React.useState(false);

  const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);

  return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;
};

export default MyComponent;

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: StyleProp<ViewStyle>
theme
Type: ReactNativePaper.Theme
Edit this page