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