Switch
Switching Selector.
import { Switch } from '@redshank/native';
When To Use
- If you need to represent the switching between two states or on-off state.
- The difference between
SwitchandCheckboxis thatSwitchwill trigger a state change directly when you toggle it, whileCheckboxis generally used for state marking, which should work in conjunction with submit operation.
Examples
Default
Default switch element.
Sizes
Sizes switch element.
Bordered
Bordered switch element.
With Icon
With icon switch element.
Variants
With variant switch element.
Error Variant
With error switch element.
APIs
Switch Props
Api props extends from TouchableOpacity
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| activeColor | ThemeColor | ThemeColor | Active color of the element | inputColor |
| borderColor | ThemeColor | ThemeColor | Border color of the element | primary |
| bordered | boolean | true false | Show or not borderColor component | false |
| deactiveColor | ThemeColor | ThemeColor | Color when switch is false | inputColor |
| defaultValue | boolean | true false | Default value of the switch input | - |
| error | boolean | true false | Show error variant | - |
| icon | object | IconObject | Pass icon for deactive and active switch | - |
| onChange | function | (value) => void | On change function trigger received true or false | - |
| size | SizeType | small middle large | Size of the switch selector | middle |
| style | object | StyleProp<StyleView> | Style for the point | - |
| textError | string | Text | Message of the error, set with error prop in true | - |
| thumbActiveColor | ThemeColor | ThemeColor | Background color of the element when is switchable | primary |
| thumbDisabledColor | ThemeColor | ThemeColor | Background color of the element when is not selected | border |
| thumbStyle | object | StyleProp<StyleView> | Style for the wrapper | - |
| type | SwitchType | rounded square | Variant type for the switch | rounded |
| value | boolean | true false | Value of the switch input | - |
IconObject
type IconObject = { false: ReactNode, true: ReactNode, }
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.