{"id":19906033,"url":"https://github.com/onmotion/react-native-autocomplete-dropdown","last_synced_at":"2025-05-15T02:05:05.558Z","repository":{"id":40315486,"uuid":"355218716","full_name":"onmotion/react-native-autocomplete-dropdown","owner":"onmotion","description":"Dropdown Item picker with search and autocomplete (typeahead) functionality for react native","archived":false,"fork":false,"pushed_at":"2025-05-12T06:26:09.000Z","size":6994,"stargazers_count":219,"open_issues_count":46,"forks_count":85,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-15T02:04:48.606Z","etag":null,"topics":["android","autocomplete","autocomplete-suggestions","dropdown","dropdown-menu","hacktoberfest","ios","react-native","select","typeahead"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onmotion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-04-06T14:27:04.000Z","updated_at":"2025-05-12T06:26:13.000Z","dependencies_parsed_at":"2024-03-30T11:25:29.154Z","dependency_job_id":"f8546357-6762-469c-ab28-f9bbffb27c26","html_url":"https://github.com/onmotion/react-native-autocomplete-dropdown","commit_stats":{"total_commits":194,"total_committers":21,"mean_commits":9.238095238095237,"dds":0.2010309278350515,"last_synced_commit":"e1ff8f59eef660084fb74fb5f31a60a014bdd04e"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onmotion%2Freact-native-autocomplete-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onmotion%2Freact-native-autocomplete-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onmotion%2Freact-native-autocomplete-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onmotion%2Freact-native-autocomplete-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onmotion","download_url":"https://codeload.github.com/onmotion/react-native-autocomplete-dropdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254259369,"owners_count":22040819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","autocomplete","autocomplete-suggestions","dropdown","dropdown-menu","hacktoberfest","ios","react-native","select","typeahead"],"created_at":"2024-11-12T20:35:17.119Z","updated_at":"2025-05-15T02:05:05.536Z","avatar_url":"https://github.com/onmotion.png","language":"TypeScript","readme":"# react-native-autocomplete-dropdown\n\nDropdown Item picker with search and autocomplete (typeahead) functionality for react native\n\n[![license](https://img.shields.io/github/license/onmotion/react-native-autocomplete-dropdown)](https://img.shields.io/github/license/onmotion/react-native-autocomplete-dropdown)\n[![npm](https://img.shields.io/npm/v/react-native-autocomplete-dropdown.svg)](https://npmjs.com/package/react-native-autocomplete-dropdown)\n[![npm](https://img.shields.io/npm/dm/react-native-autocomplete-dropdown.svg)](https://npmjs.com/package/react-native-autocomplete-dropdown)\n\n\u003e This is documentation for version 4.x, if you are looking docs for version 3.x, you can find it [here](https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/README%5E3.md)\n\n\u003cp style=\"text-align: center;\" align=\"center\"\u003e\n    \u003cimg src=\"./screens/Example.png\" width=\"500px\" \u003e\n\u003c/p\u003e\n\n## Demo\n\n\u003cp style=\"text-align: center;\" align=\"center\"\u003e\n    \u003cimg src=\"./screens/android.gif\" width=\"280px\" \u003e\n    \u003cimg src=\"./screens/ios.gif\" width=\"280px\" \u003e\n\u003c/p\u003e\n\n\u003e Run expo snack demo [@onmotion/react-native-autocomplete-dropdown](https://snack.expo.dev/@onmotion/react-native-autocomplete-dropdown-v4)\n\nor download the [Expo Go](https://expo.dev/go) app and scan the QR code below\n\n\u003cimg src=\"./screens/expo-example-qr-v4.png\" width=\"150\"\u003e\n\n## Nav\n\n- [react-native-autocomplete-dropdown](#react-native-autocomplete-dropdown)\n        - [Demo](#demo)\n        - [Nav](#nav)\n        - [Installation](#installation)\n        - [Post-install Steps](#post-install-steps)\n                - [iOS](#ios)\n                - [Android](#android)\n        - [Usage](#usage)\n                - [Dataset item format](#dataset-item-format)\n                - [Example with local Dataset](#example-with-local-dataset)\n                - [Example with remote requested Dataset](#example-with-remote-requested-dataset)\n        - [Playground](#playground)\n        - [Options](#options)\n        - [Usage with a Modal](#usage-with-a-modal)\n\n## Installation\n\nRun:\n\n or\n\n ```bash\n yarn add react-native-autocomplete-dropdown\n ```\n\n or for v3.x\n\n ```bash\n yarn add react-native-autocomplete-dropdown@3.1.5\n ```\n\n## Post-install Steps\n\nMake sure **react-native-svg** is installed. Follow the guide\n\u003chttps://github.com/software-mansion/react-native-svg\u003e\n\n```bash\nyarn add react-native-svg\n```\n\n### iOS\n\nRun: `npx pod-install` for install `react-native-svg` dependency (if not installed yet).\n\n### Android\n\nNo additional steps are necessary\n\n## Usage\n\nWrap your root component in `AutocompleteDropdownContextProvider` from `react-native-autocomplete-dropdown` as you can see in [example](https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/example/App.tsx)\n\n```js\n\u003cAutocompleteDropdownContextProvider\u003e\n    \u003cAppRootOrWhatever/\u003e\n\u003c/AutocompleteDropdownContextProvider\u003e\n```\n\nThe dropdown position is relative to the `AutocompleteDropdownContextProvider`, so put this in the right place, it should cover all the screen/modal.\n\nIf you have a header component, you can pass an offset.  For example with react navigation\n\n```js\n//...\nimport { useHeaderHeight } from '@react-navigation/elements';\n//...\nconst headerHeight = useHeaderHeight();\n//...\n\n\u003cAutocompleteDropdownContextProvider headerOffset={headerHeight} \u003e\n    \u003cAppRootOrWhatever/\u003e\n\u003c/AutocompleteDropdownContextProvider\u003e\n```\n\nimport the package\n\n```js\nimport { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';\n```\n\n### Dataset item format\n\n`dataSet` property must be an **array of objects** or **null**. Object required keys are:\n\n```js\n{\n    id: 'some uniq string id',\n    title: 'list item title'\n}\n```\n\n### Example with local Dataset\n\n```js\nconst [selectedItem, setSelectedItem] = useState(null);\n\n\u003cAutocompleteDropdown\n  clearOnFocus={false}\n  closeOnBlur={true}\n  closeOnSubmit={false}\n  initialValue={{ id: '2' }} // or just '2'\n  onSelectItem={setSelectedItem}\n  dataSet={[\n    { id: '1', title: 'Alpha' },\n    { id: '2', title: 'Beta' },\n    { id: '3', title: 'Gamma' },\n  ]}\n/\u003e;\n```\n\n### Example with remote requested Dataset\n\n```js\nimport React, { memo, useCallback, useRef, useState } from 'react'\nimport { Button, Dimensions, Text, View, Platform } from 'react-native'\nimport { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'\n\nexport const RemoteDataSetExample2 = memo(() =\u003e {\n  const [loading, setLoading] = useState(false)\n  const [suggestionsList, setSuggestionsList] = useState(null)\n  const [selectedItem, setSelectedItem] = useState(null)\n  const dropdownController = useRef(null)\n\n  const searchRef = useRef(null)\n\n  const getSuggestions = useCallback(async q =\u003e {\n    const filterToken = q.toLowerCase()\n    console.log('getSuggestions', q)\n    if (typeof q !== 'string' || q.length \u003c 3) {\n      setSuggestionsList(null)\n      return\n    }\n    setLoading(true)\n    const response = await fetch('https://jsonplaceholder.typicode.com/posts')\n    const items = await response.json()\n    const suggestions = items\n      .filter(item =\u003e item.title.toLowerCase().includes(filterToken))\n      .map(item =\u003e ({\n        id: item.id,\n        title: item.title,\n      }))\n    setSuggestionsList(suggestions)\n    setLoading(false)\n  }, [])\n\n  const onClearPress = useCallback(() =\u003e {\n    setSuggestionsList(null)\n  }, [])\n\n  const onOpenSuggestionsList = useCallback(isOpened =\u003e {}, [])\n\n  return (\n    \u003c\u003e\n      \u003cView\n        style={[\n          { flex: 1, flexDirection: 'row', alignItems: 'center' },\n          Platform.select({ ios: { zIndex: 1 } }),\n        ]}\u003e\n        \u003cAutocompleteDropdown\n          ref={searchRef}\n          controller={controller =\u003e {\n            dropdownController.current = controller\n          }}\n          // initialValue={'1'}\n          direction={Platform.select({ ios: 'down' })}\n          dataSet={suggestionsList}\n          onChangeText={getSuggestions}\n          onSelectItem={item =\u003e {\n            item \u0026\u0026 setSelectedItem(item.id)\n          }}\n          debounce={600}\n          suggestionsListMaxHeight={Dimensions.get('window').height * 0.4}\n          onClear={onClearPress}\n          //  onSubmit={(e) =\u003e onSubmitSearch(e.nativeEvent.text)}\n          onOpenSuggestionsList={onOpenSuggestionsList}\n          loading={loading}\n          useFilter={false} // set false to prevent rerender twice\n          textInputProps={{\n            placeholder: 'Type 3+ letters (dolo...)',\n            autoCorrect: false,\n            autoCapitalize: 'none',\n            style: {\n              borderRadius: 25,\n              backgroundColor: '#383b42',\n              color: '#fff',\n              paddingLeft: 18,\n            },\n          }}\n          rightButtonsContainerStyle={{\n            right: 8,\n            height: 30,\n\n            alignSelf: 'center',\n          }}\n          inputContainerStyle={{\n            backgroundColor: '#383b42',\n            borderRadius: 25,\n          }}\n          suggestionsListContainerStyle={{\n            backgroundColor: '#383b42',\n          }}\n          containerStyle={{ flexGrow: 1, flexShrink: 1 }}\n          renderItem={(item, text) =\u003e \u003cText style={{ color: '#fff', padding: 15 }}\u003e{item.title}\u003c/Text\u003e}\n        //   ChevronIconComponent={\u003cFeather name=\"chevron-down\" size={20} color=\"#fff\" /\u003e}\n        //   ClearIconComponent={\u003cFeather name=\"x-circle\" size={18} color=\"#fff\" /\u003e}\n          inputHeight={50}\n          showChevron={false}\n          closeOnBlur={false}\n          //  showClear={false}\n        /\u003e\n        \u003cView style={{ width: 10 }} /\u003e\n        \u003cButton style={{ flexGrow: 0 }} title=\"Toggle\" onPress={() =\u003e dropdownController.current.toggle()} /\u003e\n      \u003c/View\u003e\n      \u003cText style={{ color: '#668', fontSize: 13 }}\u003eSelected item id: {JSON.stringify(selectedItem)}\u003c/Text\u003e\n    \u003c/\u003e\n  )\n})\n\n```\n\nMore examples see at \u003chttps://github.com/onmotion/react-native-autocomplete-dropdown/tree/main/example\u003e\n\n## Playground\n\nTo play around with the examples, you can run the following commands\n\n```bash\ncd example\nyarn install\nyarn pods\n\nyarn ios\nyarn android\n```\n\n## Options\n\n| Option                         | Description                                                                                                      | Type                | Default                                  |\n|--------------------------------|------------------------------------------------------------------------------------------------------------------|---------------------|------------------------------------------|\n| `dataSet`                      | Set of list items                                                                                                | array               | null                                     |\n| `initialValue`                 | String (**id**) or object that contains **id**                                                                   | string \\| object    | null                                     |\n| `loading`                      | Loading state                                                                                                    | bool                | false                                    |\n| `enableLoadingIndicator`       | Whether to show activity indicator on loading                                                                    | bool                | true                                     |\n| `useFilter`                    | Whether to use local filter by dataSet (useful set to false for remote filtering to prevent rerender twice)      | bool                | true                                     |\n| `showClear`                    | Show clear button                                                                                                | bool                | true                                     |\n| `showChevron`                  | Show chevron (open/close) button                                                                                 | bool                | true                                     |\n| `closeOnBlur`                  | Whether to close dropdown on blur                                                                                | bool                | false                                    |\n| `closeOnSubmit`                | Whether to close dropdown on submit                                                                              | bool                | false                                    |\n| `clearOnFocus`                 | Whether to clear typed text on focus                                                                             | bool                | true                                     |\n| `caseSensitive`                | Whether to perform case-sensitive search                                                                         | bool                | false                                    |\n| `ignoreAccents`                | Ignore diacritics                                                                                                | bool                | true                                     |\n| `trimSearchText`               | Trim the searched text                                                                                           | bool                | true                                     |\n| `editable`                     | Is textInput editable                                                                                            | bool                | true                                     |\n| `debounce`                     | Wait **ms** before call `onChangeText`                                                                           | number              | 0                                        |\n| `suggestionsListMaxHeight`     | Max height of dropdown                                                                                           | number              | 200                                      |\n| `direction`                    | \"up\" or \"down\"                                                                                                   | string              | down + auto calculate                    |\n| `matchFrom`                    | Whether match suggestions from start of titles or anywhere in the title. Possible values are \"any\" or \"start\"    | string              | any                                      |\n| `bottomOffset`                 | For calculate dropdown direction (e.g., tabbar)                                                                  | number              | 0                                        |\n| `theme`           | Color scheme. Possible values are \"light\" or \"dark\"  | string            |  OS's color scheme                                        |\n| `onChangeText`                 | Event textInput onChangeText                                                                                     | function            |                                          |\n| `onSelectItem`                 | Event onSelectItem                                                                                               | function            |                                          |\n| `onOpenSuggestionsList`        | Event onOpenSuggestionsList                                                                                      | function            |                                          |\n| `onChevronPress`               | Event onChevronPress                                                                                             | function            |                                          |\n| `onClear`                      | Event on clear button press                                                                                      | function            |                                          |\n| `onSubmit`                     | Event on submit KB button press                                                                                  | function            |                                          |\n| `onBlur`                       | Event fired on text input blur                                                                                   | function            |                                          |\n| `onFocus`                      | Event on focus text input                                                                                        | function            |                                          |\n| `renderItem`                   | JSX for render item `(item, searchText) =\u003e JSX \\| null` if return null then the element will not be displayed    | function            | item.title                               |\n| `controller`                   | Return reference to module controller with methods **close, open, toggle, clear, setInputText, setItem**         | function            |                                          |\n| `containerStyle`               |                                                                                                                  | ViewStyle           |                                          |\n| `rightButtonsContainerStyle`   |                                                                                                                  | ViewStyle           |                                          |\n| `suggestionsListContainerStyle`|                                                                                                                  | ViewStyle           |                                          |\n| `suggestionsListTextStyle`     |                                                                                                                  | TextStyle           | styles of suggestions list text items    |\n| `ChevronIconComponent`         |                                                                                                                  | React.Component     | Feather chevron icon                     |\n| `ClearIconComponent`           |                                                                                                                  | React.Component     | Feather x icon                           |\n| `EmptyResultComponent`         | Replace the default `Component` on empty result                                                                  | React.Component     |                                          |\n| `InputComponent`               | Input element component                                                                                          | React.ComponentType | TextInput                                |\n| `emptyResultText`              | Replace the default \"Nothing found\" text on empty result                                                         | string              | \"Nothing found\"                          |\n| `textInputProps`               | Text input props                                                                                                 | TextInputProps      |                                          |\n| `flatListProps`                | Props for `FlatList` component                                                                                   | FlatListProps       |                                          |\n\n\n## Usage with a Modal\n\nif you want to use the dropdown in a modal, you need to wrap the dropdown in another `AutocompleteDropdownContextProvider` inside the modal component\n\n```js\n    \u003cModal\n        visible={opened}\n        presentationStyle=\"formSheet\"\n        animationType=\"slide\"\n        onRequestClose={() =\u003e setOpened(false)}\u003e\n        \u003cSafeAreaView style={{ flex: 1, backgroundColor: 'transparent' }}\u003e\n          \u003cAutocompleteDropdownContextProvider\u003e\n            \u003cView style={{ paddingHorizontal: 20, flex: 1, paddingTop: 20 }}\u003e\n              \u003cAutocompleteDropdown {...props}/\u003e\n            \u003c/View\u003e\n          \u003c/AutocompleteDropdownContextProvider\u003e\n        \u003c/SafeAreaView\u003e\n    \u003c/Modal\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonmotion%2Freact-native-autocomplete-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonmotion%2Freact-native-autocomplete-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonmotion%2Freact-native-autocomplete-dropdown/lists"}