react-native-select-bottom-list

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 🚀

• 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 and use reference to open and close it.

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 [e-mail]

Author

Aman Gautam

License

MIT