### Install and Run Example Project

Source: https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/README.md

Commands to set up and run the example project for the autocomplete dropdown. This includes installing dependencies and starting the application on iOS or Android.

```bash
cd example
yarn install
yarn pods

yarn ios
yarn android
```

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

### Install react-native-svg

Source: https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/README.md

Ensure react-native-svg is installed by following its installation guide and running the yarn add command.

```bash
yarn add react-native-svg
```

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

### Install react-native-autocomplete-dropdown

Source: https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/README.md

Install the library using Yarn or npm. For version 3.x, specify the version.

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

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

```bash
yarn add react-native-autocomplete-dropdown@3.1.5
```

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

### iOS Pod Install

Source: https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/README.md

Run npx pod-install to install the react-native-svg dependency for iOS if it's not already installed.

```bash
npx pod-install
```

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

### Install react-native-autocomplete-dropdown

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

Install the package and its peer dependency react-native-svg using yarn. For iOS, ensure CocoaPods are installed.

```bash
yarn add react-native-autocomplete-dropdown react-native-svg
# iOS — install CocoaPods
npx pod-install
```

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

### Local Dataset Example

Source: https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/README.md

Example of using AutocompleteDropdown with a local dataset. Configure properties like clearOnFocus, closeOnBlur, closeOnSubmit, initialValue, and onSelectItem.

```javascript
const [selectedItem, setSelectedItem] = useState(null);

<AutocompleteDropdown
  clearOnFocus={false}
  closeOnBlur={true}
  closeOnSubmit={false}
  initialValue={{ id: '2' }} // or just '2'
  onSelectItem={setSelectedItem}
  dataSet={[
    { id: '1', title: 'Alpha' },
    { id: '2', title: 'Beta' },
    { id: '3', title: 'Gamma' },
  ]}
/>;
```

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

### Setup AutocompleteDropdownContextProvider

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

Wrap your application's root or a Modal with AutocompleteDropdownContextProvider. This context wrapper is required for positioning the floating suggestion list and accepts an optional headerOffset to adjust for fixed navigation headers.

```tsx
import React from 'react'
import { SafeAreaView, KeyboardAvoidingView, Platform, ScrollView } from 'react-native'
import { AutocompleteDropdownContextProvider } from 'react-native-autocomplete-dropdown'
import { useHeaderHeight } from '@react-navigation/elements'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const headerHeight = useHeaderHeight()

  return (
    // headerOffset shifts the dropdown list below the navigation bar
    <AutocompleteDropdownContextProvider headerOffset={headerHeight}>
      <SafeAreaView style={{ flex: 1 }}>
        <KeyboardAvoidingView
          style={{ flex: 1 }}
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
          <ScrollView
            keyboardDismissMode="on-drag"
            keyboardShouldPersistTaps="handled">
            {children}
          </ScrollView>
        </KeyboardAvoidingView>
      </SafeAreaView>
    </AutocompleteDropdownContextProvider>
  )
}
```

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

### Configuring Autocomplete Dropdown with IAutocompleteDropdownProps

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

Customize the dropdown's data, behavior, search, appearance, and event handling using the extensive props interface. This example shows a representative configuration covering various categories.

```typescript
import type { IAutocompleteDropdownProps } from 'react-native-autocomplete-dropdown'

// Representative configuration covering all categories of props:
const config: Partial<IAutocompleteDropdownProps> = {
  // Data
  dataSet: [{ id: '1', title: 'Example' }],
  initialValue: { id: '1' },         // or just the string '1'

  // Behavior
  clearOnFocus: true,                // clear typed text when input is focused
  closeOnBlur: false,                // keep list open after blur
  closeOnSubmit: false,              // keep list open on keyboard submit
  editable: true,                    // false → tap-to-open (select mode)
  useFilter: true,                   // false → disable built-in client filtering
  debounce: 300,                     // ms to debounce onChangeText

  // Search
  caseSensitive: false,
  ignoreAccents: true,               // é === e
  trimSearchText: true,
  matchFrom: 'any',                  // 'start' to match prefix only

  // Appearance
  inputHeight: 40,
  suggestionsListMaxHeight: 200,
  direction: 'down',                 // 'up' | 'down' | auto-calculated
  theme: 'light',                    // 'light' | 'dark' | OS default
  showChevron: true,
  showClear: true,
  enableLoadingIndicator: true,

  // Loading
  loading: false,

  // Events
  onChangeText: (text) => console.log('typed:', text),
  onSelectItem: (item) => console.log('selected:', item),
  onClear: () => console.log('cleared'),
  onChevronPress: () => console.log('chevron pressed'),
  onOpenSuggestionsList: (isOpen) => console.log('list open:', isOpen),
  onBlur: (e) => console.log('blur'),
  onFocus: (e) => console.log('focus'),
  onSubmit: (e) => console.log('submit:', e.nativeEvent.text),

  // Custom render
  renderItem: (item, searchText) => null,
  EmptyResultComponent: null,
  emptyResultText: 'Nothing found',
  InputComponent: undefined,          // replace TextInput with custom component
  ItemSeparatorComponent: undefined,

  // Styles
  containerStyle: {},
  inputContainerStyle: {},
  rightButtonsContainerStyle: {},
  suggestionsListContainerStyle: {},
  suggestionsListTextStyle: {},
  textInputProps: { placeholder: 'Search…' },
  flatListProps: {},

  // Custom icons
  ChevronIconComponent: undefined,
  ClearIconComponent: undefined,
  RightIconComponent: undefined,
  LeftComponent: undefined,
  onRightIconComponentPress: () => {},
}
```

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

