react-native-toggle-element
v2.1.1
Published
Switch toggle component for React Native. You can add title, icon, modify component for toggle button.
Downloads
28,215
Maintainers
Readme
React-Native-Toggle-Element 2.0
The library has been rewritten with Typescript support in version 2.0.0
. This library will work well on both React Native and Expo, please check out the examples folder.
Installation
yarn add react-native-toggle-element
# or with npm
npm install react-native-toggle-element
Usage
Init value
import React, { useState } from "react";
import Toggle from "react-native-toggle-element";
const [toggleValue, setToggleValue] = useState(false);
Toggle with default components
<Toggle value={toggleValue} onPress={(val) => setToggleValue(val)} />
Toggle with left title
<Toggle
value={toggleValue}
onPress={(newState) => setToggleValue(newState)}
leftTitle="On"
/>
Toggle with right title
<Toggle
value={toggleValue}
onPress={(newState) => setToggleValue(newState)}
leftTitle="Right"
/>
Toggle with left title and right Title
<Toggle
value={toggleValue}
onPress={(newState) => setToggleValue(newState)}
leftTitle="Left"
rightTitle="Right"
/>
Toggle with custom left component
<Toggle
value={toggleValue}
onPress={(newState) => setToggleValue(newState)}
leftComponent={<Icon name="credit" width="30" height="30" fill={"#3BD2B5"} />}
/>
Toggle with custom right component
<Toggle
value={toggleValue}
onPress={(newState) => setToggleValue(newState)}
rightComponent={<Icon name="plus" width="30" height="30" fill={"#3BD2B5"} />}
/>
Toggle with mixed left & right components
<Toggle
value={toggleValue}
onPress={(newState) => setToggleValue(newState)}
disabled
leftComponent={
<Icon name="credit" width="30" height="30" fill={Colors.tabIconSelected} />
}
rightComponent={
<Icon name="plus" width="30" height="30" fill={Colors.tabIconSelected} />
}
/>
Toggle with thumb button components
<Toggle
value={toggleValue}
onPress={(newState) => setToggleValue(newState)}
thumbActiveComponent={
<Icon name="sun" width="40" height="40" fill={"#3BD2B5"} />
}
thumbInActiveComponent={
<Icon name="night" width="40" height="40" fill={"#03452C"} />
}
trackBar={{
activeBackgroundColor: "#9ee3fb",
inActiveBackgroundColor: "#3c4145",
borderActiveColor: "#86c3d7",
borderInActiveColor: "#1c1c1c",
borderWidth: 5,
width: 100,
}}
/>
Disabled Toggle
<Toggle
disabled
value={toggleValue}
onPress={(newState) => setToggleValue(newState)}
leftTitle="Left"
rightTitle="Right"
/>
Modify style
Modify TrackBar Size
<Toggle
value={toggleValue}
onPress={(newState) => setToggleValue(newState)}
leftTitle="Left"
rightTitle="Right"
trackBar={{
width: 200,
height: 50,
radius: 25,
}}
/>
Modify TrackBar Style
TrackBarStyle will override Border active color & Border inactive color
<Toggle
value={toggleValue}
onPress={(newState) => setToggleValue(newState)}
trackBarStyle={{
borderColor: "green",
}}
trackBar={{
borderWidth: 2,
}}
/>
Modify ThumbButton
<Toggle
value={toggleValue}
onPress={(newState) => setToggleValue(newState)}
leftTitle="Left"
rightTitle="Right"
thumbButton={{
width: 60,
height: 60,
radius: 30,
}}
/>
Modify Disabled Toggle
<Toggle
disabled
disabledTitleStyle={{ color: "red" }}
disabledStyle={{ backgroundColor: "gray", opacity: 0.3 }}
value={toggleValue}
onPress={(newState) => setToggleValue(newState)}
leftTitle="Left"
rightTitle="Right"
/>
Props
- containerStyle
- disabled
- disabledStyle
- disabledTitleStyle
- leftComponent
- leftTitle
- rightComponent
- rightTitle
- thumbActiveComponent
- thumbInActiveComponent
- thumbStyle
- thumbButton
- trackBar
- trackBarStyle
- animationDuration
Reference
| Type | Default | | -------------------------- | :-----: | | React element or component | none |
containerStyle
style for main container
| Type | Default | | ----- | :-----: | | style | none |
disabled
disable the Toggle Button component (optional)
| Type | Default | | ------- | :-----: | | boolean | false |
disabledStyle
styling for Toggle Button Component for disabled (optional)
| Type | Default | | ------------------- | :-----: | | View style (object) | none |
disabledTitleStyle
styling for leftTitle & right Title(optional) when Toggle Button set with status is disabled(optional). If you want to set disable style for Active & Inactive you should use custom left component or custom right component
| Type | Default | | -------------------- | :-----: | | Text style (object)) | none |
leftComponent
define your left component here
| Type | Default | | -------------------------- | :-----: | | React element or component | none |
leftTitle
button left title (optional)
| Type | Default | | ------ | :-----: | | string | none |
rightComponent
define your right component here (optional)
| Type | Default | | -------------------------- | :-----: | | React element or component | none |
rightTitle
button right title (optional)
| Type | Default | | ------ | :-----: | | string | none |
thumbActiveComponent
define your thumb button component when status is active (optional)
| Type | Default | | -------------------------- | :-----: | | React element or component | none |
thumbInActiveComponent
define your thumb button component when status is inactive (optional)
| Type | Default | | -------------------------- | :-----: | | React element or component | none |
thumbStyle
thumb button style (optional). Styling will override the value from thumbButton props
| Type | Default | | ------------------- | :-----: | | View style (object) | none |
thumbButton
define to change size and radius and color depend on active / inactive status (optional)
| Type | Default | | ----------------------- | :-----: | | borderWidth | 0 | | width | 50 | | height | 50 | | radius | 25 | | activeBackgroundColor | #fde2e2 | | inActiveBackgroundColor | #ffb6b6 |
trackBar
define to change size and radius and color depend on active / inactive status (optional)
| Type | Default | | ----------------------- | :---------: | | borderWidth | 0 | | width | 50 | | height | 50 | | radius | 25 | | activeBackgroundColor | #fde2e2 | | inActiveBackgroundColor | #ffb6b6 | | borderActiveColor | transparent | | borderInActiveColor | transparent |
trackBarStyle
trackbar style (optional). Styling will override the value from trackBar props
| Type | Default | | ------------------- | :-----: | | View style (object) | none |
animationDuration
duration of the thumb button animation (optional).
| Type | Default | | ------ | :-----: | | number | 350 |