SwitchButton

Overview

SwitchButton component can show the task status: whether the task is enabled or disabled.

Code demo

Note: for more information, see Demo.

Controlled

import React from 'react';
 import { View } from 'react-native';
 import { SwitchButton } from 'tuya-panel-kit';
 
export default class SwitchButtonDemo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      value: true;
    }
  }
  render() {
    return (
      <View style={styles.wrApper}>
        <SwitchButton
          value={this.state.value}
          onValueChange={value => { this.setState({ value }); }}
        />
      </View>
    )
  }
 }

Uncontrolled

import React from "react";
 import { View } from "react-native";
 import { SwitchButton } from "tuya-panel-kit";
 
const SwitchButtonDemo = () => (
  <View style={styles.wrApper}>
    <SwitchButton
      defaultValue={true}
      onValueChange={(value) => console.log(value)}
    />
  </View>
 );

API

style

Specify the style of the container that wraps the SwitchButton.

Type	Required
ViewPropTypes.style	No

thumbStyle

Specify the style of the icon used for dragging in the switch.

Type	Required
ViewPropTypes.style	No

value

The currently selected value. After this property is set, it is a controlled component.

Type	Required
bool	No

defaultValue

The value selected by default.

Type	Required	Default value
bool	No	true

useNativeDriver

Whether to use Native Driver.

Type	Required	Default value
bool	No	true

size

Set the size of the development component:

• width: width.
• height: height.
• activeSize: the size of the sliding button.
• margin: the margin of the sliding button from the nearest border.

Type	Required	Default value
Object	No	{ width: 50, height: 28, activeSize: 26, margin: 1 }

tintColor

Set the background color when the value of the SwitchButton is false.

Type	Required	Default value
Color	No	transparent

onTintColor

Set the color when the value of the SwitchButton is true.

Type	Required	Default value
Color	No	#44DB5E

thumbTintColor

Set the color of the sliding button when the value of the SwitchButton is false.

Type	Required	Default value
Color	No	#e5e5e5

onThumbTintColor

Set the color of the sliding button when the value of the SwitchButton is true. It is the value of thumbTintColor if it is not set.

Type	Required	Default value
Color	No	None

borderColor

Set the color of the border when the value of the sliding button is false.

Note: when the value of the SwitchButton is true, the border color is equal to onTintColor.

Type	Required	Default value
Color	No	#e5e5e5

disabled

Whether to disable the SwitchButton.

Type	Required	Default value
bool	No	false

onValueChange

This callback is executed when the switch combination value is changed.

Type	Required
(value) => void	No