React-native-paper-dropdown NPM

react-native-paper-dropdown

Material Design Dropdown Component using React Native Paper, now also with multiselect

Dependencies

react-native-paper

Installation

yarn add react-native-paper-dropdown

npm i react-native-paper-dropdown

Demo

Basic Example

Single Select

import React, { useState } from 'react';
import { View } from 'react-native';
import { Dropdown } from 'react-native-paper-dropdown';
import { Provider as PaperProvider } from 'react-native-paper';

const OPTIONS = [
  { label: 'Male', value: 'male' },
  { label: 'Female', value: 'female' },
  { label: 'Other', value: 'other' },
];

export default function App() {
  const [gender, setGender] = useState<string>();

  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <Dropdown
          label="Gender"
          placeholder="Select Gender"
          options={OPTIONS}
          value={gender}
          onSelect={setGender}
        />
      </View>
    </PaperProvider>
  );
}

Multi Select

import React, { useState } from 'react';
import { View } from 'react-native';
import { MultiSelectDropdown } from 'react-native-paper-dropdown';
import { Provider as PaperProvider } from 'react-native-paper';

const MULTI_SELECT_OPTIONS = [
  { label: 'White', value: 'white' },
  { label: 'Red', value: 'red' },
  { label: 'Blue', value: 'blue' },
  { label: 'Green', value: 'green' },
  { label: 'Orange', value: 'orange' },
];

export default function App() {
  const [colors, setColors] = useState<string[]>([]);

  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <MultiSelectDropdown
          label="Colors"
          placeholder="Select Colors"
          options={MULTI_SELECT_OPTIONS}
          value={colors}
          onSelect={setColors}
        />
      </View>
    </PaperProvider>
  );
}

Props

`DropdownProps`

Prop	Type	Description
`testID`	`string`	Test ID for the dropdown component.
`menuTestID`	`string`	Test ID for the dropdown menu.
`value`	`string`	The currently selected value.
`onSelect`	`(value: string) => void`	Callback function to handle value selection.
`options`	`Option[]`	Array of options for the dropdown.
`menuUpIcon`	`JSX.Element`	Custom icon for menu up state.
`menuDownIcon`	`JSX.Element`	Custom icon for menu down state.
`maxMenuHeight`	`number`	Maximum height of the dropdown menu.
`menuContentStyle`	`ViewStyle`	Style for the dropdown menu content.
`CustomDropdownItem`	`(props: DropdownItemProps) => JSX.Element`	Custom component for dropdown item.
`CustomDropdownInput`	`(props: DropdownInputProps) => JSX.Element`	Custom component for dropdown input.
`CustomMenuHeader`	`(props: DropdownHeaderProps) => JSX.Element`	Custom component for the dropdown menu header.
`Touchable`	`ForwardRefExoticComponent<PressableProps & RefAttributes<View>>`	Custom touchable component for the dropdown.
`placeholder`	`string`	Placeholder text for the dropdown input.
`label`	`TextInputLabelProp`	Label for the dropdown input.
`mode`	`'flat' \\| 'outlined'`	Mode for the dropdown input.
`disabled`	`boolean`	Whether the dropdown is disabled.
`error`	`boolean`	Whether the dropdown has an error.
`hideMenuHeader`	`boolean`	Hide menu header component (default: false).
`statusBarHeight`	`number`	Additional top margin for the status bar on Android.

`MultiSelectDropdownProps`

Prop	Type	Description
`testID`	`string`	Test ID for the dropdown component.
`menuTestID`	`string`	Test ID for the dropdown menu.
`value`	`string[]`	The currently selected values.
`onSelect`	`(value: string[]) => void`	Callback function to handle value selection.
`options`	`Option[]`	Array of options for the dropdown.
`menuUpIcon`	`JSX.Element`	Custom icon for menu up state.
`menuDownIcon`	`JSX.Element`	Custom icon for menu down state.
`Touchable`	`ForwardRefExoticComponent<PressableProps & RefAttributes<View>>`	Custom touchable component for the dropdown.
`maxMenuHeight`	`number`	Maximum height of the dropdown menu.
`menuContentStyle`	`ViewStyle`	Style for the dropdown menu content.
`CustomMultiSelectDropdownItem`	`(props: MultiSelectDropdownItemProps) => JSX.Element`	Custom component for multi-select dropdown item.
`CustomMultiSelectDropdownInput`	`(props: DropdownInputProps) => JSX.Element`	Custom component for multi-select dropdown input.
`CustomMenuHeader`	`(props: DropdownHeaderProps) => JSX.Element`	Custom component for the dropdown menu header.
`placeholder`	`string`	Placeholder text for the dropdown input.
`label`	`TextInputLabelProp`	Label for the dropdown input.
`mode`	`'flat' \\| 'outlined'`	Mode for the dropdown input.
`disabled`	`boolean`	Whether the dropdown is disabled.
`error`	`boolean`	Whether the dropdown has an error.
`hideMenuHeader`	`boolean`	Hide menu header component (default: false).
`statusBarHeight`	`number`	Additional top margin for the status bar on Android.