Switch

Switches toggle the state of a single setting on or off. - Material Docs

import { Switch } from 'material-bread';

The Switch track and knob can be customized by passing in trackStyle or thumbStyle .

Live Editing

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      checkedOne: false,
      checkedTwo: true,
      checkedThree: true
    }
  }
  render() {
    return (
      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
          <Switch
            onPress={() => this.setState({ checkedOne: !this.state.checkedOne })}
            checked={this.state.checkedOne}
            style={{ marginRight: 8 }}
          />
          <Switch
            color={'#E91E63'}
            onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })}
            checked={this.state.checkedTwo}
            style={{ marginRight: 8 }}
          />
          <Switch
            color={'#009688'}
            onPress={() => this.setState({ checkedThree: !this.state.checkedThree })}
            checked={this.state.checkedThree}
          />
      </View>
    );
  }
}

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

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  render() {
    return (
      <View>
        <Switch />
      </View>
    );
  }
}

Name

Description

Type

Default

checked

Whether switch is checked

bool

color

Color of track and thumb

string

label

Renders an aribtrary node on either side of the switch

node

labelPos

Determines the position of the label

right

Toggles loading state in thumb

false

onPress

Callback when thumb or label is pressed

func

style

Styles root element

object

trackStyle

Styles the track element

object

thumbStyle

Styles the thumb element

object

width

Scales the switch based on the desired width

number

You can see even more examples in the Storybook environment.

TOGGLE LOADING

Live Editing

class Demo extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        checkedOne: true,
        checkedTwo: true,
        checkedThree: true,
        isLoading: true
      }
    }
    render() {
      return (
        <View>
            <View style={{flexDirection: 'row', flexWrap: 'wrap', marginBottom: 12}}>
                <Switch
                onPress={() => this.setState({ checkedOne: !this.state.checkedOne })}
                checked={this.state.checkedOne}
                style={{ marginRight: 8 }}
                loading={this.state.isLoading}
                />
                <Switch
                color={'#E91E63'}
                onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })}
                checked={this.state.checkedTwo}
                style={{ marginRight: 8 }}
                loading={this.state.isLoading}
                />
                <Switch
                color={'#009688'}
                onPress={() => this.setState({ checkedThree: !this.state.checkedThree })}
                checked={this.state.checkedThree}
                label={<BodyText text={'$'} />}
                labelPos={'left'}
                loading={this.state.isLoading}
                />
            </View>
            <Button
              text={'Toggle Loading'}
              type="outlined"
              onPress={() => this.setState({ isLoading: !this.state.isLoading })}
            />
        </View>
      );
    }
  }

Label

Live Editing

class Demo extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        checkedOne: false,
        checkedTwo: true,
        checkedThree: true
      }
    }
    render() {
      return (
        <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
            <Switch
              onPress={() => this.setState({ checkedOne: !this.state.checkedOne })}
              checked={this.state.checkedOne}
              style={{ marginRight: 8 }}
              label={<BodyText text={'$'} />}
            />
            <Switch
              color={'#E91E63'}
              onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })}
              checked={this.state.checkedTwo}
              style={{ marginRight: 8 }}
              label={<BodyText style={{color: '#E91E63'}}>Label</BodyText>}
            />
            <Switch
              color={'#009688'}
              onPress={() => this.setState({ checkedThree: !this.state.checkedThree })}
              checked={this.state.checkedThree}
              label={<BodyText text={'$'} />}
              labelPos={'left'}
              style={{ marginLeft: 16 }}
            />
        </View>
      );
    }
  }

Switch

Component #

Usage #

Props #

Demos #

Loader #

Labels #