### Context Provider with Header Offset

Source: https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/README.md

If you have a header component, pass an offset to the AutocompleteDropdownContextProvider, for example, using useHeaderHeight from react navigation.

```javascript
//...import { useHeaderHeight } from '@react-navigation/elements';
//...
const headerHeight = useHeaderHeight();
//...

<AutocompleteDropdownContextProvider headerOffset={headerHeight} >
    <AppRootOrWhatever/>
</AutocompleteDropdownContextProvider>
```

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

### Import AutocompleteDropdown

Source: https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/README.md

Import the AutocompleteDropdown component from the package.

```javascript
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
```

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

### Wrap Root Component with Context Provider

Source: https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/README.md

Wrap your root component with AutocompleteDropdownContextProvider. The dropdown's position is relative to this provider.

```javascript
import { AutocompleteDropdownContextProvider } from 'react-native-autocomplete-dropdown';

<AutocompleteDropdownContextProvider>
    <AppRootOrWhatever/>
</AutocompleteDropdownContextProvider>
```

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

### Apply Dark Theme to AutocompleteDropdown

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

Use the `theme` prop set to 'dark' to apply the built-in dark theme. Custom colors can be applied via style props.

```tsx
import React, { memo, useState } from 'react'
import {
  AutocompleteDropdown,
  AutocompleteDropdownItem,
} from 'react-native-autocomplete-dropdown'

// Built-in dark theme token values:
// inputBackgroundColor: '#1c1c1e'
// inputTextColor: '#fff'
// suggestionsListBackgroundColor: '#151516'
// itemSeparatorColor: '#3e3e41'

export const DarkDropdown = memo(() => {
  const [selected, setSelected] = useState<AutocompleteDropdownItem | null>(null)

  return (
    <AutocompleteDropdown
      theme="dark"
      dataSet={[
        { id: '1', title: 'Option A' },
        { id: '2', title: 'Option B' },
        { id: '3', title: 'Option C' },
      ]}
      clearOnFocus={false}
      onSelectItem={setSelected}
      textInputProps={{
        placeholder: 'Search…',
        placeholderTextColor: '#767680',
      }}
      // Further customize over the dark theme base
      inputContainerStyle={{ borderRadius: 12 }}
      suggestionsListContainerStyle={{ borderRadius: 12 }}
      suggestionsListTextStyle={{ color: '#dbdddf', fontSize: 15 }}
    />
  )
})
```

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

### Custom Icons and Action Buttons

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

Replace default icons using `RightIconComponent` and `ClearIconComponent`. Use `RightIconComponent` with `onRightIconComponentPress` to implement custom actions, such as toggling the dropdown.

```tsx
import React, { memo, useRef, useState } from 'react'
import { Text } from 'react-native'
import { Smile, Search } from 'react-native-feather'
import {
  AutocompleteDropdown,
  AutocompleteDropdownItem,
  IAutocompleteDropdownRef,
} from 'react-native-autocomplete-dropdown'

export const CustomIconExample = memo(() => {
  const controllerRef = useRef<IAutocompleteDropdownRef | null>(null)
  const [selected, setSelected] = useState<AutocompleteDropdownItem | null>(null)

  return (
    <AutocompleteDropdown
      dataSet={[
        { id: '1', title: 'One' },
        { id: '2', title: 'Two' },
        { id: '3', title: 'Three' },
      ]}
      controller={ref => { controllerRef.current = ref }}
      onSelectItem={setSelected}
      clearOnFocus={false}
      showChevron={false}                           // hide default chevron
      RightIconComponent={<Smile color="#f55" />}  // custom icon button
      onRightIconComponentPress={() => controllerRef.current?.toggle()}
      ClearIconComponent={<Search width={16} stroke="#aeb4c6" />} // custom clear icon
    />
  )
})
```

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

### Customization Props

Source: https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/README.md

Props that allow customization of the component's appearance and behavior.

