https://github.com/mymai91/react-native-toggle-element
Switch toggle component for React Native. You can add title, icon, modify component for toggle button.
https://github.com/mymai91/react-native-toggle-element
toggle toggle-switches togglebutton trackbar-style
Last synced: 3 days ago
JSON representation
Switch toggle component for React Native. You can add title, icon, modify component for toggle button.
- Host: GitHub
- URL: https://github.com/mymai91/react-native-toggle-element
- Owner: mymai91
- License: mit
- Created: 2020-04-29T06:24:07.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-30T10:08:45.000Z (over 1 year ago)
- Last Synced: 2024-10-30T10:29:12.242Z (over 1 year ago)
- Topics: toggle, toggle-switches, togglebutton, trackbar-style
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-toggle-element
- Size: 2.04 MB
- Stars: 171
- Watchers: 6
- Forks: 18
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React-Native-Toggle-Element 2.1.1 [](https://circleci.com/gh/mymai91/react-native-toggle-element)
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.
The latest version is `2.1.1`
- React will stop supporting `defaultProps` in major releases, so the react-native-toggle-element no longer uses it in this version.
## Installation
```bash
yarn add react-native-toggle-element
# or with npm
npm install react-native-toggle-element
```
## Usage
### Init value
```jsx
import React, { useState } from "react";
import Toggle from "react-native-toggle-element";
const [toggleValue, setToggleValue] = useState(false);
```
### Toggle with default components
```jsx
setToggleValue(val)} />
```
### Toggle with left title
```jsx
setToggleValue(newState)}
leftTitle="On"
/>
```
### Toggle with right title
```jsx
setToggleValue(newState)}
leftTitle="Right"
/>
```
### Toggle with left title and right Title
```jsx
setToggleValue(newState)}
leftTitle="Left"
rightTitle="Right"
/>
```
### Toggle with custom left component
```jsx
setToggleValue(newState)}
leftComponent={}
/>
```
### Toggle with custom right component
```jsx
setToggleValue(newState)}
rightComponent={}
/>
```
### Toggle with mixed left & right components
```jsx
setToggleValue(newState)}
disabled
leftComponent={
}
rightComponent={
}
/>
```
### Toggle with thumb button components
```jsx
setToggleValue(newState)}
thumbActiveComponent={
}
thumbInActiveComponent={
}
trackBar={{
activeBackgroundColor: "#9ee3fb",
inActiveBackgroundColor: "#3c4145",
borderActiveColor: "#86c3d7",
borderInActiveColor: "#1c1c1c",
borderWidth: 5,
width: 100,
}}
/>
```
### Disabled Toggle
```jsx
setToggleValue(newState)}
leftTitle="Left"
rightTitle="Right"
/>
```
## Modify style
### Modify TrackBar Size
```jsx
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**
```jsx
setToggleValue(newState)}
trackBarStyle={{
borderColor: "green",
}}
trackBar={{
borderWidth: 2,
}}
/>
```
### Modify ThumbButton
```jsx
setToggleValue(newState)}
leftTitle="Left"
rightTitle="Right"
thumbButton={{
width: 60,
height: 60,
radius: 30,
}}
/>
```
### Modify Disabled Toggle
```jsx
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 |