React-native-flip-toggle-button NPM

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.

Checkout this package on npm - react-native-flip-toggle-button
Instructions
Demo
Getting Started
API
Issues
Contribute

Instructions

Run yarn add react-native-flip-toggle-button or npm i react-native-flip-toggle-button --save.
Add import FlipToggle from 'react-native-flip-toggle-button' in your react-native application's source code.

Demo

FlipToggleSample

Getting Started

import the FlipToggle component into your app's js file. Then, use the FlipToggle component as shown below

  <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.

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.