A simple and fully customizable dropdown component that implements a select input with bottomlist and also provides a bottomSheet out of the box.
npm install react-native-select-bottom-listA simple, lightweight and fully customisable Select Input List component and a BottomSheet made using Modal from react-native.
- 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.
- Stable Release.
- Custom Header Component.
- More Custom Styles.
- SectionList Support.
- Better Documentation.
Using npm
```
npm i react-native-select-bottom-list
Using yarn
``
yarn add react-native-select-bottom-list
``
import { SelectList } from 'react-native-select-bottom-list';
Simple use case :
`
const YourComponent = () => {
const [value, setValue] = useState('Select');
return (
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'}
/>
);
};
`
``
import { BottomSheet, BottomSheetRefType } from 'react-native-select-bottom-list';
Simply place any component or view inside
Example :
`
const App = () => {
const sheetRef = useRef
const onPress = () => {
sheetRef.current?.open();
};
return (
Open BottoSheet
presentationStyle={'overFullScreen'}
height={'30%'}>
padding: 100,
}}>
Put Whatever you want to have here!
);
};
`
| 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 |
| Name | Type | Description |
| :------ | :--------- | :--------------------------------------------------- |
| close | Function | Optional. To close BottomSheet, Use ref to close |open
| | Function | Optional. To open BottomSheet, Use ref to open |
| 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 |
Contributions are always welcome! Feel free to open a new GitHub issue for any change or enhancement.
Any feedback would be deeply appreciated, please feel free to reach out to me at amangautam72@gmail.com
Aman Gautam
MIT