React-native-duo-toggle-switch NPM

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

TouchableComponent?: any;

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