```APIDOC
## Customization Props

### `renderItem`

**Description**: A function that returns JSX for rendering each item in the suggestions list. If it returns `null`, the item will not be displayed.
**Signature**: `(item, searchText) => JSX | null`

### `controller`

**Description**: Provides a reference to the module controller, offering methods to manage the dropdown's state.
**Methods**: `close`, `open`, `toggle`, `clear`, `setInputText`, `setItem`

### `containerStyle`

**Description**: Style object for the main container view.
**Type**: `ViewStyle`

### `rightButtonsContainerStyle`

**Description**: Style object for the container of right-side buttons.
**Type**: `ViewStyle`

### `suggestionsListContainerStyle`

**Description**: Style object for the container of the suggestions list.
**Type**: `ViewStyle`

### `suggestionsListTextStyle`

**Description**: Style object for the text of items within the suggestions list.
**Type**: `TextStyle`

### `ChevronIconComponent`

**Description**: Custom React component to render the chevron icon.
**Type**: `React.Component`

### `ClearIconComponent`

**Description**: Custom React component to render the clear icon.
**Type**: `React.Component`

### `EmptyResultComponent`

**Description**: Custom React component to replace the default component displayed when no results are found.
**Type**: `React.Component`

### `InputComponent`

**Description**: Custom React component to use as the input element.
**Type**: `React.ComponentType`

### `emptyResultText`

**Description**: Custom text to display when no results are found, replacing the default 'Nothing found'.
**Type**: `string`
**Default**: "Nothing found"

### `textInputProps`

**Description**: Props to be passed directly to the underlying text input element.
**Type**: `TextInputProps`

### `flatListProps`

**Description**: Props to be passed directly to the underlying `FlatList` component used for displaying suggestions.
**Type**: `FlatListProps`
```

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

### Remote Data Fetching with AutocompleteDropdown

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

Use this snippet for server-side search. Set `useFilter={false}` to disable client-side filtering, pass `loading` state for a spinner, and `debounce` to throttle API calls. Set `dataSet` to `null` to clear suggestions.

```tsx
import React, { memo, useCallback, useState } from 'react'
import { Text } from 'react-native'
import {
  AutocompleteDropdown,
  AutocompleteDropdownItem,
} from 'react-native-autocomplete-dropdown'

export const PostSearch = memo(() => {
  const [loading, setLoading] = useState(false)
  const [suggestions, setSuggestions] = useState<AutocompleteDropdownItem[] | null>(null)
  const [selectedItem, setSelectedItem] = useState<AutocompleteDropdownItem | null>(null)

  const fetchSuggestions = useCallback(async (query: string) => {
    if (query.length < 3) {
      setSuggestions(null)
      return
    }
    setLoading(true)
    try {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts')
      const data: Array<{ id: number; title: string }> = await res.json()
      const filtered = data
        .filter(p => p.title.toLowerCase().includes(query.toLowerCase()))
        .map(p => ({ id: String(p.id), title: p.title }))
      setSuggestions(filtered)
    } catch (err) {
      console.error('Fetch failed:', err)
      setSuggestions(null)
    } finally {
      setLoading(false)
    }
  }, [])

  return (
    <>
      <AutocompleteDropdown
        dataSet={suggestions}
        loading={loading}
        useFilter={false}        // remote API handles filtering
        debounce={500}           // wait 500 ms after last keystroke
        clearOnFocus={false}
        closeOnBlur={false}
        onChangeText={fetchSuggestions}
        onSelectItem={setSelectedItem}
        onClear={() => setSuggestions(null)}
        EmptyResultComponent={<Text style={{ padding: 10 }}>No results found</Text>}
        textInputProps={{
          placeholder: 'Search posts (type 3+ chars)…',
          autoCorrect: false,
          autoCapitalize: 'none',
        }}
        suggestionsListMaxHeight={300}
      />
      <Text>Selected id: {selectedItem?.id ?? 'none'}</Text>
    </>
  )
})

```

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

### Event Handlers

Source: https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/README.md

These are event handlers that can be passed as props to the component to respond to user interactions.

```APIDOC
## Event Handlers

### `onSelectItem`

**Description**: Event triggered when an item is selected from the suggestions list.

### `onOpenSuggestionsList`

**Description**: Event triggered when the suggestions list is opened.

### `onChevronPress`

**Description**: Event triggered when the chevron icon is pressed.

### `onClear`

**Description**: Event triggered when the clear button is pressed.

### `onSubmit`

**Description**: Event triggered when the submit button on the keyboard is pressed.

### `onBlur`

**Description**: Event fired when the text input loses focus.

### `onFocus`

**Description**: Event fired when the text input gains focus.
```

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

### Custom Item Rendering with Highlight

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

