Switch

The Switch component can be used to add a simple toggle button.

API

Props

  • value: bool
    • True when on (right), false when off (left)
  • onValueChange: functional
    • Callback function triggered by the user toggling the switch button

Style names

Switch has no specific style names.

Examples

JSX declaration

constructor() {
  super();
  this.state = {
    switchOn: false,
  };
}

render() {
  const { switchOn } = this.state;

  return (
    <Screen>
      <NavigationBar
        styleName="inline"
        title="Restaurants"
      />
      <ImageBackground
        styleName="large-banner"
        source=
      >
        <Tile>
          <Overlay styleName="fill-parent image-overlay">
            {switchOn ?
              <Title styleName="sm-gutter-horizontal">GASPAR BRASSERIE</Title>
              :
              <Title></Title>
            }
          </Overlay>
        </Tile>
      </ImageBackground>
      <View styleName="content md-gutter-top md-gutter-left">
        <Title>Show name</Title>
        <Switch
          onValueChange={value => this.setState({ switchOn: value})}
          value={switchOn}
        />
      </View>
    </Screen>
  );
}