ToggleButton

Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.

Usage

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

class ToggleButtonExample extends React.Component {
  state = {
    status: 'checked',
  };

  render() {
    return (
      <ToggleButton
        icon="bluetooth"
        value="bluetooth"
        status={this.state.status}
        onPress={value =>
          this.setState({
            status: value === 'checked' ? 'unchecked' : 'checked',
          })
        }
      />
    );
  }
}

Props

icon (required)
Type: IconSource

Icon to display for the ToggleButton.

size
Type: number

Size of the icon.

color
Type: string

Custom text color for button.

disabled
Type: boolean

Whether the button is disabled.

accessibilityLabel
Type: string

Accessibility label for the ToggleButton. This is read by the screen reader when the user taps the button.

onPress
Type: (value?: GestureResponderEvent | string) => void

Function to execute on press.

value
Type: string

Value of button.

status
Type: 'checked' | 'unchecked'

Status of button.

style
Type: StyleProp<ViewStyle>
theme
Type: Theme

Static properties

These properties can be accessed on ToggleButton by using the dot notation, e.g. ToggleButton.Group.