React Native Actions Sheet Picker

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

Preview

Installation Guide

1yarn add react-native-actions-sheet-picker

or

1npm install 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});
78

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

Core Props of using packages

Properties	Type	Description
actionsSheetProps	object	react-native-actions-sheet
flatListProps	object	FlatListProps
searchInputProps	object	TextInputProps

Roadmap

• Multiple select
• renderListItem | props
• Selected highlight

Contributing

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

License

MIT