React native expo select dropdown modal with autocomplete search filter

Feature

Using this package, you can display an array of object on select dropdown on modal screen and select a specific object and render its display name.

Props

title - Default title is Select Item, Pass a title to display initially, such as 'Select company', 'Select user', etc, than after you select an item, selected item's display name will be displayed.

data - To render your items on a list, just pass array of objects, Note: only pass array of objects.

onSelect - Pass a method to select an item. For example, if you have a state like const[selectedCompany, setSelectedCompany] = useState(), just pass setSelectedCompany to onSelect prop.

displayName - Pass a prop as string to displayName for example displayName={"name"}, in this case name should be a field inside a object you passed on data array, like as data = [{id: 1, name: abc, age: 50}, {id: 2, name: def, age: 25}], So now on this object, except for id, name and age, if you mis-spell or pass a string which is not a field of a object on array, the package will not render anyhing on a modal list.

Usage

1
2import { StatusBar } from 'expo-status-bar';
3import { useState } from 'react';
4import { StyleSheet, Text, View } from 'react-native';
5import SelectDropdownModal from 'expo-select-dropdonwn-modal-autocomplete'
6
7
8export default function App() {
9
10  const companyUsers = [
11    { id: 1, name: 'Ram' },
12    { id: 2, name: 'Shyam' },
13    { id: 3, name: 'Hari' },
14    { id: 4, name: 'Krishna' },
15    { id: 5, name: 'Bishnu' },
16    { id: 6, name: 'Basu' },
17  ]
18
19  const [selectedUser, setSelectedUser] = useState()
20
21  return (
22    <View style={styles.container}>
23      <SelectDropdownModal
24        data={companyUsers}
25        displayName={'name'}
26        onSelect={setSelectedUser}
27        title='Select user'
28      />
29
30      {!!selectedUser && <Text style={{textAlign: 'center', padding: 12, fontSize: 32}}>{selectedUser.name}</Text>}
31
32      <StatusBar style="auto" />
33    </View>
34  );
35}
36