This package has been deprecated

Author message:

We're maintaining the package at @wiicamp/react-native-selector

react-native-easy-select

A flexible select component for React Native.

Table of Contents

• Features
• Install
• Usage
• Props
• Contribution
• License

Features

• Easy to use
• Easy to customize
• Pure javascript
• Lightweight package

Install

yarn add react-native-easy-select

or

npm i --save react-native-easy-select

Usage

import Selector from 'react-native-easy-select'; // Import package
 
const Example = () => (
  <Selector
    theme="dropdown" // Default: 'simple'
    items={[
      { myLabel: 'English', myValue: 'english' },
      { myLabel: 'French', myValue: 'french' },
    ]}
 
    // Specify key
    valueKey="myValue" // Default: 'value'
    labelKey="myLabel" // Default: 'label'
 
    defaultValue="english" // Set default value
    placeholder="Select a language" // Placeholder for dropdown UI
 
    loading={false} // Set loading for selector
    disabled ={false} // Set disable for selector
 
    // Styles
    textOptionStyle={{ color: 'green' }}
    placeholderContainerStyle={{ paddingVertical: 20 }}
    placeholderStyle={{ color: 'red' }}
    optionContainerStyle={{ backgroundColor: 'yellow' }}
    iconStyle={{ tintColor: 'black' }}
    loadingStyle={{ marginBottom: 10 }}
 
    // Change dropdown icon
    iconDropdownComponent={() => <AppText>Demo</AppText>}
 
    // On value change
    onChange={(value) => console.log(value)}
  />
);
 
export default Example;

Props

Name	Type	Default	Description
items	Array	[]	Required. The items for the component to render. You can specify value and label via valueKey and labelKey
onChange	Function	(value) => {}	Required. Callback when the change the value button is pressed.
valueKey	String	'value'	Key name to specify value props of object
labelKey	String	'label'	Key name to specify label props of object
theme	String = 'simple' or 'dropdown'	'simple'	Required. Specify the UI for select components. Default is simple and dropdown UI is dropdown.
defaultValue	String or Numer	''	Specify the default value of the selector. This value will be compared with the value of valueKey.
loading	String or Numer	false	Show ActivityIndicator when loading.
disabled	String or Numer	false	Disable all interactions for selector.
iconDropdownComponent	Function	null	Custom icon component to be rendered.
defaultValue	String or Numer	''	Specify the default value of the selector. This value will be compared with the value of valueKey.
placeholder	String	''	Set placeholder for dropdown UI.
containerStyle	Object	null	Style overrides for container View of component.
optionContainerStyle	Object	null	Style overrides for View container of each option.
placeholderContainerStyle	Object	null	Style overrides for container View wrap of placeholder.
placeholderStyle	Object	null	Style overrides for Text of placeholder.
textOptionStyle	Object	null	Style overrides for Text of each option.
iconStyle	Object	null	Style overrides for icon component.
loadingStyle	Object	null	Style overrides for ActivityIndicator component.

Contribution

Contribution are always welcome and recommended! Here is how:

• Fork the repository (here is the guide).
• Clone to your machine git clone https://github.com/YOUR_USERNAME/react-native-easy-select.git
• Make your changes
• Create a pull request

License

react-native-easy-select is released under the MIT license. See LICENSE for details.

Any question or support will welcome.