Home

Awesome

SwitchSelector

Switch Selector to React Native.

npm version downloads

SwitchSelector

SwitchSelector

SwitchSelector - Custom Example

SwitchSelector

Installing

yarn add react-native-switch-selector

or

npm i react-native-switch-selector --save

Usage

import SwitchSelector from "react-native-switch-selector";
const options = [
  { label: "01:00", value: "1" },
  { label: "01:30", value: "1.5" },
  { label: "02:00", value: "2" }
];

you can also add testID and accessibilityLabel to each option:

const options = [
  { label: "01:00", value: "1", testID: "switch-one", accessibilityLabel: "switch-one" },
  { label: "01:30", value: "1.5", testID: "switch-one-thirty", accessibilityLabel: "switch-one-thirty" },
  { label: "02:00", value: "2", testID: "switch-two", accessibilityLabel: "switch-two" }
];
<SwitchSelector
  options={options}
  initial={0}
  onPress={value => console.log(`Call onPress with value: ${value}`)}
/>

Custom Example

<SwitchSelector
  initial={0}
  onPress={value => this.setState({ gender: value })}
  textColor={colors.purple} //'#7a44cf'
  selectedColor={colors.white}
  buttonColor={colors.purple}
  borderColor={colors.purple}
  hasPadding
  options={[
    { label: "Feminino", value: "f", imageIcon: images.feminino }, //images.feminino = require('./path_to/assets/img/feminino.png')
    { label: "Masculino", value: "m", imageIcon: images.masculino } //images.masculino = require('./path_to/assets/img/masculino.png')
  ]}
  testID="gender-switch-selector"
  accessibilityLabel="gender-switch-selector"
/>

Props

PropTypeDefaultRequiredNote
optionsarraynulltrueItems array to render. Each item has a label and a value and optionals icons
options[].labelstringnulltrueLabel from each item
options[].valuestringnulltrueValue from each item
options[].customIconJsx element ou FunctionnullfalseOptional custom icon from each item
options[].imageIconstringnullfalseSource from a image icon form each item. Has the same color then label in render
options[].activeColorstringnullfalseColor from each item when is selected
options[].testIDstringundefinedfalseTest ID for each item used for testing (e.g. with Appium)
options[].accessibilityLabelstringundefinedfalseAccessibility Label for each item used for testing (e.g. with Appium)
initialnumber-1falseItem selected in initial render
valuenumberundefinedfalseThe switch value (will call onPress)
onPressfunctionconsole.logtrueCallback function called after change value.
disableValueChangeOnPressboolfalsefalseDisables the onPress call when the value is manually changed
fontSizenumbernullfalseFont size from labels. If null default fontSize of the app is used.
selectedColorstring'#fff'falseColor text of the item selected
buttonMarginnumber0falseMargin of the item selected to component
buttonColorstring'#BCD635'falseColor bg of the item selected
textColorstring'#000'falseColor text of the not selecteds items
backgroundColorstring'#ffffff'falseColor bg of the component
borderColorstring'#c9c9c9'falseBorder Color of the component
borderRadiusnumber50falseBorder Radius of the component
hasPaddingboolfalsefalseIndicate if item has padding
animationDurationnumber250falseDuration of the animation
valuePaddingnumber1falseSize of padding
heightnumber40falseHeight of component
boldboolfalsefalseIndicate if text has fontWeight bold
textStyleobject{}falseText style
selectedTextStyleobject{}falseSelected text style
textContainerStyleobject{}falseStyle for text (and icon) container (TouchableOpacity)
selectedTextContainerStyleobject{}falseStyle for selected text (and icon) container (TouchableOpacity)
imageStyleobject{}falseImage style
styleobject{}falseContainer style
returnObjectboolfalsefalseIndicate if onPress function return an option instead of option.value
disabledboolfalsefalseDisables the switch
borderWidthnumber1falseDefine border width
testIDstringnullfalseTest ID used for testing (e.g. with Appium)
accessibilityLabelstringnullfalseAccessibility Label used for testing (e.g. with Appium)

Authors

Contribute

Contributions are always welcome! Create a new Pull Request