DOCSEARCHbyAlgolia
Submit Docs

react-native-paper-dropdown

repository·main·Indexed 41 days ago

https://github.com/fateh999/react-native-paper-dropdown

A Material Design Dropdown component for React Native built on top of React Native Paper. Version 2.3.1 supports both single-select via the Dropdown component and multi-select via the MultiSelectDropdown component, utilizing React Native Paper's TextInput and Menu.

Tokens
7.9K
Snippets
15
Records
17
Agent score
98%

What's inside react-native-paper-dropdown

  3. Use the MultiSelectDropdown component for multiple selection

    main

    The MultiSelectDropdown component allows users to select multiple values from a list. The value prop expects an array of strings (string[]), and onSelect returns the updated array of selected values.

    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>
  );
}

  4. Use the DropDown component in v1

    main

    The DropDown component is used to create Material Design dropdowns. It requires a list of items, a visible state, and functions to handle visibility (showDropDown and onDismiss) and value updates (setValue). You can enable multi-select mode by passing the multiSelect prop.

    import DropDown from 'react-native-paper-dropdown';

// ... inside your component
const [gender, setGender] = useState('');
const [showDropDown, setShowDropDown] = useState(false);

const genderList = [
  { label: 'Male', value: 'male' },
  { label: 'Female', value: 'female' },
  { label: 'Others', value: 'others' },
];

<DropDown
  label={'Gender'}
  mode={'outlined'}
  visible={showDropDown}
  showDropDown={() => setShowDropDown(true)}
  onDismiss={() => setShowDropDown(false)}
  value={gender}
  setValue={setGender}
  list={genderList}
/>

  5. Use the Dropdown component for single selection

    main

    The Dropdown component allows users to select a single value from a list of options. It requires a PaperProvider from react-native-paper to function correctly. Use the value prop to control the selection and onSelect to handle changes.

    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>
  );
}

  6. Dropdown component methods

    main

    The following methods can be called on the dropdown component instance to control its state manually.

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

  7. Reference DropdownProps

    main

    Configuration options for the single-select Dropdown component.

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

  8. Reference MultiSelectDropdownProps

    main

    Configuration options for the MultiSelectDropdown component.

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

  9. Reference the DropDown props in v1

    main

    The following props are available for the DropDown component in version 1. Note that list items expect a specific shape containing label and value.

    {
    visible: boolean;
    multiSelect?: boolean;
    onDismiss: () => void;
    showDropDown: () => void;
    value: any;
    setValue: (_value: any) => void;
    label?: string | undefined;
    placeholder?: string | undefined;
    mode?: "outlined" | "flat" | undefined;
    inputProps?: TextInputPropsWithoutTheme;
    list: Array<{ 
        label: string; 
        value: string | number; 
        custom?: ReactNode; 
    }>;
    dropDownContainerMaxHeight?: number;
    dropDownContainerHeight?: number;
    activeColor?: string;
    theme?: Theme;
    dropDownStyle?: ViewStyle;
    dropDownItemSelectedTextStyle?: TextStyle;
    dropDownItemSelectedStyle?: ViewStyle;
    dropDownItemStyle?: ViewStyle;
    dropDownItemTextStyle?: TextStyle;
}

  10. Use the Dropdown component

    main

    The Dropdown component provides a single-selection dropdown interface compatible with react-native-paper. It is composed of DropdownInput and DropdownItem components. You can control it using DropdownProps and interact with it via a DropdownRef.

    import { Dropdown } from 'react-native-paper-dropdown';

// Usage depends on the implementation of Dropdown component
// which typically requires an array of Options and state management.

  11. Use the MultiSelectDropdown component

    main

    The MultiSelectDropdown component allows users to select multiple options from a list. It uses MultiSelectDropdownItem for individual items and is configured via MultiSelectDropdownProps.

    import { MultiSelectDropdown } from 'react-native-paper-dropdown';

// Usage depends on the implementation of MultiSelectDropdown component
// which typically requires an array of Options and state management for multiple selections.

  12. Reference the Dropdown and MultiSelect types

    main

    The following types are exported for use in your application to ensure type safety when configuring dropdowns or handling selection events:

    • Option: The base interface for items within a dropdown.
    • DropdownProps: Configuration properties for the single-select Dropdown.
    • DropdownInputProps: Configuration properties for the DropdownInput component.
    • DropdownItemProps: Configuration properties for the DropdownItem component.
    • MultiSelectDropdownProps: Configuration properties for the MultiSelectDropdown.
    • MultiSelectDropdownItemProps: Configuration properties for the MultiSelectDropdownItem component.
    • DropdownRef: The ref type used to access Dropdown methods.