English
English
简体中文
Contact Us
Register
Log In
layoutIndex

SwitchButton

Last Updated on : 2022-03-01 07:55:04download

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