Expo / React Native Select Dropdown

Installation

npm install expo-select-dropdown

OR

yarn add expo-select-dropdown

Dependencies

This package depends on the following packages: - @expo/vector-icons

Example

Without Filters	With Fitlers

Usage

1    import {SelectDropdown, DropdownData} from "expo-select-dropdown";
2    
3    export default function App() {  
4     const [selected, setSelected] = useState<DropdownData<string, string> | null>(null);  
5     const [data] = useState<DropdownData<string, string>[]>([  
6          {key: "1", value: "Toothbrush"}, 
7          {key: "2", value: "Laptop"}, 
8          {key: "3", value: "Sunglasses"},  
9	      {key: "4", value: "Baseball"}, 
10	      {key: "5", value: "Scissors"}, 
11	      {key: "6", value: "Bicycle"},  
12	      {key: "7", value: "Camera"}, 
13	      {key: "8", value: "Umbrella"}, 
14	      {key: "9", value: "Backpack"},  
15	      {key: "10", value: "Water bottle"}  
16     ]);
17       
18     return (  
19          <SelectDropdown  
20		      data={data}  
21              placeholder={"Select option"}  
22              selected={selected}  
23              setSelected={setSelected}  
24              searchOptions={{cursorColor: "#007bff"}}  
25              searchBoxStyles={{borderColor: "#007bff"}}  
26              dropdownStyles={{borderColor: "#007bff"}}  
27          />  
28      );  
29    }

Filter Usage

1export default function App() {
2    const [selected, setSelected] = useState<DropdownData<string, string> | null>(null);
3    const data = [
4        {key: "1", value: "Toothbrush", location: "Bathroom", date: "2021-05-01", time: "12:00"},
5        {key: "2", value: "Laptop", location: "Bathroom", date: "2021-05-01", time: "12:00"},
6        {key: "3", value: "Sunglasses", location: "Bedroom", date: "2021-05-01", time: "12:00"},
7        {key: "4", value: "Baseball", location: "Bathroom", date: "2021-05-01", time: "12:00"},
8        {key: "5", value: "Scissors", location: "Bedroom", date: "2021-06-01", time: "1:00"},
9        {key: "6", value: "Bicycle", location: "Bedroom", date: "2021-05-01", time: "12:00"},
10        {key: "7", value: "Camera", location: "Bathroom", date: "2021-06-01", time: "1:00"},
11        {key: "8", value: "Umbrella", location: "Bedroom", date: "2021-06-01", time: "12:00"},
12        {key: "9", value: "Backpack", location: "Bathroom", date: "2021-05-01", time: "1:00"},
13        {key: "10", value: "Water bottle", location: "Bedroom", date: "2021-06-01", time: "12:00"},
14    ]
15    const [tags] = useState<TagData[]>([
16        {key: "1", name: "Location", onFilter: () => {
17            return data.filter((item) => item.location.toLowerCase().includes("Bathroom".toLowerCase()));
18        }},
19        {key: "2", name: "Date", onFilter: () => {
20            return data.filter((item) => item.date.toLowerCase().includes("2021-05-01".toLowerCase()));
21        }},
22        {key: "3", name: "Time", onFilter: () => {
23            return data.filter((item) => item.time.toLowerCase().includes("12:00".toLowerCase()));
24        }}
25    ])
26
27    return (
28        <View style={styles.container}>
29            <SelectDropdown
30                data={data.map((item) => {return {key: item.key, value: item.value}})}
31                tags={tags}
32                placeholder={"Select option"}
33                selected={selected}
34                setSelected={setSelected}
35                searchOptions={{cursorColor: "#007bff"}}
36                searchBoxStyles={{borderColor: "#007bff"}}
37                dropdownStyles={{borderColor: "#007bff"}}
38            />
39        </View>
40    );
41}

SelectDropdownProps

1interface SelectDropdownProps {  
2    data: DropdownData<any, any>[]  
3    placeholder: string  
4    selected: DropdownData<any, any> | null  
5    setSelected: (selected: DropdownData<any, any>) => void
6    tags?: TagData[]
7    searchOptions?: TextInputProps  
8    searchBoxStyles?: ViewStyle  
9    dropdownStyles?: ViewStyle
10}

TagData

1interface TagData {
2    key: any;
3    name: string;
4    onFilter: () => DropdownData<any, any>[] | undefined;
5}

Work In Progress

• Filter option added for searching items (optional)
• Tags for the filters
• Improved default styling
• Restrict breaking styling options
• Make search setting optional
• Dependency clean up