Use the `renderItem` prop to customize how each item is displayed. You can conditionally hide items by returning `null`. The `searchText` parameter can be used to highlight matching parts of the item's title.

```tsx
import React, { memo, useState } from 'react'
import { Text, View } from 'react-native'
import {
  AutocompleteDropdown,
  AutocompleteDropdownItem,
} from 'react-native-autocomplete-dropdown'

const fruits: AutocompleteDropdownItem[] = [
  { id: '1', title: '🍎 Apple' },
  { id: '2', title: '🍌 Banana' },
  { id: '3', title: '🍇 Grape' },
  { id: '4', title: '🍊 Orange' },
]

export const CustomRenderExample = memo(() => {
  const [selected, setSelected] = useState<AutocompleteDropdownItem | null>(null)

  return (
    <AutocompleteDropdown
      dataSet={fruits}
      clearOnFocus={false}
      onSelectItem={setSelected}
      renderItem={(item, searchText) => {
        // Returning null hides the item from the list
        if (item.title?.toLowerCase().includes('banana')) return null
        return (
          <View style={{ padding: 12, flexDirection: 'row', alignItems: 'center' }}>
            <Text style={{ fontSize: 20 }}>{item.title?.split(' ')[0]}</Text>
            <Text style={{ marginLeft: 8, color: '#333', fontWeight: 'bold' }}>
              {item.title?.split(' ').slice(1).join(' ')}
            </Text>
            {searchText ? (
              <Text style={{ marginLeft: 'auto', color: '#999', fontSize: 11 }}>
                matches "{searchText}"
              </Text>
            ) : null}
          </View>
        )
      }}
    />
  )
})
```

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

### Autocomplete Dropdown with Remote Data

Source: https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/README.md

Demonstrates fetching data from a remote API and filtering it for autocomplete suggestions. Requires at least 3 characters to be typed before fetching. The `useFilter={false}` prop prevents duplicate renders.

```javascript
import React, { memo, useCallback, useRef, useState } from 'react'
import { Button, Dimensions, Text, View, Platform } from 'react-native'
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'

export const RemoteDataSetExample2 = memo(() => {
  const [loading, setLoading] = useState(false)
  const [suggestionsList, setSuggestionsList] = useState(null)
  const [selectedItem, setSelectedItem] = useState(null)
  const dropdownController = useRef(null)

  const searchRef = useRef(null)

  const getSuggestions = useCallback(async q => {
    const filterToken = q.toLowerCase()
    console.log('getSuggestions', q)
    if (typeof q !== 'string' || q.length < 3) {
      setSuggestionsList(null)
      return
    }
    setLoading(true)
    const response = await fetch('https://jsonplaceholder.typicode.com/posts')
    const items = await response.json()
    const suggestions = items
      .filter(item => item.title.toLowerCase().includes(filterToken))
      .map(item => ({
        id: item.id,
        title: item.title,
      }))
    setSuggestionsList(suggestions)
    setLoading(false)
  }, [])

  const onClearPress = useCallback(() => {
    setSuggestionsList(null)
  }, [])

  const onOpenSuggestionsList = useCallback(isOpened => {}, [])

  return (
    <>
      <View
        style={[ 
          { flex: 1, flexDirection: 'row', alignItems: 'center' },
          Platform.select({ ios: { zIndex: 1 } }),
        ]}>
        <AutocompleteDropdown
          ref={searchRef}
          controller={controller => {
            dropdownController.current = controller
          }}
          // initialValue={'1'}
          direction={Platform.select({ ios: 'down' })}
          dataSet={suggestionsList}
          onChangeText={getSuggestions}
          onSelectItem={item => {
            item && setSelectedItem(item.id)
          }}
          debounce={600}
          suggestionsListMaxHeight={Dimensions.get('window').height * 0.4}
          onClear={onClearPress}
          //  onSubmit={(e) => onSubmitSearch(e.nativeEvent.text)}
          onOpenSuggestionsList={onOpenSuggestionsList}
          loading={loading}
          useFilter={false} // set false to prevent rerender twice
          textInputProps={{
            placeholder: 'Type 3+ letters (dolo...)' ,
            autoCorrect: false,
            autoCapitalize: 'none',
            style: {
              borderRadius: 25,
              backgroundColor: '#383b42',
              color: '#fff',
              paddingLeft: 18,
            },
          }}
          rightButtonsContainerStyle={{
            right: 8,
            height: 30,

            alignSelf: 'center',
          }}
          inputContainerStyle={{
            backgroundColor: '#383b42',
            borderRadius: 25,
          }}
          suggestionsListContainerStyle={{
            backgroundColor: '#383b42',
          }}
          containerStyle={{ flexGrow: 1, flexShrink: 1 }}
          renderItem={(item, text) => <Text style={{ color: '#fff', padding: 15 }}>{item.title}</Text>}
        //   ChevronIconComponent={<Feather name="chevron-down" size={20} color="#fff" />}
        //   ClearIconComponent={<Feather name="x-circle" size={18} color="#fff" />}
          inputHeight={50}
          showChevron={false}
          closeOnBlur={false}
          //  showClear={false}
        />
        <View style={{ width: 10 }} />
        <Button style={{ flexGrow: 0 }} title="Toggle" onPress={() => dropdownController.current.toggle()} />
      </View>
      <Text style={{ color: '#668', fontSize: 13 }}>Selected item id: {JSON.stringify(selectedItem)}</Text>
    </>
  )
})

```

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

