### Start Example App Packager

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/CONTRIBUTING.md

Starts the Metro server for the example application. Changes to JavaScript code in the library will be reflected without a rebuild.

```sh
yarn example start
```

--------------------------------

### Run Example App on Web

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/CONTRIBUTING.md

Builds and runs the example application in a web browser.

```sh
yarn example web
```

--------------------------------

### Install react-native-paper-dropdown

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/README.md

Install the library using npm. Ensure react-native-paper is also installed.

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

--------------------------------

### Install react-native-paper-dropdown

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/quick-reference.md

Install the library and its peer dependencies using npm.

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

--------------------------------

### Run Example App on Android

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator. Native code changes require a rebuild.

```sh
yarn example android
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS simulator or device. Native code changes require a rebuild.

```sh
yarn example ios
```

--------------------------------

### Project File Structure

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/MANIFEST.md

Illustrates the organization of files within the project, including the master index, manifest, quick reference, type definitions, module exports, architecture, usage examples, testing guide, and API reference.

```markdown
```
/workspace/home/output/
├── INDEX.md                          (Master index)
├── MANIFEST.md                       (This file)
├── quick-reference.md                (Fast lookup)
├── types.md                          (Type definitions)
├── module-exports.md                 (Export reference)
├── architecture.md                   (System design)
├── usage-examples.md                 (Code examples)
├── testing-guide.md                  (Testing & troubleshooting)
└── api-reference/                    (Component documentation)
    ├── dropdown.md
    ├── multi-select-dropdown.md
    ├── dropdown-input.md
    ├── dropdown-item.md
    ├── multi-select-dropdown-item.md
    ├── dropdown-header.md
    └── use-dropdown.md
```
```

--------------------------------

### Minimal Multi-Select Setup

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/usage-examples.md

Demonstrates the basic setup for a multi-select dropdown. Ensure you have react-native-paper and react-native-paper-dropdown installed. The component requires an array of options and manages the selected values using state.

```typescript
import React, { useState } from 'react';
import { View } from 'react-native';
import { MultiSelectDropdown, Option } from 'react-native-paper-dropdown';
import { Provider as PaperProvider } from 'react-native-paper';

const COLORS: Option[] = [
  { label: 'Red', value: 'red' },
  { label: 'Green', value: 'green' },
  { label: 'Blue', value: 'blue' },
  { label: 'Yellow', value: 'yellow' },
  { label: 'Orange', value: 'orange' },
];

export default function ColorPicker() {
  const [colors, setColors] = useState<string[]>([]);

  return (
    <PaperProvider>
      <View style={{ padding: 16 }}>
        <MultiSelectDropdown
          label="Colors"
          placeholder="Select colors"
          options={COLORS}
          value={colors}
          onSelect={setColors}
        />
      </View>
    </PaperProvider>
  );
}
```

--------------------------------

### Minimal Dropdown Example

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/README.md

A basic example demonstrating how to use the Dropdown component with state management and options. Requires PaperProvider for theming.

```typescript
import { Dropdown } from 'react-native-paper-dropdown';
import { Provider as PaperProvider } from 'react-native-paper';

export default function App() {
  const [value, setValue] = useState<string>();
  
  return (
    <PaperProvider>
      <Dropdown
        label="Select"
        options={[
          { label: 'A', value: 'a' },
          { label: 'B', value: 'b' },
        ]}
        value={value}
        onSelect={setValue}
      />
    </PaperProvider>
  );
}
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/CONTRIBUTING.md

Run this command in the root directory to install all project dependencies using Yarn workspaces.

```sh
yarn
```

--------------------------------

### Install react-native-paper-dropdown

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/docs/README.md

Use yarn or npm to add the package to your project.

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

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

--------------------------------

### Install react-native-paper

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/docs/README.md

Ensure react-native-paper is installed as a dependency.

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

--------------------------------

### Install react-native-paper-dropdown with npm

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/README.md

Use this command to add the library to your project using npm.

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

--------------------------------

### Example Options Array

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/types.md

An example of how to structure an array of Option objects for use in a dropdown. Each object must have a label and a value.

```typescript
const OPTIONS = [
  { label: 'Male', value: 'male' },
  { label: 'Female', value: 'female' },
];
```

--------------------------------

### Install react-native-paper-dropdown with Yarn

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/README.md

Use this command to add the library to your project using Yarn.

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

--------------------------------

### Install react-native-paper-dropdown v1

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/docs/old-version.md

Use yarn or npm to add version 1.0.7 of the library to your project.

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

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

--------------------------------

### Default DropdownInput Usage

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/dropdown-input.md

Demonstrates the default usage of DropdownInput with outlined mode, a label, placeholder, and a selected label. This example shows how to integrate it within a basic React Native Paper setup.

```typescript
import React, { useState } from 'react';
import { View } from 'react-native';
import { DropdownInput } from 'react-native-paper-dropdown';
import { TextInput, Provider as PaperProvider } from 'react-native-paper';

const OPTIONS = [
  { label: 'Option 1', value: 'opt1' },
  { label: 'Option 2', value: 'opt2' },
];

export default function App() {
  const [selectedValue, setSelectedValue] = useState<string>('opt1');

  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <DropdownInput
          label="Choose Option"
          placeholder="Select an option"
          selectedLabel="Option 1"
          rightIcon={<TextInput.Icon icon={'menu-up'} pointerEvents="none" />}
          mode="outlined"
        />
      </View>
    </PaperProvider>
  );
}
```

