Simple Dropdown With Sticky Group Title For React Native

Description:

A minimal clean dropdown component for React Native. It automatically stick the group title to the top while scrolling the option list.

How to use it:

1. Install the dropdown component.

# Yarn
$ yarn add react-native-section-dropdown
# NPM
$ npm install react-native-section-dropdown

2. Import the SectionDropdown component.

import { SectionDropdown } from 'react-native-section-dropdown';

3. Define your data for the dropdown.

const myData = [
  {
    groupId: 1,
    title: 'Group 1',
    data: [
      { groupId: 1, label: 'Item 1', value: 'item1' },
      { groupId: 1, label: 'Item 2', value: 'item2' },
      { groupId: 1, label: 'Item 3', value: 'item3' },
    ],
  },
  {
    groupId: 2,
    title: 'Group 2',
    data: [
      { groupId: 2, label: 'Item 1', value: 'item1' },
      { groupId: 2, label: 'Item 2', value: 'item2' },
      { groupId: 2, label: 'Item 3', value: 'item3' },
    ],
  },
];

4. Populate the dropdown with the data you provide.

<SectionDropdown
  data={DATA}
/>;

5. Available component props.

data: SectionItem[];
defaultValue?: DropdownItem;
onSelected?: (item: DropdownItem) => void;
accessoryRight?: () => JSX.Element;
style?: StyleProp<ViewStyle>;
selectedTextStyle?: StyleProp<TextStyle>;
placeholder?: string;
itemHeaderStyle?: StyleProp<ViewStyle>;
itemHeaderTextStyle?: StyleProp<TextStyle>;
itemStyle?: StyleProp<ViewStyle>;
itemTextStyle?: StyleProp<TextStyle>;
selectedItemBackgroundColor?: string;
listPosition?: 'top' | 'bottom';

Preview: