Rn-awesome-select NPM

rn-awesome-select

A cross-platform (iOS / Android), modal select React Native component.

Installation

npm install rn-awesome-select

Screenshots

IOS	ANDROID

Usage

import RNModalSelect from 'rn-awesome-select';

// ...

const items = [
  {
    id: '1',
    name: 'Apple',
  },
  {
    id: '2',
    name: 'Blogger',
  },
  {
    id: '3',
    name: 'Dropbox',
  },
  {
    id: '4',
    name: 'Gmail',
  },
  {
    id: '5',
    name: 'Heroku',
  },
  {
    id: '6',
    name: 'Outlook',
  },
  {
    id: '7',
    name: 'Skype',
  },
  {
    id: '8',
    name: 'Slack',
  },
];

export default function App() {
  const [visible, setVisible] = useState(false);
  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => setVisible(true)}
        style={{
          backgroundColor: 'blue',
          padding: 10,
          width: '60%',
          alignItems: 'center',
        }}
      >
        <Text style={{ color: 'white' }}>Select Item</Text>
      </TouchableOpacity>
      <RNModalSelect
        items={items}
        itemLabelFieldName="name"
        enableSearch={true}
        title="Select Platform"
        showSelect={visible}
        onItemSelected={(item) => {
          console.log(item);
        }}
        onClose={() => setVisible(false)}
      />
    </View>
  );
}

Datasource structure

The datasource (items) should be an array of objects with at least one property see example below:

[
  {
    id: '1',
    label: 'Apple',
  },
];

If you have a different object structure than the example above, in that case, you can specify which one you want to use as the label by passing the itemLabelFieldName="yourfieldName"

##Props

Prop	Description	Type	Required	Default
items	Array of objects to display	Array	true	[]
itemLabelFieldName	The field name to be used as the label	string	false	label
enableSearch	Allow you to enable or disable search	boolean	false	false
title	The title of the select modal	string	true	null
showSelect	Set to true to show select modal	string	true	false
onItemSelected	The function that is called when an item is selected	func	true	null
onClose	The function that is called when the dismiss button is click	func	true	null