Switch

A basic Switch component that should render nicely on any platform. Supports a good level of customization.

You can customization Switch component with the Props

Usage#

import React, { FC, useState } from 'react';
import {Body,Switch} from 'qdmrncomponents';

const App: FC = () => {

  const [toggle,setToggle] = useState(false);

  const toggleSwitch = () => setToggle(previousState => !previousState);

  return (
    <Body paddingAll={20} V_Aligin_center>
        <Switch
          value={toggle}
          onValueChange={toggleSwitch}
          thumbColor={toggle ? "#f5dd4b" : "#f4f3f4"}
          disabled={false}
          trackColor={{ false: "#767577", true: "#81b0ff" }}
        />
    </Body>
  );
};

Reference#

Props#

here all the list of Props you can use for Switch Component and it Inherits all Switch Props, from React Native

value#

value props of the Switch false to left and true to right side and type boolean

onValueChange#

onValueChange props for changing the value the Switch and type Function

onChange#

Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use onValueChange instead and type Function

thumbColor#

Color of the foreground switch grip and type string

disabled#

If true, disable all interactions for this component. type boolean

trackColor#

Custom colors for the switch track and type object

inlineStyle#

props give addition props to the Button element type Object