React Native Actions Sheet Picker

A React Native component that provides a filterable select dropdown/picker.

Preview

Installation Guide

1yarn add @wardpieters/react-native-actions-sheet-picker

or

1npm install @wardpieters/react-native-actions-sheet-picker

Usage

1import React, { useState, useMemo, useEffect } from 'react';
2
3import { StyleSheet, Text, TouchableOpacity, SafeAreaView } from 'react-native';
4import { Picker, onOpen } from 'react-native-actions-sheet-picker';
5
6/*
7 **Example data:
8 */
9import countries from './countries.json';
10
11export default function App() {
12  const [data, setData] = useState([]);
13  const [selected, setSelected] = useState(undefined);
14  const [query, setQuery] = useState('');
15
16  useEffect(() => {
17    setData(countries);
18  }, []);
19
20  /*
21   **Example filter function
22   * @param {string} filter
23   */
24  const filteredData = useMemo(() => {
25    if (data && data.length > 0) {
26      return data.filter((item) =>
27        item.name
28          .toLocaleLowerCase('en')
29          .includes(query.toLocaleLowerCase('en'))
30      );
31    }
32  }, [data, query]);
33
34  /*
35   **Input search
36   *@param {string} text
37   */
38  const onSearch = (text) => {
39    setQuery(text);
40  };
41
42  return (
43    <SafeAreaView style={styles.container}>
44      <TouchableOpacity
45        style={styles.button}
46        onPress={() => {
47          onOpen('country');
48        }}
49      >
50        <Text>Open ActionSheet</Text>
51      </TouchableOpacity>
52      <Text style={{ padding: 10 }}>Chosen : {JSON.stringify(selected)}</Text>
53      <Picker
54        id="country"
55        data={filteredData}
56        inputValue={query}
57        searchable={true}
58        label="Select Country"
59        setSelected={setSelected}
60        onSearch={onSearch}
61      />
62    </SafeAreaView>
63  );
64}
65
66const styles = StyleSheet.create({
67  container: {
68    flex: 1,
69    alignItems: 'center',
70  },
71  button: {
72    backgroundColor: '#8B93A5',
73    padding: 10,
74    borderRadius: 6,
75    marginTop: 50,
76  },
77});

Options

Properties	Type	Description	Default
id *required	string	A unique id for the ActionSheet
data	array	Array of list items	[]
inputValue	string	The value to show for the text input.
searchable	boolean	Searchable state	false
loading	boolean	Loading state	false
label	string	Flatlist label
height	string	ActionSheet height	Dimensions.get('window').height * 0.5
closeText	string	Close text	"Close"
placeholderText	string	Placeholder text	"Search"
noDataFoundText	string	No data found text	"No Data Found."
placeholderTextColor	string	Placeholder text color	#8B93A5
setSelected	function	Selected function
onSearch	function	Textinput search function
renderListItem	function	Render List item

Method

Properties	Type	Description
onOpen	function	SheetManager show
onClose	function	SheetManager hide

License

MIT