Fully customizable animated duo toggle switch for React Native
MIT License
Version 1 is released with typescript and some breaking changes
Add the dependency:
npm i react-native-duo-toggle-switch
Zero Dependency
import DuoToggleSwitch from "react-native-duo-toggle-switch";
<DuoToggleSwitch
primaryText="Map"
secondaryText="List"
onPrimaryPress={() => {}}
onSecondaryPress={() => {}}
/>
<DuoToggleSwitch
primaryText="Map"
secondaryText="List"
onPrimaryPress={() => {}}
onSecondaryPress={() => {}}
TouchableComponent={Ripple}
rippleColor="#fff"
rippleContainerBorderRadius={50}
/>
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
|
FreakyCoder, [email protected]
React Native Duo Toggle Switch is available under the MIT license. See the LICENSE file for more info.