react-native-paper-dropdown
v2.3.1
Published
Dropdown component using React Native Paper TextInput and Menu, now also with multiselect
Downloads
26,596
Maintainers
Readme
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
v1 Documentation
License
MIT