--------------------------------

### Basic Single-Select Dropdown Example

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/dropdown.md

Demonstrates a basic implementation of a single-select dropdown with a label, placeholder, and options.

```APIDOC
## Example: Basic Single-Select Dropdown

```typescript
import React, { useRef, 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>();
  const dropdownRef = useRef<DropdownRef>(null);

  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <Dropdown
          ref={dropdownRef}
          label="Gender"
          placeholder="Select Gender"
          options={OPTIONS}
          value={gender}
          onSelect={setGender}
        />
      </View>
    </PaperProvider>
  );
}
```
```

--------------------------------

### Basic Single-Select Dropdown Example

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/dropdown.md

Provides a complete example of a basic single-select dropdown component. Ensure PaperProvider is used to wrap the application.

```typescript
import React, { useRef, 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>();
  const dropdownRef = useRef<DropdownRef>(null);

  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <Dropdown
          ref={dropdownRef}
          label="Gender"
          placeholder="Select Gender"
          options={OPTIONS}
          value={gender}
          onSelect={setGender}
        />
      </View>
    </PaperProvider>
  );
}
```

--------------------------------

### Multi-Select Dropdown Example

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/module-exports.md

Shows how to implement a MultiSelectDropdown for selecting multiple options. This example requires importing React, useState, View, and the MultiSelectDropdown component and its types.

```typescript
import React, { useState } from 'react';
import { View } from 'react-native';
import {
  MultiSelectDropdown,
  MultiSelectDropdownProps,
  Option,
} from 'react-native-paper-dropdown';

const OPTIONS: Option[] = [
  { label: 'Red', value: 'red' },
  { label: 'Green', value: 'green' },
  { label: 'Blue', value: 'blue' },
];

export default function MyMultiSelect() {
  const [values, setValues] = useState<string[]>([]);

  return (
    <View>
      <MultiSelectDropdown
        options={OPTIONS}
        value={values}
        onSelect={setValues}
        label="Colors"
      />
    </View>
  );
}
```

--------------------------------

### Basic Single Select Dropdown Example

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/README.md

Demonstrates how to implement a single select dropdown using the Dropdown component. Ensure PaperProvider is wrapping your application.

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

  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <Dropdown
          label="Gender"
          placeholder="Select Gender"
          options={OPTIONS}
          value={gender}
          onSelect={setGender}
        />
      </View>
    </PaperProvider>
  );
}
```

--------------------------------

### Basic Single-Select Dropdown

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/usage-examples.md

Demonstrates the minimal setup for a single-select dropdown. Requires importing Dropdown, Option, and PaperProvider.

```typescript
import React, { useState } from 'react';
import { View } from 'react-native';
import { Dropdown, Option } from 'react-native-paper-dropdown';
import { Provider as PaperProvider } from 'react-native-paper';

const GENDERS: Option[] = [
  { label: 'Male', value: 'male' },
  { label: 'Female', value: 'female' },
  { label: 'Other', value: 'other' },
];

export default function GenderSelector() {
  const [gender, setGender] = useState<string>();

  return (
    <PaperProvider>
      <View style={{ padding: 16 }}>
        <Dropdown
          label="Gender"
          options={GENDERS}
          value={gender}
          onSelect={setGender}
        />
      </View>
    </PaperProvider>
  );
}
```

--------------------------------

### Basic Multi Select Dropdown Example

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/README.md

Demonstrates how to implement a multi-select dropdown using the MultiSelectDropdown component. Ensure PaperProvider is wrapping your application.

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

  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <MultiSelectDropdown
          label="Colors"
          placeholder="Select Colors"
          options={MULTI_SELECT_OPTIONS}
          value={colors}
          onSelect={setColors}
        />
      </View>
    </PaperProvider>
  );
}
```

--------------------------------

### Outlined Dropdown with Custom Icons Example

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/dropdown.md

Shows how to configure an outlined dropdown with custom icons for opening and closing the menu, and setting a maximum menu height.

```APIDOC
## Example: Outlined Dropdown with Custom Icons

```typescript
import React, { useState } from 'react';
import { View } from 'react-native';
import { Dropdown } from 'react-native-paper-dropdown';
import { TextInput, Provider as PaperProvider } from 'react-native-paper';

const OPTIONS = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];

export default function App() {
  const [fruit, setFruit] = useState<string>();

  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <Dropdown
          mode="outlined"
          label="Fruit Selection"
          placeholder="Choose a fruit"
          options={OPTIONS}
          value={fruit}
          onSelect={setFruit}
          menuUpIcon={<TextInput.Icon icon={'chevron-up'} pointerEvents="none" />}
          menuDownIcon={<TextInput.Icon icon={'chevron-down'} pointerEvents="none" />}
          maxMenuHeight={300}
        />
      </View>
    </PaperProvider>
  );
}
```
```

