Switch

English | 中文

Switching selector. It supports the following features:

• customize color
• customize size
• two types: cupertino and material

How to use

npm install @rn-components-kit/switch --save

|Preview|Code| |------------|:---------:| ||Demo1 Code| ||Demo2 Code| ||Demo3 Code| ||Demo4 Code| ||Demo5 Code|

Props

• style
• type
• value
• disabled
• width
• height
• thumbRadius
• thumbColor
• trackOnColor
• trackOffColor
• onValueChange

Reference

Props

style

Allows you to customize style

|Type|Required|Default| |----|--------|-------| |object|no|-|

type

Two types (cupertino for IOS and material for Android)

|Type|Required|Default| |----|--------|-------| |enum('cupertino', 'material')|no|'cupertino'|

value

Determines whether switch is on when initial rendering

|Type|Required|Default| |----|--------|-------| |boolean|no|false|

disabled

Determines whether switch is touchabled

|Type|Required|Default| |----|--------|-------| |boolean|no|false|

width

Width of switch

|Type|Required|Default| |----|--------|-------| |number|no|40|

height

Height of switch's track

|Type|Required|Default| |----|--------|-------| |number|no|20|

thumbRadius

Radius of thumb

|Type|Required|Default| |----|--------|-------| |number|no|8|

thumbColor

Color of thumb

|Type|Required|Default| |----|--------|-------| |string|no|'#FFF'|

trackOnColor

Color of track when switch is "on" status

|Type|Required|Default| |----|--------|-------| |string|no|'#79D472'|

trackOffColor

Color of track when switch is "off" status

|Type|Required|Default| |----|--------|-------| |string|no|'#CCC'|

onValueChange

(value: boolean) => void

A callback will be triggered when switch's status changes

|Type|Required|Default| |----|--------|-------| |function|no|() => {}|