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 |

Future Plans

• [x] ~~LICENSE~~
• [x] ~~Typescript~~
• [ ] Color Change Animation
• [ ] Write an article about the lib on Medium

Author

FreakyCoder, [email protected]

License

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