Installations
npm install @wardpieters/react-native-actions-sheet-picker
Developer Guide
BETA
Typescript
Yes
Module System
CommonJS
Releases
Unable to fetch releases
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Package Meta Information
Latest Version
1.0.1
Package Id
@wardpieters/react-native-actions-sheet-picker@1.0.1
Unpacked Size
4.08 MB
Size
3.40 MB
File Count
50
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
2
Dev Dependencies
19
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

No vulnerabilities found.

No security vulnerabilities found.