Gathering detailed insights and metrics for @kbarreto23/react-native-actions-sheet-picker
Gathering detailed insights and metrics for @kbarreto23/react-native-actions-sheet-picker
A React Native component that provides a filterable select dropdown/picker.
Installations
npm install @kbarreto23/react-native-actions-sheet-pickerDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.19.0
NPM Version
8.19.3
Score
40
Supply Chain
29.9
Quality
65.2
Maintenance
50
Vulnerability
93.8
License
Releases
17
Languages
7
TypeScript
Java
Ruby
Objective-C
JavaScript
Objective-C++
Shell
TypeScript (35.2%)
Java (31.51%)
Ruby (10%)
Objective-C (9.86%)
JavaScript (7.91%)
Objective-C++ (4.88%)
Shell (0.63%)
Developer
Download Statistics
Total Downloads
659
Last Day
1
Last Week
2
Last Month
12
Last Year
248
GitHub Statistics
MIT License
102 Stars
79 Commits
20 Forks
2 Watchers
1 Branches
3 Contributors
Updated on Jan 08, 2025
Maintainers
1
Package Meta Information
Latest Version
0.3.7
Package Id
@kbarreto23/react-native-actions-sheet-picker@0.3.7
Unpacked Size
53.59 kB
Size
11.19 kB
File Count
27
NPM Version
8.19.3
Node Version
16.19.0
Published on
Mar 14, 2023
Total Downloads
Cumulative downloads
Total Downloads
659
Last Day
0%
1
Compared to previous day
Last Week
0%
2
Compared to previous week
Last Month
-7.7%
12
Compared to previous month
Last Year
6%
248
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
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 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
- 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
No vulnerabilities found.
No security vulnerabilities found.