!Platform - Android and iOS

src="assets/Screenshots/example.gif" />

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:

``ruby
npm i react-native-duo-toggle-switch
`

Peer Dependencies

###### IMPORTANT! You need install them

Zero Dependency

Usage

Import

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

Basic Usage

`jsx
primaryText="Map"
secondaryText="List"
onPrimaryPress={() => {}}
onSecondaryPress={() => {}}
/>
`

Custom Usage

`jsx
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, kurayogun@gmail.com

License

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