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

or

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.

Methods

Method	Return	Description
focus()	void	Open the dropdown manually.
blur()	void	Close the dropdown manually.

Latest Documentation

• https://fateh999.github.io/react-native-paper-dropdown

v1 Documentation

• https://fateh999.github.io/react-native-paper-dropdown/#/old-version

License

MIT