rn-option-select

0.1.0 • Public • Published

rn-option-select

npm version code style: prettier

An simple and customizable react-native select.

Features

  • Single / multiple choices
  • Customizable styles

Demos

Setup

This library is available on npm, install it with: npm install --save rn-option-select or yarn add rn-option-select.

Usage

  1. Import rn-option-select:
import { Select } from "rn-option-select";
  1. Create a select:
const options = 
[
    { title: "Title 1", value: 'title1' },
    { title: "Title 2", value: 'title2', selected: true },
    { title: "Title 3", value: 'title3' },
]

render () {
    return (
      <View>
        <Select
          onOptionPress={values => {
            console.log(values)
          }}
          optionStyle={{
            text: {
              color: '#333333',
            },
            container: {
              borderBottomWidth: 1,
              borderColor: 'rgb(191, 191, 191)',
            },
          }}
          options={options}
        />
      </View>
    )
  }

Available props

Name Type Default Description
options array REQUIRED Array of values objects more
multiple bool false Select multiple values
onOptionPress func ( ) => null Called when option is pressed (values as arg) more
disabled bool false Disable select
unselectedOption React.element A circular View with a border Override element for unselected options
selectedOption React.element A circular View with backgroundColor: 'blue' Override element for selected options
containerStyle Object { } A Object with styles for select container
optionStyle Object { } A Object with styles for options

Options Array

Basic example
[
    { title: "Title 1", value: 'title1' },
    { title: "Title 2", value: 'title2' },
    { title: "Title 3", value: 'title3' },
]
One option selected on render
[
    { title: "Title 1", value: 'title1', selected: true },
    { title: "Title 2", value: 'title2' },
    { title: "Title 3", value: 'title3' },
]
Title with a React.element
[
    {
        title: <View><Text>Whatever you want here</Text></View>,
        value: 'title1',
        selected: true,
    },
    {
        title: "You can pass strings or React.element",
        value: 'title2',
    },
    {
        title: <View><Text>Whatever you want here too</Text></View>,
        value: 'title3',
    },
]

onOptionPress

<Select
    ...
    onOptionPress={values => {
        this.setState({ options: values });
    }}
    ...
/>

values is an Array like options array with selected options.

Pull requests, feedbacks and suggestions are welcome!

Dependencies (1)

Dev Dependencies (1)

Package Sidebar

Install

npm i rn-option-select

Weekly Downloads

1

Version

0.1.0

License

MIT

Unpacked Size

11.7 kB

Total Files

7

Last publish

Collaborators

  • leonelfaugusto