--------------------------------

### Basic Multi-Select Dropdown Example

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/multi-select-dropdown.md

Demonstrates a simple implementation of the MultiSelectDropdown component with a label, placeholder, and a predefined list of options. Requires PaperProvider for styling.

```typescript
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 COLORS = [
  { 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={COLORS}
          value={colors}
          onSelect={setColors}
        />
      </View>
    </PaperProvider>
  );
}
```

--------------------------------

### DropdownInput in Flat Mode

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/dropdown-input.md

Shows how to use DropdownInput with the 'flat' mode styling. This example includes setting disabled and error states.

```typescript
import React from 'react';
import { View } from 'react-native';
import { DropdownInput } from 'react-native-paper-dropdown';
import { TextInput, Provider as PaperProvider } from 'react-native-paper';

export default function App() {
  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <DropdownInput
          label="Status"
          placeholder="No status selected"
          selectedLabel="Active"
          rightIcon={<TextInput.Icon icon={'menu-down'} pointerEvents="none" />}
          mode="flat"
          disabled={false}
          error={false}
        />
      </View>
    </PaperProvider>
  );
}
```

--------------------------------

### Basic Example of react-native-paper-dropdown

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/docs/old-version.md

Demonstrates how to implement both single-select and multi-select dropdowns within a React Native Paper application. Ensure you have the necessary imports from 'react-native-paper' and 'react-native-paper-dropdown'.

```javascript
import {
  Appbar,
  DarkTheme,
  DefaultTheme,
  Provider,
  Surface,
  ThemeProvider,
} from 'react-native-paper';
import React, { useState } from 'react';
import { SafeAreaView, StatusBar, StyleSheet, View } from 'react-native';
import DropDown from 'react-native-paper-dropdown';

function App() {
  const [nightMode, setNightmode] = useState(false);
  const [showDropDown, setShowDropDown] = useState(false);
  const [gender, setGender] = useState < string > '';
  const [showMultiSelectDropDown, setShowMultiSelectDropDown] = useState(false);
  const [colors, setColors] = useState < string > '';
  const genderList = [
    {
      label: 'Male',
      value: 'male',
    },
    {
      label: 'Female',
      value: 'female',
    },
    {
      label: 'Others',
      value: 'others',
    },
  ];
  const colorList = [
    {
      label: 'White',
      value: 'white',
    },
    {
      label: 'Red',
      value: 'red',
    },
    {
      label: 'Blue',
      value: 'blue',
    },
    {
      label: 'Green',
      value: 'green',
    },
    {
      label: 'Orange',
      value: 'orange',
    },
  ];

  return (
    <Provider theme={nightMode ? DarkTheme : DefaultTheme}>
      <ThemeProvider theme={nightMode ? DarkTheme : DefaultTheme}>
        <StatusBar
          backgroundColor={
            nightMode ? DarkTheme.colors.surface : DefaultTheme.colors.primary
          }
          barStyle={'light-content'}
        />
        <Appbar.Header>
          <Appbar.Content title="React Native Paper Dropdown" />
          <Appbar.Action
            icon={nightMode ? 'brightness-7' : 'brightness-3'}
            onPress={() => setNightmode(!nightMode)}
          />
        </Appbar.Header>
        <Surface style={styles.containerStyle}>
          <SafeAreaView style={styles.safeContainerStyle}>
            <DropDown
              label={'Gender'}
              mode={'outlined'}
              visible={showDropDown}
              showDropDown={() => setShowDropDown(true)}
              onDismiss={() => setShowDropDown(false)}
              value={gender}
              setValue={setGender}
              list={genderList}
            />
            <View style={styles.spacerStyle} />
            <DropDown
              label={'Colors'}
              mode={'outlined'}
              visible={showMultiSelectDropDown}
              showDropDown={() => setShowMultiSelectDropDown(true)}
              onDismiss={() => setShowMultiSelectDropDown(false)}
              value={colors}
              setValue={setColors}
              list={colorList}
              multiSelect
            />
          </SafeAreaView>
        </Surface>
      </ThemeProvider>
    </Provider>
  );
}

const styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
  },
  spacerStyle: {
    marginBottom: 15,
  },
  safeContainerStyle: {
    flex: 1,
    margin: 20,
    justifyContent: 'center',
  },
});

export default App;

```

--------------------------------

### Example: Single-Select DropdownHeader

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/dropdown-header.md

Demonstrates how to use the DropdownHeader component for a single-select dropdown. This component is typically used internally by the Dropdown component.

```typescript
import React, { useState } from 'react';
import { View } from 'react-native';
import { DropdownHeader } from 'react-native-paper-dropdown';
import { Provider as PaperProvider } from 'react-native-paper';

export default function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(true);

  const handleToggleMenu = () => {
    setIsMenuOpen(false);
  };

  const handleResetMenu = () => {
    console.log('Selections cleared');
    setIsMenuOpen(false);
  };

  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <DropdownHeader
          label="Gender"
          value="male"
          multiSelect={false}
          toggleMenu={handleToggleMenu}
          resetMenu={handleResetMenu}
        />
      </View>
    </PaperProvider>
  );
}
```

