React Native Duo Toggle Switch | Expo

 

    

Version 1 🥰

Version 1 is released with typescript and some breaking changes

• Code Cleaning
• Typescript
• Better props
• Fully customizable
• Better animations
• Better GIFs on documentation

Installation

Add the dependency:

npm i react-native-duo-toggle-switch

Peer Dependencies

IMPORTANT! You need install them

Zero Dependency

Usage

Import

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

Basic Usage

<DuoToggleSwitch
  primaryText="Map"
  secondaryText="List"
  onPrimaryPress={() => {}}
  onSecondaryPress={() => {}}
/>

Custom Usage

<DuoToggleSwitch
  primaryText="Map"
  secondaryText="List"
  onPrimaryPress={() => {}}
  onSecondaryPress={() => {}}
  TouchableComponent={Ripple}
  rippleColor="#fff"
  rippleContainerBorderRadius={50}
/>

Configuration - Props

Property	Type	Default	Description
primaryText	string	undefined	set the primary button's (left one) text
secondyText	string	undefined	set the secondy 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
onPrimaryPress	function	null	set your own onPress logic for first(primary) button
onSecondaryPress	function	null	set your own onPress logic for second(secondary) button
style	ViewStyle	default	set or override style for the main container
primaryButtonStyle	ViewStyle	default	set or override style for the primary button
secondaryButtonStyle	ViewStyle	default	set or override style for the secondary button
primaryTextStyle	TextView	default	set or override style for primary text style
secondaryTextStyle	TextView	default	set or override style for secondary text style
TouchableComponent	component	TouchableOpacity	set your own Pressable functionality instead of TouchableOpacity

Future Plans

•  LICENSE
•  Typescript
•  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.