react-native-paper-dropdown


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

Dependencies

``bash
react-native-paper
`

Installation

`bash
yarn add react-native-paper-dropdown
`

or

`bash
npm i react-native-paper-dropdown
`

Demo

Basic Example

$3

`javascript
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();

return (


label="Gender"
placeholder="Select Gender"
options={OPTIONS}
value={gender}
onSelect={setGender}
/>


);
}
`

$3

`javascript
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([]);

return (


label="Colors"
placeholder="Select Colors"
options={MULTI_SELECT_OPTIONS}
value={colors}
onSelect={setColors}
/>


);
}
`

Props

$3

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

$3

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