react-native-duo-toggle-switch

Fully customizable animated duo toggle switch for React Native

Usage no npm install needed!

<script type="module">
  import reactNativeDuoToggleSwitch from 'https://cdn.skypack.dev/react-native-duo-toggle-switch';
</script>

README

React Native Duo Toggle Switch

Battle Tested ✅

Fully customizable animated duo toggle switch for React Native

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Duo Toggle Switch

Installation

Add the dependency:

npm i react-native-duo-toggle-switch

Peer Dependencies

IMPORTANT! You need install them
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-androw": ">= 0.0.34",
"react-native-material-ripple": ">= 0.9.1"

Usage

Import

import DuoToggleSwitch from "react-native-duo-toggle-switch";

Basic Usage

<DuoToggleSwitch />

Configuration - Props

Property Type Default Description
width number string 40%
height number string 35
buttonWidth number string 85
buttonHeight number string 35
borderRadius number 50 change the border radius
firstText string Map set the first button's (left one) text
secondText string List set the second button's (right one) text
activeColor string #FBA928 change the button's background color when it is active or pressed
inactiveColor string #fff change the button's background color when it is inactive or pressed
activeTextColor string #f1f1f1 change the button's text color when it is active or pressed
inactiveTextColor string #757575 change the button's text color when it is active or pressed
backgroundColor string #fff change the whole background color
shadowColor string #000 change the shadow color
shadowStyle style default set your own shadow style for the toggle switch
onPressPrimary function null set your own onPress logic for first(primary) button
onPressSecondary function null set your own onPress logic for second(secondary) button

Future Plans

  • LICENSE
  • Color Change Animation
  • Write an article about the lib on Medium

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Duo Toggle Switch is available under the MIT license. See the LICENSE file for more info.