Project Title

A simple, lightweight and fully customisable Select Input List component and a BottomSheet made using Modal from react-native.

$3

!first !second !third

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 (

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'}
/>

);
};
`

BottomSheet Usage

`
import { BottomSheet, BottomSheetRefType } from 'react-native-select-bottom-list';
`

Simply place any component or view inside and use reference to open and close it.

Example :

`
const App = () => {

const sheetRef = useRef(null);

const onPress = () => {
sheetRef.current?.open();
};

return (


Open BottoSheet


ref={sheetRef}
presentationStyle={'overFullScreen'}
height={'30%'}>
style={{
padding: 100,
}}>

Put Whatever you want to have here!




);
};
`

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