Swith in React-Native

Installation

Add the dependency:

npm i switchin-react-native

Peer Dependencies

IMPORTANT! You need install them

Zero Dependency

Usage

Import

import DuoToggleSwitch from "switchin-react-native";

Basic Usage

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

OR (Also you can add icon like this)

<DuoToggleSwitch
  primaryText={<Feather name="grid" size={24} color={'black'} />}
  secondaryText={<Feather name="menu" size={24} color={'black'} />}
  onPrimaryPress={() => {}}
  onSecondaryPress={() => {}}
/>

Custom Usage

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

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

Author

Ravindra Nakrani, [email protected]

License

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