Switch Selector for React Native
Switch branches/tags
Clone or download
Permalink
Failed to load latest commit information.
assets Add new Example Oct 26, 2017
.gitignore Add git ignore Jan 17, 2018
LICENSE Create LICENSE Jun 4, 2018
README.md Update readme Jun 28, 2018
index.js fix for rn 56 Sep 26, 2018
package.json 1.1.9 Jun 19, 2018

README.md

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' }
];
<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')
    ]} />

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
initial number 0 true Item selected in initial render
onPress function console.log true Callback function called after change value.
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
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
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
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

Authors

Contribute

Contributions are always welcome! Create a new Pull Request