### IAutocompleteDropdownRef Methods

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

The imperative handle returned via the `controller` prop. Useful for building toolbar actions, form resets, or controlled dropdowns driven by external state.

```APIDOC
## IAutocompleteDropdownRef Methods

### Description
Provides methods for imperative control over the AutocompleteDropdown component, such as clearing input, focusing, or setting an item programmatically.

### Methods
- **clear**: `() => void` - Clears input and selection.
- **close**: `() => void` - Closes the suggestion list.
- **blur**: `() => void` - Blurs the text input.
- **focus**: `() => void` - Focuses the text input.
- **open**: `() => Promise<void>` - Opens the suggestion list.
- **setInputText**: `(text: string) => void` - Sets raw input text.
- **toggle**: `() => void` - Toggles the open/closed state of the suggestion list.
- **setItem**: `(item: AutocompleteDropdownItem) => void` - Selects an item programmatically.

### Usage Examples
```typescript
import { useRef } from 'react'
import type { IAutocompleteDropdownRef } from 'react-native-autocomplete-dropdown'

const ref = useRef<IAutocompleteDropdownRef | null>(null)

// Reset a form field
function handleFormReset() {
  ref.current?.clear()     // clears text + fires onClear
  ref.current?.close()     // ensure list is closed
}

// Restore a previously saved value
function restoreSavedValue(id: string, title: string) {
  ref.current?.setItem({ id, title })
}
```
```

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

### AutocompleteDropdown with Local Dataset

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

Use AutocompleteDropdown to render a search input that filters a static in-memory array of items. Configure options like clearOnFocus, closeOnBlur, showClear, initialValue, and provide a custom ItemSeparatorComponent.

```tsx
import React, { memo, useState } from 'react'
import { Text, View } from 'react-native'
import {
  AutocompleteDropdown,
  AutocompleteDropdownItem,
} from 'react-native-autocomplete-dropdown'

const Separator = () => (
  <View style={{ height: 1, width: '100%', backgroundColor: '#d8e1e6' }} />
)

export const CountryPicker = memo(() => {
  const [selectedItem, setSelectedItem] = useState<AutocompleteDropdownItem | null>(null)

  return (
    <>
      <AutocompleteDropdown
        clearOnFocus={false}
        closeOnBlur={true}
        showClear={false}
        initialValue={{ id: '2' }} // pre-select "Beta"; can also be just the string '2'
        onSelectItem={item => setSelectedItem(item)}
        dataSet={[
          { id: '1', title: 'Alpha' },
          { id: '2', title: 'Beta' },
          { id: '3', title: 'Gamma' },
          { id: '4', title: 'Delta' },
        ]}
        ItemSeparatorComponent={Separator}
        ignoreAccents // treat é === e during search
        matchFrom="any" // match anywhere in the title (default)
        suggestionsListMaxHeight={200}
      />
      <Text>Selected: {JSON.stringify(selectedItem)}</Text>
      {/* Output when "Beta" is selected:
          Selected: {"id":"2","title":"Beta"} */}
    </>
  )
})
```

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

### Imperative API Control with AutocompleteDropdown

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

Drive the dropdown programmatically using the `controller` prop. This exposes methods like `open`, `close`, `toggle`, `clear`, `blur`, `focus`, `setInputText`, and `setItem`. Pass a callback ref or a `React.RefObject<IAutocompleteDropdownRef>`.

