react-native-flip-toggle-button

A cross-platform customisable toggle button built upon react-native's TouchableOpacity and Animated APIs

Usage no npm install needed!

<script type="module">
  import reactNativeFlipToggleButton from 'https://cdn.skypack.dev/react-native-flip-toggle-button';
</script>

README

react-native-flip-toggle-button

npm version

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

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

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.