Nourishing Pear Medley

    react-native-switch-selector

    2.3.0 • Public • Published

    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

    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

    Contribute

    Contributions are always welcome! Create a new Pull Request

    Keywords

    Install

    npm i react-native-switch-selector

    DownloadsWeekly Downloads

    6,563

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    234 kB

    Total Files

    13

    Last publish

    Collaborators

    • jkdrangel
    • ssscassio