```tsx
import React, { memo, useCallback, useRef, useMemo } from 'react'
import { Button, Text, View } from 'react-native'
import {
  AutocompleteDropdown,
  AutocompleteDropdownItem,
  IAutocompleteDropdownRef,
} from 'react-native-autocomplete-dropdown'

const dataset: AutocompleteDropdownItem[] = Array.from({ length: 50 }, (_, i) => ({
  id: String(i + 1),
  title: `Item ${i + 1}`,
}))

export const ControllerExample = memo(() => {
  const controllerRef = useRef<IAutocompleteDropdownRef | null>(null)
  const [selected, setSelected] = useState<AutocompleteDropdownItem | null>(null)

  return (
    <View>
      <AutocompleteDropdown
        dataSet={dataset}
        clearOnFocus={false}
        controller={ref => { controllerRef.current = ref }}
        onSelectItem={setSelected}
      />

      <View style={{ flexDirection: 'row', gap: 8, marginTop: 8 }}>
        <Button title="Open"   onPress={() => controllerRef.current?.open()} />
        <Button title="Close"  onPress={() => controllerRef.current?.close()} />
        <Button title="Toggle" onPress={() => controllerRef.current?.toggle()} />
        <Button title="Clear"  onPress={() => controllerRef.current?.clear()} />
        {/* Programmatically pre-fill input text */}
        <Button title="Set text" onPress={() => controllerRef.current?.setInputText('Item 5')} />
        {/* Programmatically set the selected item */}
        <Button title="Set item" onPress={() => controllerRef.current?.setItem({ id: '7', title: 'Item 7' }) } />
      </View>

      <Text>Selected: {JSON.stringify(selected)}</Text>
    </View>
  )
})

```

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

### IAutocompleteDropdownProps

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

Complete TypeScript interface with all configurable options for the AutocompleteDropdown component.

