Gathering detailed insights and metrics for react-native-select-bottom-list
A simple, lightweight and fully customisable Select Input List component and a BottomSheet made using Modal from react-native.
Installations
npm install react-native-select-bottom-listDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
18.7.0
NPM Version
8.15.0
Score
38.4
Supply Chain
53
Quality
66.2
Maintenance
50
Vulnerability
94.1
License
Releases
3
Contributors
1
Unable to fetch Contributors
Languages
1
TypeScript
TypeScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
amangautam72
Download Statistics
Total Downloads
4,324
Last Day
3
Last Week
21
Last Month
125
Last Year
1,951
GitHub Statistics
9 Stars
27 Commits
2 Forks
2 Watching
1 Branches
1 Contributors
Bundle Size
538.00 B
Minified
261.00 B
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.7
Package Id
react-native-select-bottom-list@1.0.7
Unpacked Size
19.36 kB
Size
6.23 kB
File Count
11
NPM Version
8.15.0
Node Version
18.7.0
Total Downloads
Cumulative downloads
Total Downloads
4,324
Last day
-25%
3
Compared to previous day
Last week
-53.3%
21
Compared to previous week
Last month
-32.1%
125
Compared to previous month
Last year
15.2%
1,951
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
Dev Dependencies
2
Versions
Project Title
A simple, lightweight and fully customisable Select Input List component and a BottomSheet made using Modal from react-native.
Demo
Features
- Lightweight Select Input List Component.
- Dynamic Modal height.
- Fully Customisable styles.
- Included BottomSheet component for custom usage.
- Cross platform.
- Written in Typescript.
- Basic Search Support.
Coming Soon Features :rocket:
- Stable Release.
- Custom Header Component.
- More Custom Styles.
- SectionList Support.
- Better Documentation.
Installation
Using npm
npm i react-native-select-bottom-list
Using yarn
yarn add react-native-select-bottom-list
SelectList Usage
import { SelectList } from 'react-native-select-bottom-list';
Simple use case :
const YourComponent = () => {
const [value, setValue] = useState('Select');
return (
<SafeAreaView>
<SelectList
onSelect={(item,index) => setValue(item)}
value={value}
data={[
'Change the world by being yourself – T.S Eliot',
'Every moment is a fresh beginning. – T.S Eliot',
'When nothing goes right, go left. – Anonymous',
'Success is the child of audacity. – Benjamin Disraeli',
'Never regret anything that made you smile. – Mark Twain',
'Die with memories, not dreams. – Anonymous',
]}
headerTitle={'Quotes'}
/>
</SafeAreaView>
);
};
BottomSheet Usage
import { BottomSheet, BottomSheetRefType } from 'react-native-select-bottom-list';
Simply place any component or view inside
Example :
const App = () => {
const sheetRef = useRef<BottomSheetRefType>(null);
const onPress = () => {
sheetRef.current?.open();
};
return (
<SafeAreaView>
<Text onPress={onPress} style={{padding: 20}}>
Open BottoSheet
</Text>
<BottomSheet
ref={sheetRef}
presentationStyle={'overFullScreen'}
height={'30%'}>
<View
style={{
padding: 100,
}}>
<Text style={{fontSize: 20, textAlign: 'center'}}>
Put Whatever you want to have here!
</Text>
</View>
</BottomSheet>
</SafeAreaView>
);
};
Documentation
SelectList Props
| Name | Type | Description |
|---|---|---|
style | ViewStyle | Optional. Custom style for input |
placeHolder | string | Optional. Placeholder for input |
textStyle | ViewStyle | Optional. Custom style for input value |
value | string | Required. Selected value from list |
data | Object | Required. list of data to render in bottom list |
listType | string | Optional. Not Required as of now, defaults to 'list', 'sectionlist' to be added in future |
itemStyle | ViewStyle | Optional. List Item container style |
itemTextStyle | TextStyle | Optional. List Item text style |
headerStyle | TextStyle | Optional. List Header Container style |
headerTextStyle | TextStyle | Optional. List Header Text style |
itemValueKey | string | Optional. Used to render list item with key other than 'title','value'&'text'. itemValueKey doesn't work for nested key, use renderItem for nested key |
headerTitle | string | Optional. Header value of title |
onSelect | Function | Required. Function invoked on list item selection, gives back (item, index) |
renderItem | Function | Optional. Custom list item, gives back ({item, index}, sheetRef). sheetRef containes close() & open() method to close & open respectively |
presentationStyle | string | Optional. iOS only, this is similar to presentationStyle of Modal from react native |
listHeight | string Or number | Optional. Height of Bottomlist |
renderIcon | Function | Optional. Render icon |
showSearch | boolean | Optional. Search Input to search items. Search only works for defualt list. Don't use renderItem in case you want to use search. For better user experience use 'listheight' prop |
BottomSheet Methods
| Name | Type | Description |
|---|---|---|
close | Function | Optional. To close BottomSheet, Use ref to close |
open | Function | Optional. To open BottomSheet, Use ref to open |
BottomSheet Props
| Name | Type | Description |
|---|---|---|
children | ReactNode | Optional. Content inside bottom sheet |
height | string | Optional. Height of BottomSheet |
presentationStyle | ViewStyle | Optional. iOS only, this is similar to presentationStyle |
Contributing
Contributions are always welcome! Feel free to open a new GitHub issue for any change or enhancement.
Feedback
Any feedback would be deeply appreciated, please feel free to reach out to me at amangautam72@gmail.com
Author
Aman Gautam
License
MIT
No vulnerabilities found.
No security vulnerabilities found.