--------------------------------

### Advanced Dropdown Example

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/docs/README.md

This snippet demonstrates a comprehensive example of using react-native-paper-dropdown with custom theming, custom dropdown items, and custom input components. It includes single-select dropdowns with default and outlined modes, as well as a multi-select dropdown.

```javascript
import React, { useMemo, useState } from 'react';
import { ScrollView, StyleSheet, View, ViewStyle } from 'react-native';
import {
  Appbar,
  Divider,
  Headline,
  PaperProvider,
  Paragraph,
  TextInput,
  ThemeProvider,
  TouchableRipple,
} from 'react-native-paper';
import {
  Dropdown,
  MultiSelectDropdown,
  DropdownInputProps,
  DropdownItemProps,
} from 'react-native-paper-dropdown';

const OPTIONS = [
  { label: 'Male', value: 'male' },
  { label: 'Female', value: 'female' },
  { label: 'Other', value: 'other' },
];

const MULTI_SELECT_OPTIONS = [
  { label: 'White', value: 'white' },
  { label: 'Red', value: 'red' },
  { label: 'Blue', value: 'blue' },
  { label: 'Green', value: 'green' },
  { label: 'Orange', value: 'orange' },
];

const CustomDropdownItem = ({
  width,
  option,
  value,
  onSelect,
  toggleMenu,
  isLast,
}: DropdownItemProps) => {
  const style: ViewStyle = useMemo(
    () => ({
      height: 50,
      width,
      backgroundColor:
        value === option.value ? MD3DarkTheme.colors.primary : MD3DarkTheme.colors.onPrimary,
      justifyContent: 'center',
      paddingHorizontal: 16,
    }),
    [option.value, value, width]
  );

  return (
    <>
      <TouchableRipple
        onPress={() => {
          onSelect?.(option.value);
          toggleMenu();
        }}
        style={style}
      >
        <Headline
          style={{
            color: value === option.value ? MD3DarkTheme.colors.onPrimary : MD3DarkTheme.colors.primary,
          }}
        >
          {option.label}
        </Headline>
      </TouchableRipple>
      {!isLast && <Divider />}
    </>
  );
};

const CustomDropdownInput = ({
  placeholder,
  selectedLabel,
  rightIcon,
}: DropdownInputProps) => (
  <TextInput
    mode="outlined"
    placeholder={placeholder}
    placeholderTextColor={MD3DarkTheme.colors.onSecondary}
    value={selectedLabel}
    style={{ backgroundColor: MD3DarkTheme.colors.primary }}
    textColor={MD3DarkTheme.colors.onPrimary}
    right={rightIcon}
  />
);

export default function App() {
  const [nightMode, setNightMode] = useState(false);
  const [gender, setGender] = useState<string>();
  const [colors, setColors] = useState<string[]>([]);
  const Theme = nightMode ? MD3DarkTheme : MD3LightTheme;

  return (
    <ThemeProvider theme={Theme}>
      <PaperProvider theme={Theme}>
        <View style={[styles.container, { backgroundColor: Theme.colors.background }]}>
          <Appbar.Header elevated>
            <Appbar.Content title="Dropdown Demo" />
            <Appbar.Action
              icon={nightMode ? 'brightness-7' : 'brightness-3'}
              onPress={() => setNightMode(!nightMode)}
            />
          </Appbar.Header>
          <ScrollView keyboardShouldPersistTaps="handled">
            <View style={styles.formWrapper}>
              <Headline>Single Select</Headline>
              <Paragraph>Default Dropdown</Paragraph>
              <Dropdown
                label="Gender"
                placeholder="Select Gender"
                options={OPTIONS}
                value={gender}
                onSelect={setGender}
              />
              <Paragraph>Default Dropdown (Outline Mode)</Paragraph>
              <Dropdown
                label="Gender"
                placeholder="Select Gender"
                options={OPTIONS}
                value={gender}
                onSelect={setGender}
                mode="outlined"
              />
              <Paragraph>Custom Dropdown</Paragraph>
              <Dropdown
                label="Gender"
                placeholder="Select Gender"
                options={OPTIONS}
                value={gender}
                onSelect={setGender}
                menuContentStyle={{ backgroundColor: MD3DarkTheme.colors.onPrimary }}
                menuUpIcon={<TextInput.Icon icon="menu-up" color={MD3DarkTheme.colors.primaryContainer} pointerEvents="none" />}
                menuDownIcon={<TextInput.Icon icon="menu-down" color={MD3DarkTheme.colors.primaryContainer} pointerEvents="none" />}
                CustomDropdownItem={CustomDropdownItem}
                CustomDropdownInput={CustomDropdownInput}
              />

```

--------------------------------

### Single-Select Dropdown Example

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/module-exports.md

Demonstrates the basic usage of the Dropdown component for single-item selection. Requires importing React, useState, useRef, View, and the Dropdown component and its types.