```APIDOC
## IAutocompleteDropdownProps

### Description
Defines all configurable properties for the AutocompleteDropdown component, covering data, behavior, search, appearance, events, and custom rendering.

### Props
#### Data
- **dataSet**: `Array<AutocompleteDropdownItem>` - The list of items to display in the dropdown.
- **initialValue**: `AutocompleteDropdownItem | string` - The initially selected item or its ID.

#### Behavior
- **clearOnFocus**: `boolean` - Clears typed text when the input is focused.
- **closeOnBlur**: `boolean` - Keeps the suggestion list open after the input loses focus.
- **closeOnSubmit**: `boolean` - Keeps the suggestion list open after keyboard submission.
- **editable**: `boolean` - If false, enables tap-to-open behavior (select mode).
- **useFilter**: `boolean` - Disables built-in client-side filtering when false.
- **debounce**: `number` - Debounce time in milliseconds for `onChangeText`.

#### Search
- **caseSensitive**: `boolean` - Whether the search is case-sensitive.
- **ignoreAccents**: `boolean` - Whether to ignore accents during matching (e.g., `é === e`).
- **trimSearchText**: `boolean` - Whether to trim whitespace from the search text.
- **matchFrom**: `'any' | 'start'` - Specifies if matches can be anywhere or only at the start of the text.

#### Appearance
- **inputHeight**: `number` - The height of the input field.
- **suggestionsListMaxHeight**: `number` - The maximum height of the suggestions list.
- **direction**: `'up' | 'down' | 'auto'` - The direction the suggestions list should appear.
- **theme**: `'light' | 'dark'` - The theme of the component (defaults to OS setting).
- **showChevron**: `boolean` - Whether to display a chevron icon.
- **showClear**: `boolean` - Whether to display a clear button.
- **enableLoadingIndicator**: `boolean` - Whether to show a loading indicator.

#### Loading
- **loading**: `boolean` - Manually control the loading state.

#### Events
- **onChangeText**: `(text: string) => void` - Callback when the input text changes.
- **onSelectItem**: `(item: AutocompleteDropdownItem) => void` - Callback when an item is selected.
- **onClear**: `() => void` - Callback when the clear button is pressed.
- **onChevronPress**: `() => void` - Callback when the chevron icon is pressed.
- **onOpenSuggestionsList**: `(isOpen: boolean) => void` - Callback when the suggestions list opens or closes.
- **onBlur**: `(e: NativeSyntheticEvent<TextInputFocusEventData>) => void` - Callback when the input blurs.
- **onFocus**: `(e: NativeSyntheticEvent<TextInputFocusEventData>) => void` - Callback when the input focuses.
- **onSubmit**: `(e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void` - Callback when the keyboard submit action is triggered.

#### Custom Render
- **renderItem**: `(item: AutocompleteDropdownItem, searchText: string) => React.ReactNode` - Custom render function for each item.
- **EmptyResultComponent**: `React.ReactNode` - Component to render when no results are found.
- **emptyResultText**: `string` - Text to display when no results are found.
- **InputComponent**: `React.ComponentType<TextInputProps>` - Custom component for the text input.
- **ItemSeparatorComponent**: `React.ComponentType<ItemSeparatorProps>` - Custom component to separate items.

#### Styles
- **containerStyle**: `StyleProp<ViewStyle>` - Style for the main container.
- **inputContainerStyle**: `StyleProp<ViewStyle>` - Style for the input container.
- **rightButtonsContainerStyle**: `StyleProp<ViewStyle>` - Style for the container of right-side buttons.
- **suggestionsListContainerStyle**: `StyleProp<ViewStyle>` - Style for the suggestions list container.
- **suggestionsListTextStyle**: `StyleProp<TextStyle>` - Style for the text within the suggestions list.
- **textInputProps**: `TextInputProps` - Props to pass directly to the underlying `TextInput` component.
- **flatListProps**: `FlatListProps<AutocompleteDropdownItem>` - Props to pass directly to the underlying `FlatList` component.

#### Custom Icons
- **ChevronIconComponent**: `React.ComponentType<IconProps>` - Custom component for the chevron icon.
- **ClearIconComponent**: `React.ComponentType<IconProps>` - Custom component for the clear icon.
- **RightIconComponent**: `React.ComponentType<IconProps>` - Custom component for the right icon.
- **LeftComponent**: `React.ComponentType<IconProps>` - Custom component for the left icon.
- **onRightIconComponentPress**: `() => void` - Callback when the custom right icon is pressed.

### Example Configuration
```typescript
import type { IAutocompleteDropdownProps } from 'react-native-autocomplete-dropdown'

const config: Partial<IAutocompleteDropdownProps> = {
  // Data
  dataSet: [{ id: '1', title: 'Example' }],
  initialValue: { id: '1' },         // or just the string '1'

  // Behavior
  clearOnFocus: true,
  closeOnBlur: false,
  closeOnSubmit: false,
  editable: true,
  useFilter: true,
  debounce: 300,

  // Search
  caseSensitive: false,
  ignoreAccents: true,
  trimSearchText: true,
  matchFrom: 'any',

  // Appearance
  inputHeight: 40,
  suggestionsListMaxHeight: 200,
  direction: 'down',
  theme: 'light',
  showChevron: true,
  showClear: true,
  enableLoadingIndicator: true,

  // Loading
  loading: false,

  // Events
  onChangeText: (text) => console.log('typed:', text),
  onSelectItem: (item) => console.log('selected:', item),
  onClear: () => console.log('cleared'),
  onChevronPress: () => console.log('chevron pressed'),
  onOpenSuggestionsList: (isOpen) => console.log('list open:', isOpen),
  onBlur: (e) => console.log('blur'),
  onFocus: (e) => console.log('focus'),
  onSubmit: (e) => console.log('submit:', e.nativeEvent.text),

  // Custom render
  renderItem: (item, searchText) => null,
  EmptyResultComponent: null,
  emptyResultText: 'Nothing found',
  InputComponent: undefined,
  ItemSeparatorComponent: undefined,

  // Styles
  containerStyle: {},
  inputContainerStyle: {},
  rightButtonsContainerStyle: {},
  suggestionsListContainerStyle: {},
  suggestionsListTextStyle: {},
  textInputProps: { placeholder: 'Search…' },
  flatListProps: {},

  // Custom icons
  ChevronIconComponent: undefined,
  ClearIconComponent: undefined,
  RightIconComponent: undefined,
  LeftComponent: undefined,
  onRightIconComponentPress: () => {},
}
```
```

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

### Use Dropdown in a Modal

Source: https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/README.md

To use the dropdown within a modal, wrap it in an AutocompleteDropdownContextProvider inside the modal component. Ensure the modal is presented within a SafeAreaView.

```javascript
<Modal
    visible={opened}
    presentationStyle="formSheet"
    animationType="slide"
    onRequestClose={() => setOpened(false)}>
    <SafeAreaView style={{ flex: 1, backgroundColor: 'transparent' }}>
      <AutocompleteDropdownContextProvider>
        <View style={{ paddingHorizontal: 20, flex: 1, paddingTop: 20 }}>
          <AutocompleteDropdown {...props}/>
        </View>
      </AutocompleteDropdownContextProvider>
    </SafeAreaView>
</Modal>
```

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

### Use AutocompleteDropdown Inside a Modal

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

When rendering inside a Modal, wrap the dropdown's content in a second `AutocompleteDropdownContextProvider` to ensure correct positioning of the floating list.

```tsx
import React, { memo, useState } from 'react'
import {
  Button,
  Dimensions,
  KeyboardAvoidingView,
  Modal,
  Platform,
  SafeAreaView,
  ScrollView,
  View,
} from 'react-native'
import {
  AutocompleteDropdownContextProvider,
  AutocompleteDropdown,
  AutocompleteDropdownItem,
} from 'react-native-autocomplete-dropdown'

export const ModalDropdownExample = memo(() => {
  const [opened, setOpened] = useState(false)
  const [selected, setSelected] = useState<AutocompleteDropdownItem | null>(null)

  return (
    <>
      <Button onPress={() => setOpened(true)} title="Open modal" />
      <Modal
        visible={opened}
        presentationStyle="formSheet"
        animationType="slide"
        onRequestClose={() => setOpened(false)}>
        {/* Second provider scoped to the modal */}
        <AutocompleteDropdownContextProvider>
          <SafeAreaView style={{ flex: 1 }}>
            <KeyboardAvoidingView
              style={{ flex: 1 }}
              behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
              keyboardVerticalOffset={Platform.select({ ios: 75, default: 60 })}>
              <ScrollView
                nestedScrollEnabled
                keyboardDismissMode="on-drag"
                keyboardShouldPersistTaps="handled"
                style={{ flex: 1 }}>
                <View style={{ padding: 20 }}>
                  <AutocompleteDropdown
                    dataSet={[
                      { id: '1', title: 'Alpha' },
                      { id: '2', title: 'Beta' },
                      { id: '3', title: 'Gamma' },
                    ]}
                    clearOnFocus={false}
                    closeOnBlur={true}
                    onSelectItem={setSelected}
                  />
                  {/* Extra space so the list has room to open */}
                  <View style={{ height: Dimensions.get('screen').height - 300 }} />
                  <Button onPress={() => setOpened(false)} title="Close" />
                </View>
              </ScrollView>
            </KeyboardAvoidingView>
          </SafeAreaView>
        </AutocompleteDropdownContextProvider>
      </Modal>
    </>
  )
})
```

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

### Imperative Control with IAutocompleteDropdownRef

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

Use the controller ref to imperatively manage the dropdown's state, such as clearing input, closing the list, or setting an item programmatically. This is useful for form resets or controlled dropdowns.

```typescript
import type { IAutocompleteDropdownRef } from 'react-native-autocomplete-dropdown'

// Interface definition (for reference):
// interface IAutocompleteDropdownRef {
//   clear:        () => void                           — clears input & selection
//   close:        () => void                           — closes the suggestion list
//   blur:         () => void                           — blurs the text input
//   focus:        () => void                           — focuses the text input
//   open:         () => Promise<void>                  — opens the suggestion list
//   setInputText: (text: string) => void               — sets raw input text
//   toggle:       () => void                           — toggles open/closed
//   setItem:      (item: AutocompleteDropdownItem) => void — selects an item programmatically
// }

import { useRef } from 'react'
const ref = useRef<IAutocompleteDropdownRef | null>(null)

// Reset a form field
function handleFormReset() {
  ref.current?.clear()     // clears text + fires onClear
  ref.current?.close()     // ensure list is closed
}

// Restore a previously saved value
function restoreSavedValue(id: string, title: string) {
  ref.current?.setItem({ id, title })
}
```

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

### Left Component and Custom Input

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

Add custom content to the left of the input using `LeftComponent`, such as labels or icons. The `InputComponent` prop allows replacing the default `TextInput` with a custom component.

```tsx
import React, { memo, useState } from 'react'
import { Text, TextInput, Dimensions } from 'react-native'
import {
  AutocompleteDropdown,
  AutocompleteDropdownItem,
} from 'react-native-autocomplete-dropdown'

export const LeftLabelExample = memo(() => {
  const [selected, setSelected] = useState<AutocompleteDropdownItem | null>(null)

  return (
    <AutocompleteDropdown
      editable={false}   // tap-to-open mode (non-editable acts as a select picker)
      clearOnFocus={false}
      closeOnBlur={true}
      showClear={true}
      onSelectItem={setSelected}
      LeftComponent={
        <Text style={{ paddingLeft: 8, alignSelf: 'center', color: '#668', fontSize: 14 }}>
          Country:
        </Text>
      }
      dataSet={[
        { id: 'us', title: '🇺🇸 United States' },
        { id: 'gb', title: '🇬🇧 United Kingdom' },
        { id: 'de', title: '🇩🇪 Germany' },
      ]}
      suggestionsListMaxHeight={Dimensions.get('window').height / 1.5}
      renderItem={(item) => (
        <Text style={{ padding: 16, fontSize: 16 }}>{item.title}</Text>
      )}
    />
  )
})
```

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

### AutocompleteDropdownItem Type Definition

Source: https://context7.com/onmotion/react-native-autocomplete-dropdown/llms.txt

Defines the minimum required shape for items in the `dataSet` prop. Both `id` and `title` must be strings, with `title` being nullable for ID-only datasets.

```ts
import type { AutocompleteDropdownItem } from 'react-native-autocomplete-dropdown'

// Minimum required shape
const item: AutocompleteDropdownItem = { id: '42', title: 'Answer' }

// title can be null/undefined for id-only use cases
const blankTitle: AutocompleteDropdownItem = { id: '99', title: null }

// Building a dataset from an API response
const posts = await fetch('/api/posts').then(r => r.json())
const dataSet: AutocompleteDropdownItem[] = posts.map(
  (p: { id: number; title: string }) => ({
    id: String(p.id),
    title: p.title,
  })
)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.