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

Custom styles

Custom styles allows you to change all the default style to suite your app theme.

overlayColor

Changes the overlay color of the modal. Usage overlayColor='rgba(0,0,0,0.5)'

containerStyle

Modifies the overall style of the select container. The default is rgba(240,240,241,0.8). Accepts all view styles

titleTextStyle

The text style of the select title. Accepts all Text styles

searchInputWrapStyle

Styles of the search input wrapper. Accepts all View's styles

searchInputStyle

Styles of the search input. Accepts all TextInput styles

optionItemStyle

Styles of the select items. Accepts all TouchableOpacity styles

optionTextStyle

Styles of the option text. Accepts all Text styles

dismissButtonStyle

Styles of the dismiss button. Accepts all TouchableOpacity styles

dismissButtonTextStyle

Styles of the dismiss button text. Accepts all Text styles

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT