web
mobile
Edit these docs Rate these docs

React Mobile Switch

React Mobile Switch - Bootstrap 4 & Material Design

React Mobile switch is a simple component used for activating one of two predefined options. Commonly used as an on/off button.


Basic examples

React Mobile Buttons includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Android
android switch
iOS
iOS switch

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import {MDBSwitch} from 'mdbreact-mobile';

        export default class SwitchPage extends Component {

          state = {
            switch: false
          };

          render() {
            return (
              <ScrollView>
                <View>
                  <MDBSwitch checked={this.state.switch} />
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Colorfull examples

Android
android switch
iOS
iOS switch

          <script>

          import React, { Component } from "react";
          import {View, ScrollView } from "react-native";
          import {MDBSwitch} from 'mdbreact-mobile';

          export default class SwitchPage extends Component {

            state = {
              switch: false
            };

            render() {
              return (
                <ScrollView>
                  <View>
                    <MDBSwitch thumbColor="warning" trackColor="warning" checked={this.state.switch}  />
                    <MDBSwitch thumbColor="success" trackColor="success" checked={this.state.switch}  />
                    <MDBSwitch thumbColor="info" trackColor="info" checked={this.state.switch} />
                 </View>
                </ScrollView>
              );
            }
          }

          </script>
        
Edit these docs Rate these docs

Switch - API

In this section you will find advanced information about the Modal component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


            import { MDBSwitch } from 'mdbreact-mobile'
      

API Reference: Properties

Name Type Default Description Example
thumbColor string primary ThumbColor default text <MDBSwitch thumbColor />
trackColor string primary TrackColor default text <MDBSwitch trackColor />