Smooth React Native Toggle Switch | React Native Toggle Switch


A toggle switch with a label inside, on top of that it animates smoothly. Click and drag or just click it toggles either way.


Toggle switches are quite common in almost every application, and we have so many UX variations of it. Based on different variations, different libraries with its own design and animation has been created by contributors.

Our UX demanded a Toggle with a label, which has both click and slide behavior. None of the existing libraries offered this complete solution. Some had the toggle behavior but the sliding behavior was missing, some had the swipe behavior but did not offer to have a label in it. This library has been created to fill that gap.

Working demo


npm install --save rn-toggle-switch


import ToggleSwitch from 'rn-toggle-switch'

class Demo extends ... {
  render() {
    return (
        text={{on: 'PRESENT', off: 'ABSENT', activeTextColor: 'white', inactiveTextColor: '#B7B8BA'}}
        textStyle={{fontWeight: 'bold'}}
        color={{ indicator: 'white', active: 'rgba(32, 193, 173, 1)', inactive:  'rgba( 247, 247, 247, 1)', activeBorder: '#41B4A4', inactiveBorder: '#E9E9E9'}}
        onValueChange={(val) => {
          /* your handler function... */


text.onText to be displayed when Switch is in Active state
text.offText to be displayed when Switch in in inactive state
text.activeTextColorActive text color
text.inactiveTextColorInactive text color
textStyleAny valid text style supported by RN
color.indicatorThe color of the Slider / Indicator
color.activeBackground color of the Switch when it is in active state
color.inactiveBackground color of the Switch when it is in inactive state
color.activeBorderThe border color when Switch is in active state
color.inactiveBorderThe border color when Switch is in inactive state
activeInitial state of the Switch
disabledtrue if the control is disabled
widthWidth of the control
radiusRadius of the Slider / Indicator
onValueChangeThe function to be called when Switch changes its states

Download Details:

Author: prsn

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

#react #react-native #reactjs   

Smooth React Native Toggle Switch | React Native Toggle Switch
1.85 GEEK