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});

Options

Properties	Type	Description	Default
id *required	string	A unique id for the ActionSheet
data	array	Array of list items	{name: string, ...props}[]
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

Style options

Properties	Type	Description	Default
actionSheet	ViewStyle	Custom style for the action sheet	undefined
activityIndicator	{color?: string, style?: ViewStyle}	Custom style for the activity indicator	undefined
close	{text?: TextStyle, container?: ViewStyle}	Custom style for the close text and container	undefined
input	TextStyle	Custom style for the search input	undefined
item	{text?: TextStyle, container?: ViewStyle}	Custom style for the item text and container	undefined
label	{text?: TextStyle, container?: ViewStyle}	Custom style for the label text and container	undefined
noDataFound	{text?: TextStyle, container?: ViewStyle}	Custom style for the "no data found" text and container	undefined

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
• Issue 3 (https://github.com/Bur0/react-native-actions-sheet-picker/issues/3)
• Issue 4 (https://github.com/Bur0/react-native-actions-sheet-picker/issues/4)
• renderListItem | props
• Selected highlight

Contributing

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

License

MIT