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 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 [email protected]

Author

Aman Gautam

License

MIT