react-native-select-awesome

React Native Select Awesome - Library for React Native on platform Android and iOS

Table of Content

1. What is React Native Select Awesome?
2. Getting Started
3. Props
4. Example
5. License

1. What is React Native Select Awesome?

React Native Select Awesome ingenious and dynamic front-end framework created by TuanTVK to build cross platform Android & iOS mobile apps using ready to use generic components of React Native.

2. Getting Started

Install

npm install react-native-select-awesome --save
 
# or use yarn 
 
yarn add react-native-select-awesome

Import

import RNSelect from 'react-native-select-awesome';

or

var RNSelect = require('react-native-select-awesome');

3. Props

Follow Style in React Native

Props	Description	Default	PropTypes
datas	specify the options the user can select from	[]	array isRequired
value	control the current value	""	string
placeholder	change the text displayed when no option is selected	Select value	string
label	customize label for select item	label	string
width	width of input	100%	string
height	height of input	50	number
styleInput	style customize for input	{}	object
styleItem	style customize for item select	{}	object
stylePicker	style customize container picker	{ height: 250 }	object
notFind	change the text displayed when no find value	Not Find	string
styleNotFind	style customize for text notFind	{}	object
isDisabled	whether the input is disabled	true	bool
selectValue	return value when you use rightIcon props and select	() => { }	func
rightIcon	customize component right, it is function return element of you and prop clearValue	null	func
clearValue	clear value of select when you use rightIcon props and select		func
customItem	customize select item use component of you, it is function return prop (item, onPress)	null	func

4. Example

Ex1: Basic

// At the top of your file
import React, { Component } from 'react';
import { View } from 'react-native';
import RNSelect from 'react-native-select-awesome';
 
const LANGS = [
  {id: 1, label: 'Java', value: 'java'},
  {id: 2, label: 'JavaScript', value: 'js'},
  {id: 3, label: 'Python', value: 'py'},
  {id: 4, label: 'C', value: 'c'},
  {id: 5, label: 'PHP', value: 'php'},
];
 
const itemCustom = {color: '#146eff' };
 
// Later on in your component
export default class RNSelectExample extends Component {
  render() {
    return(
      <View>
        <RNSelect 
          datas={LANGS}
          placeholder="Select lang"
          height={60}
          styleItem={itemCustom}
        />
      </View>
    )
  }
}

Ex2: Custom item

// At the top of your file
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import RNSelect from 'react-native-select-awesome';
 
const PERSONS = [
  {id: 1, name: 'Alexander', value: 'alexander'},
  {id: 2, name: 'Ethan', value: 'ethan'},
  {id: 3, name: 'Daniel', value: 'daniel'},
  {id: 4, name: 'Matthew', value: 'matthew'},
  {id: 5, name: 'Joseph', value: 'joseph'},
];
 
// Later on in your component
export default class RNSelectExample2 extends Component {
  render() {
    return(
      <View>
        <RNSelect 
          datas={PERSONS}
          placeholder="Select people"
          label="name"
          notFind="Opp... !"
          styleNotFind={{ textAlign: 'center' }}
          customItem={(item, _selectValue) => {
            return (
              <View style={{marginBottom: 10, backgroundColor: '#f00'}}>
                <Text onPress={() => _selectValue(item)}>{item.name}</Text>
              </View>
            )
          }}
        />
      </View>
    )
  }
}

5. License

MIT Licensed. Copyright (c) TuanTVK 2019.