SwitchSelector

Switch Selector to React Native.

SwitchSelector

SwitchSelector - Custom Example

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

| Prop | Type | Default | Required | Note | | ------------------------- | ----------------------- | ----------- | -------- | -------------------------------------------------------------------------------- | | options | array | null | true | Items array to render. Each item has a label and a value and optionals icons | | options[].label | string | null | true | Label from each item | | options[].value | string | null | true | Value from each item | | options[].customIcon | Jsx element ou Function | null | false | Optional custom icon from each item | | options[].imageIcon | string | null | false | Source from a image icon form each item. Has the same color then label in render | | options[].activeColor | string | null | false | Color from each item when is selected | | options[].testID | string | undefined | false | Test ID for each item used for testing (e.g. with Appium) | | options[].accessibilityLabel | string | undefined | false | Accessibility Label for each item used for testing (e.g. with Appium) | | options[].disabled | boolean | false | false | Disables an item | | initial | number | -1 | false | Item selected in initial render | | value | number | undefined | false | The switch value (will call onPress) | | onPress | function | console.log | true | Callback function called after change value. | | disableValueChangeOnPress | bool | false | false | Disables the onPress call when the value is manually changed | | fontSize | number | null | false | Font size from labels. If null default fontSize of the app is used. | | selectedColor | string | '#fff' | false | Color text of the item selected | | buttonMargin | number | 0 | false | Margin of the item selected to component | | buttonColor | string | '#BCD635' | false | Color bg of the item selected | | textColor | string | '#000' | false | Color text of the not selecteds items | | backgroundColor | string | '#ffffff' | false | Color bg of the component | | borderColor | string | '#c9c9c9' | false | Border Color of the component | | borderRadius | number | 50 | false | Border Radius of the component | | hasPadding | bool | false | false | Indicate if item has padding | | animationDuration | number | 250 | false | Duration of the animation | | valuePadding | number | 1 | false | Size of padding | | height | number | 40 | false | Height of component | | bold | bool | false | false | Indicate if text has fontWeight bold | | textStyle | object | {} | false | Text style | | selectedTextStyle | object | {} | false | Selected text style | | textContainerStyle | object | {} | false | Style for text (and icon) container (TouchableOpacity) | | selectedTextContainerStyle | object | {} | false | Style for selected text (and icon) container (TouchableOpacity) | | imageStyle | object | {} | false | Image style | | style | object | {} | false | Container style | | returnObject | bool | false | false | Indicate if onPress function return an option instead of option.value | | disabled | bool | false | false | Disables the switch | | borderWidth | number | 1 | false | Define border width | | testID | string | null | false | Test ID used for testing (e.g. with Appium) | | accessibilityLabel | string | null | false | Accessibility Label used for testing (e.g. with Appium) | | touchableProps | object | {} | false | Custom props for TouchableOpacity element |

Authors

• Lucas Santana Carneiro - jkdrangel
• Cássio Silva de Sá Santos - ssscassio
• Contributors

Contribute

Contributions are always welcome! Create a new Pull Request