```typescript
import React, { useState, useRef } from 'react';
import { View } from 'react-native';
import {
  Dropdown,
  DropdownRef,
  DropdownProps,
  Option,
} from 'react-native-paper-dropdown';

const OPTIONS: Option[] = [
  { label: 'Yes', value: 'yes' },
  { label: 'No', value: 'no' },
];

export default function MyDropdown() {
  const [value, setValue] = useState<string>();
  const dropdownRef = useRef<DropdownRef>(null);

  return (
    <View>
      <Dropdown
        ref={dropdownRef}
        options={OPTIONS}
        value={value}
        onSelect={setValue}
        label="Choose"
      />
    </View>
  );
}
```

--------------------------------

### Multi-Select Dropdown Header Example

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/dropdown-header.md

Demonstrates how to use the DropdownHeader component for a multi-select dropdown. It includes labels, selected values, and callback functions for menu toggling and resetting selections. Ensure the component is wrapped in PaperProvider for proper styling.

```typescript
import React from 'react';
import { View } from 'react-native';
import { DropdownHeader } from 'react-native-paper-dropdown';
import { Provider as PaperProvider } from 'react-native-paper';

export default function App() {
  const handleToggleMenu = () => {
    console.log('Menu closed');
  };

  const handleResetMenu = () => {
    console.log('All colors deselected');
  };

  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <DropdownHeader
          label="Colors"
          value={['red', 'blue', 'green']}
          multiSelect={true}
          toggleMenu={handleToggleMenu}
          resetMenu={handleResetMenu}
        />
      </View>
    </PaperProvider>
  );
}
```

--------------------------------

### Outlined Dropdown with Custom Icons Example

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/dropdown.md

Shows how to create an outlined dropdown with custom icons for menu expansion and collapse. The maxMenuHeight prop can be used to limit the dropdown's height.

```typescript
import React, { useState } from 'react';
import { View } from 'react-native';
import { Dropdown } from 'react-native-paper-dropdown';
import { TextInput, Provider as PaperProvider } from 'react-native-paper';

const OPTIONS = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];

export default function App() {
  const [fruit, setFruit] = useState<string>();

  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <Dropdown
          mode="outlined"
          label="Fruit Selection"
          placeholder="Choose a fruit"
          options={OPTIONS}
          value={fruit}
          onSelect={setFruit}
          menuUpIcon={<TextInput.Icon icon={'chevron-up'} pointerEvents="none" />}
          menuDownIcon={<TextInput.Icon icon={'chevron-down'} pointerEvents="none" />}
          maxMenuHeight={300}
        />
      </View>
    </PaperProvider>
  );
}
```

--------------------------------

### Example: Multi-Select DropdownHeader with No Selection

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/dropdown-header.md

Shows a multi-select DropdownHeader where no options have been selected. The value is an empty array, and multiSelect is set to true.

```typescript
import React from 'react';
import { View } from 'react-native';
import { DropdownHeader } from 'react-native-paper-dropdown';
import { Provider as PaperProvider } from 'react-native-paper';

export default function App() {
  const handleToggleMenu = () => {
    console.log('Menu closed');
  };

  const handleResetMenu = () => {
    console.log('Selections cleared');
  };

  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <DropdownHeader
          label="Colors"
          value={[]}
          multiSelect={true}
          toggleMenu={handleToggleMenu}
          resetMenu={handleResetMenu}
        />
      </View>
    </PaperProvider>
  );
}
```

--------------------------------

### Measuring Dropdown Dimensions with useDropdown

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/use-dropdown.md

This example demonstrates how to use the useDropdown hook to track and display the layout dimensions (x, y, width, height) of a dropdown anchor element. It utilizes the `onLayout` and `toggleMenu` functions provided by the hook.

```typescript
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import useDropdown from 'react-native-paper-dropdown';

export default function DropdownWithMetrics() {
  const {
    enable,
    toggleMenu,
    onLayout,
    dropdownLayout,
  } = useDropdown();

  return (
    <View>
      <TouchableOpacity onLayout={onLayout} onPress={toggleMenu}>
        <Text>Tap to toggle menu</Text>
      </TouchableOpacity>
      
      <View style={{ marginTop: 16 }}>
        <Text>Layout Measurements:</Text>
        <Text>X Position: {dropdownLayout.x}px</Text>
        <Text>Y Position: {dropdownLayout.y}px</Text>
        <Text>Width: {dropdownLayout.width}px</Text>
        <Text>Height: {dropdownLayout.height}px</Text>
      </View>
    </View>
  );
}
```

--------------------------------

### Check Theme Integration with useTheme

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/testing-guide.md

This snippet demonstrates how to access and log the primary color from the React Native Paper theme. Ensure `react-native-paper` is installed and `useTheme` is imported.

```typescript
import { useTheme } from 'react-native-paper';

const theme = useTheme();
console.log('Primary color:', theme.colors.primary);
```

--------------------------------

### Controlled Dropdown Component Example

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/architecture.md

Demonstrates how a parent component controls the Dropdown's value and updates it via the onSelect callback. Ensure the parent component manages the state and passes it down as props.

```typescript
// Parent owns the state
const [gender, setGender] = useState<string>();

// Component is controlled
<Dropdown
  value={gender}
  onSelect={setGender}
  options={OPTIONS}
/>
```

--------------------------------

### Multi-Select with Selected Count Display

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/usage-examples.md

