React-native-select-bottom-list NPM

Project Title

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

Demo

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 (
    <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