react-native-flip-toggle-button
Version:
A cross-platform customisable toggle button built upon react-native's TouchableOpacity and Animated APIs
82 lines (71 loc) • 5.4 kB
Markdown
# react-native-flip-toggle-button
[](https://badge.fury.io/js/react-native-flip-toggle-button)
A cross-platform customisable toggle button built upon react-native's TouchableOpacity and Animated APIs.
### Why flip toggle?
Well, this toggle button provides a label centered within the button which flips as per the toggle's on / off state.
You have seen it on old iOS homescreen (swipe to unlock). react-native-flip-toggle-button uses Animated APIs useNativeDriver flag to offload animations from the JS thread and thus provide more responsive and seamless toggle transition even when the JS thread is busy.
## Contents
- Checkout this package on npm - [react-native-flip-toggle-button](https://www.npmjs.com/package/react-native-flip-toggle-button)
- [Instructions](https://github.com/ashishpandey001/react-native-flip-toggle-button#instructions)
- [Demo](https://github.com/ashishpandey001/react-native-flip-toggle-button#demo)
- [Getting Started](https://github.com/ashishpandey001/react-native-flip-toggle-button#getting-started)
- [API](https://github.com/ashishpandey001/react-native-flip-toggle-button#api)
- [Issues](https://github.com/ashishpandey001/react-native-flip-toggle-button#issues)
- [Contribute](https://github.com/ashishpandey001/react-native-flip-toggle-button#contribute)
## Instructions
1. Run `yarn add react-native-flip-toggle-button` or `npm i react-native-flip-toggle-button --save`.
2. Add `import FlipToggle from 'react-native-flip-toggle-button'` in your react-native application's source code.
## Demo
- [FlipToggleSample](https://github.com/ashishpandey001/react-native-flip-toggle-button/tree/master/FlipToggleSample)
<img src="https://media.githubusercontent.com/media/ashishpandey001/react-native-flip-toggle-button/master/FlipToggleSample/react-native-flip-toggle-button.gif" width="360" height="640"/>
## Getting Started
import the FlipToggle component into your app's js file.
Then, use the FlipToggle component as shown below
```javascript
<FlipToggle
value={this.state.isActive}
buttonWidth={100}
buttonHeight={50}
buttonRadius={50}
sliderWidth={20}
sliderHeight={10}
sliderRadius={50}
onLabel={'On'}
offLabel={'Off'}
labelStyle={{ color: 'black' }}
onToggle={(newState) => console.log(`toggle is ${this.state.isActive ? `on` : `off`}`)}
onToggleLongPress={() => console.log('toggle long pressed!')}
/>
```
## API
|prop|propType|required|default|description|
|----|:------:|:------:|:-----:|-----------|
|value|boolean|yes|n/a|default state of the flip toggle button|
|buttonWidth|number|yes|n/a|Width of the flip toggle button|
|buttonHeight|number|yes|n/a|Height of the flip toggle button|
|onToggle|function|yes|n/a|function that will be executed after toggle state is changed, returns the new state of the toggle|
|onToggleLongPress|function|no|no|function that will be executed after toggle button is long pressed, returns the new state of the toggle|
|changeToggleStateOnLongPress|boolean|no|true|flag to set whether state of the toggle button should be updated on long press|
|disabled|boolean|no|false|flag to disable the toggling of the flip toggle button|
|buttonRadius|number (0 - 100)|no|0|border radius of the flip toggle button, expressed in terms of % of buttonWidth|
|sliderWidth|number|no|90 % of buttonHeight|Width of the slider|
|sliderHeight|number|no|90 % of buttonHeight|Height of the slider|
|sliderRadius|number (0 - 100)|no|0(will use the buttonRadius as default if it is set)|border radius of the flip toggle button, expressed in terms of % of buttonWidth|
|onLabel|string|no|null|Text to be displayed within the button when it is on|
|offLabel|string|no|null|Text to be displayed within the button when it is off|
|labelStyle|object|no|{ color: 'white', fontSize: '16' }|Style object for the text displayed within the flip toggle button|
|margin|number|no|2 % of the buttonWidth|margin / spacing between the flip toggle button and the slider|
|buttonOnColor|'string'|no|'#000'|background color of the flip toggle button when it is on|
|buttonOffColor|'string'|no|'#000'|background color of the flip toggle button when it is off|
|disabledButtonOnColor|'string'|no|'#666'|background color of the flip toggle button when the toggling is disabled but set at on|
|disabledButtonOffColor|'string'|no|'#666'|background color of the flip toggle button when the toggling is disabled but set at off|
|sliderOnColor|'string'|no|'#dba628'|background color of the slider when it is on|
|sliderOffColor|'string'|no|'#dba628'|background color of the slider when it is off|
|disabledSliderOnColor|'string'|no|'#444'|background color of the slider when the toggling is disabled but set at on|
|disabledSliderOffColor|'string'|no|'#444'|background color of the slider when the toggling is disabled but set at off|
## Issues
If you face any issues with implementing this component or have a feature request or queries, please create a new [issue](https://github.com/ashishpandey001/react-native-flip-toggle-button/issues).
## Contribute
Improve this project and help the community by creating PRs.
PRs will be reviewed once every week, and will only be merged if they add to the project's value.
A proper description and necessary steps to reproduce the issue are mandatory for any issue to be considered.