Shows how to display the number of selected items in a multi-select dropdown. This example builds upon the basic setup by adding a Text component to show the count of selected interests.

```typescript
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { MultiSelectDropdown, Option } from 'react-native-paper-dropdown';
import { Provider as PaperProvider } from 'react-native-paper';

const INTERESTS: Option[] = [
  { label: 'Sports', value: 'sports' },
  { label: 'Music', value: 'music' },
  { label: 'Reading', value: 'reading' },
  { label: 'Travel', value: 'travel' },
  { label: 'Gaming', value: 'gaming' },
];

export default function InterestSelector() {
  const [interests, setInterests] = useState<string[]>([]);

  return (
    <PaperProvider>
      <View style={{ padding: 16 }}>
        <MultiSelectDropdown
          label="Interests"
          placeholder="Select your interests"
          options={INTERESTS}
          value={interests}
          onSelect={setInterests}
        />
        <Text style={{ marginTop: 16 }}>
          {interests.length} interests selected
        </Text>
      </View>
    </PaperProvider>
  );
}
```

--------------------------------

### Programmatically Open Dropdown Menu

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/dropdown.md

Demonstrates how to use the focus() method from DropdownRef to programmatically open the dropdown menu.

```typescript
const dropdownRef = useRef<DropdownRef>(null);
dropdownRef.current?.focus();
```

--------------------------------

### Publish New Versions

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/CONTRIBUTING.md

Uses release-it to manage version bumping, tagging, and publishing new versions to npm.

```sh
yarn release
```

--------------------------------

### Customize Dropdown Icons

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/quick-reference.md

Replace the default menu up and down icons with custom components using `menuUpIcon` and `menuDownIcon` props. This example uses `TextInput.Icon` for custom icons.

```typescript
import { TextInput } from 'react-native-paper';

<Dropdown
  menuUpIcon={<TextInput.Icon icon="chevron-up" />}
  menuDownIcon={<TextInput.Icon icon="chevron-down" />}
  {...props}
/>
```

--------------------------------

### Dropdown Validation Example

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/quick-reference.md

Use state to track the selected value and touch status for validation. The `error` prop should be true when the field has been touched and no value is selected.

```typescript
const [value, setValue] = useState<string>();
const [touched, setTouched] = useState(false);

<Dropdown
  value={value}
  onSelect={(v) => { setValue(v); setTouched(true); }}
  error={touched && !value}
/>
```

--------------------------------

### Custom Component Injection via Props

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/architecture.md

Demonstrates how to inject custom components for input, item rendering, menu header, and touchables to achieve full UI customization. This allows for flexible theming and component replacement.

```typescript
<Dropdown
  CustomDropdownInput={MyCustomInput}
  CustomDropdownItem={MyCustomItem}
  CustomMenuHeader={MyCustomHeader}
  Touchable={MyCustomTouchable}
/>
```

--------------------------------

### Run Unit Tests

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/CONTRIBUTING.md

Executes the unit tests for the project using Jest.

```sh
yarn test
```

--------------------------------

### Menu Item Test ID Generation

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/architecture.md

Menu item test IDs are automatically generated based on the menuTestID and the option's value. This example shows the pattern.

```typescript
menuItemTestID = `${menuTestID}-${option.value}`;
// Example: "gender-dropdown-menu-male"
```

--------------------------------

### MultiSelectDropdownItem Usage

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/multi-select-dropdown-item.md

Demonstrates how to import and use the MultiSelectDropdownItem component. It takes an option object, current selection, and callbacks to manage the state.

```APIDOC
## MultiSelectDropdownItem

### Description

Renders a single selectable option within a multi-select dropdown menu. It wraps React Native Paper's Menu.Item and Checkbox with theme-aware styling and selection handling.

### Component Signature

```typescript
function MultiSelectDropdownItem(props: MultiSelectDropdownItemProps): JSX.Element
```

### Props

#### Required Props

- **option** (Option) - The option object containing `label` and `value` properties.
- **width** (DimensionValue) - Width constraint for the menu item. Typically matches the dropdown menu width.
- **isLast** (boolean) - Whether this is the last item in the list. Used to conditionally hide the divider.

#### Optional Props

- **value** (string[]) - Array of currently selected values. Used to determine checkbox state and highlight. Defaults to `[]`.
- **onSelect** ( (value: string[]) => void ) - Callback fired when this option is tapped. Receives the updated array of selected values.
- **menuItemTestID** (string) - Test ID for the menu item element.

### Return Type

Returns `JSX.Element` rendering a menu item with checkbox and optional divider.

### Behavior

- Renders a flexbox row container holding the menu item and checkbox.
- Displays the option label with Material Design ripple effect on press.
- Shows a Material Design checkbox (Android-style) indicating the selection state.
- Styles the title text color to the theme's primary color when selected, otherwise uses the onBackground color.
- Renders a divider line below the item unless it's the last item.
- Toggles selection by adding or removing the option's value from the `value` array and calls `onSelect()` with the updated array.
```

--------------------------------

### Custom Input Renderer for Dropdown

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/usage-examples.md

