Gathering detailed insights and metrics for @wardpieters/react-native-actions-sheet-picker
Gathering detailed insights and metrics for @wardpieters/react-native-actions-sheet-picker
Installations
npm install @wardpieters/react-native-actions-sheet-pickerDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Score
38.3
Supply Chain
54.8
Quality
65.8
Maintenance
50
Vulnerability
93.6
License
Releases
Unable to fetch releases
Contributors
1
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
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
0
Last day
0%
0
Compared to previous day
Last week
0%
0
Compared to previous week
Last month
0%
0
Compared to previous month
Last year
0%
0
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
2
Dev Dependencies
19
Versions
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.