Replace the default input field of a dropdown with a custom component using the `CustomDropdownInput` prop. This example demonstrates a custom input with a border and specific padding.

```typescript
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import {
  Dropdown,
  Option,
  DropdownInputProps,
} from 'react-native-paper-dropdown';
import { Provider as PaperProvider } from 'react-native-paper';

function CustomInput(props: DropdownInputProps) {
  return (
    <View style={{ borderWidth: 2, borderColor: '#1976d2', borderRadius: 8 }}>
      <Text style={{ padding: 12, fontSize: 16 }}>
        {props.selectedLabel || props.placeholder || 'Select an option'}
      </Text>
    </View>
  );
}

const OPTIONS: Option[] = [
  { label: 'Option 1', value: 'opt1' },
  { label: 'Option 2', value: 'opt2' },
];

export default function CustomInputDropdown() {
  const [value, setValue] = useState<string>();

  return (
    <PaperProvider>
      <View style={{ padding: 16 }}>
        <Dropdown
          label="Custom Input"
          options={OPTIONS}
          value={value}
          onSelect={setValue}
          CustomDropdownInput={CustomInput}
        />
      </View>
    </PaperProvider>
  );
}

```

--------------------------------

### Basic Usage of useDropdown Hook

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/use-dropdown.md

Demonstrates the fundamental usage of the useDropdown hook to create a simple toggleable menu. It shows how to integrate the hook's state and handlers into basic React Native components.

```typescript
import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import useDropdown from 'react-native-paper-dropdown';

export default function CustomDropdown() {
  const {
    enable,
    toggleMenu,
    onLayout,
    menuStyle,
    scrollViewStyle,
  } = useDropdown(300); // Max height of 300px

  return (
    <View>
      <TouchableOpacity onLayout={onLayout} onPress={toggleMenu}>
        <Text>{enable ? 'Menu Open' : 'Menu Closed'}</Text>
      </TouchableOpacity>
      
      {enable && (
        <View style={menuStyle}>
          <View style={scrollViewStyle}>
            <Text>Menu Item 1</Text>
            <Text>Menu Item 2</Text>
            <Text>Menu Item 3</Text>
          </View>
        </View>
      )}
    </View>
  );
}
```

--------------------------------

### Custom Item Renderer for Multi-Select Dropdown

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/usage-examples.md

Customize the rendering of items in a multi-select dropdown using the `CustomMultiSelectDropdownItem` prop. This example shows how to add a checkmark to selected items and apply distinct styling.

```typescript
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import {
  MultiSelectDropdown,
  Option,
  MultiSelectDropdownItemProps,
} from 'react-native-paper-dropdown';
import { Provider as PaperProvider } from 'react-native-paper';

function CustomMultiSelectItem(props: MultiSelectDropdownItemProps) {
  const isSelected = (props.value || []).includes(props.option.value);
  
  return (
    <View
      style={{
        padding: 12,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: isSelected ? '#f3e5f5' : '#ffffff',
      }}
    >
      <Text
        style={{
          fontSize: 16,
          color: isSelected ? '#7b1fa2' : '#000000',
          flex: 1,
        }}
      >
        {props.option.label}
      </Text>
      <Text style={{ fontSize: 20 }}>
        {isSelected ? '✓' : ''}
      </Text>
    </View>
  );
}

const OPTIONS: Option[] = [
  { label: 'Red', value: 'red' },
  { label: 'Green', value: 'green' },
];

export default function CustomMultiSelectDropdown() {
  const [values, setValues] = useState<string[]>([]);

  return (
    <PaperProvider>
      <View style={{ padding: 16 }}>
        <MultiSelectDropdown
          label="Colors"
          options={OPTIONS}
          value={values}
          onSelect={setValues}
          CustomMultiSelectDropdownItem={CustomMultiSelectItem}
        />
      </View>
    </PaperProvider>
  );
}

```

--------------------------------

### MultiSelectDropdown Usage

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/docs/README.md

Demonstrates the default and outlined modes for the MultiSelectDropdown component. Ensure you have PaperProvider and ThemeProvider set up.

```jsx
            <MultiSelectDropdown
              label="Colors"
              placeholder="Select Colors"
              options={MULTI_SELECT_OPTIONS}
              value={colors}
              onSelect={setColors}
            />
            <MultiSelectDropdown
              label="Colors"
              placeholder="Select Colors"
              options={MULTI_SELECT_OPTIONS}
              value={colors}
              onSelect={setColors}
              mode="outlined"
            />
```

--------------------------------

### Verify Dropdown Options Structure

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/testing-guide.md

Use this code to verify that your `OPTIONS` array has the correct structure, ensuring each option has a `value` and `label`. It logs any invalid options found.

```typescript
console.log('Options:', OPTIONS);
OPTIONS.forEach((opt) => {
  if (!opt.value || !opt.label) {
    console.warn('Invalid option:', opt);
  }
});
```

--------------------------------

### Memoized Styles for Performance

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/architecture.md

Shows how `useMemo` is used to memoize styles based on props like `width` and theme values. This prevents unnecessary re-renders by ensuring styles are only recalculated when dependencies change.

```typescript
// DropdownItem memoizes styles
const style = useMemo(() => ({ minWidth: width }), [width]);
const titleStyle = useMemo(() => ({
  color: value === option.value ? theme.colors.primary : theme.colors.onBackground,
  width: width,
}), [value, option.value, theme, width]);
```

--------------------------------

### useDropdown Hook Usage

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/use-dropdown.md

This snippet shows how to use the useDropdown hook to get layout and state management functions for dropdown components. The onLayout callback should be attached to the anchor element, and menuStyle applied to the Menu component.

```typescript
const {
  enable,
  setEnable,
  toggleMenu,
  onLayout,
  menuStyle,
  scrollViewStyle,
  dropdownLayout,
} = useDropdown(maxMenuHeight);
```

--------------------------------

### Control Dropdown Programmatically

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/usage-examples.md

Demonstrates how to open and close the dropdown using a ref. This is useful for imperative control flows.

```typescript
import React, { useRef, useState } from 'react';
import { View, Button } from 'react-native';
import { Dropdown, DropdownRef, Option } from 'react-native-paper-dropdown';
import { Provider as PaperProvider } from 'react-native-paper';

const OPTIONS: Option[] = [
  { label: 'Option 1', value: 'opt1' },
  { label: 'Option 2', value: 'opt2' },
];

export default function ControlledDropdown() {
  const dropdownRef = useRef<DropdownRef>(null);
  const [value, setValue] = useState<string>();

  return (
    <PaperProvider>
      <View style={{ padding: 16, gap: 16 }}>
        <Dropdown
          ref={dropdownRef}
          label="Options"
          options={OPTIONS}
          value={value}
          onSelect={setValue}
        />
        
        <Button
          title="Open Dropdown"
          onPress={() => dropdownRef.current?.focus()}
        />
        
        <Button
          title="Close Dropdown"
          onPress={() => dropdownRef.current?.blur()}
        />
      </View>
    </PaperProvider>
  );
}
```

--------------------------------

### Type Check Project Files

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/CONTRIBUTING.md

Verifies that all project files adhere to TypeScript type definitions.

```sh
yarn typecheck
```

--------------------------------

### Custom Menu Height with useDropdown Hook

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/use-dropdown.md

Illustrates how to dynamically set the maximum menu height based on the window dimensions using the useDropdown hook. This ensures the menu fits within the screen, especially on smaller devices.

```typescript
import React, { useMemo } from 'react';
import { View, Text, useWindowDimensions } from 'react-native';
import useDropdown from 'react-native-paper-dropdown';

export default function ResponsiveDropdown() {
  const { height } = useWindowDimensions();
  const customMaxHeight = useMemo(() => height * 0.4, [height]); // 40% of window

  const {
    enable,
    toggleMenu,
    onLayout,
    menuStyle,
    scrollViewStyle,
    dropdownLayout,
  } = useDropdown(customMaxHeight);

  return (
    <View>
      <Text>Dropdown Layout: {dropdownLayout.width}px wide</Text>
      <Text>Menu Max Height: {customMaxHeight}px</Text>
      {/* Dropdown content */}
    </View>
  );
}
```

--------------------------------

### Package Exports Map Configuration

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/module-exports.md

Defines the export paths for the package in package.json, specifying entry points for types, ES Modules, and CommonJS. All symbols are exported through the main entry point '.' only.

```json
{
  "exports": {
    ".": {
      "types": "./lib/typescript/src/index.d.ts",
      "import": "./lib/module/index.js",
      "require": "./lib/commonjs/index.js"
    }
  }
}
```

--------------------------------

### Imperative Methods: focus()

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/multi-select-dropdown.md

The focus() method allows you to programmatically open the dropdown menu. It is accessed via a ref attached to the MultiSelectDropdown component.

```APIDOC
## focus()

### Description
Opens the dropdown menu programmatically.

### Method Signature
`focus: () => void`

### Usage Example
```typescript
const dropdownRef = useRef<DropdownRef>(null);
dropdownRef.current?.focus();
```
```

--------------------------------

### File Organization Structure

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/INDEX.md

This snippet illustrates the directory structure of the react-native-paper-dropdown project, showing the purpose of each markdown file and the API reference directory.

```markdown
Output Documentation Structure:
├── INDEX.md                              # This file
├── quick-reference.md                    # Fast lookup
├── types.md                              # Type definitions
├── module-exports.md                     # Export overview
├── architecture.md                       # System design
├── usage-examples.md                     # Code examples
├── testing-guide.md                      # Testing & troubleshooting
└── api-reference/                        # Component documentation
    ├── dropdown.md
    ├── multi-select-dropdown.md
    ├── dropdown-input.md
    ├── dropdown-item.md
    ├── multi-select-dropdown-item.md
    ├── dropdown-header.md
    └── use-dropdown.md
```

--------------------------------

### Initial Layout State for Dropdown

Source: https://github.com/fateh999/react-native-paper-dropdown/blob/main/_autodocs/api-reference/use-dropdown.md

Shows the default initial state for the layout rectangle of a dropdown element before any layout information is available.

```typescript
{
  x: 0,
  y: 0,
  height: 0,
  width: 0,
}
```