Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/onmotion/react-native-autocomplete-dropdown
Dropdown Item picker with search and autocomplete (typeahead) functionality for react native
https://github.com/onmotion/react-native-autocomplete-dropdown
android autocomplete autocomplete-suggestions dropdown dropdown-menu hacktoberfest ios react-native select typeahead
Last synced: 1 day ago
JSON representation
Dropdown Item picker with search and autocomplete (typeahead) functionality for react native
- Host: GitHub
- URL: https://github.com/onmotion/react-native-autocomplete-dropdown
- Owner: onmotion
- License: mit
- Created: 2021-04-06T14:27:04.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-20T10:35:17.000Z (25 days ago)
- Last Synced: 2024-11-09T20:40:19.036Z (4 days ago)
- Topics: android, autocomplete, autocomplete-suggestions, dropdown, dropdown-menu, hacktoberfest, ios, react-native, select, typeahead
- Language: TypeScript
- Homepage:
- Size: 6.62 MB
- Stars: 200
- Watchers: 5
- Forks: 79
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-autocomplete-dropdown
Dropdown Item picker with search and autocomplete (typeahead) functionality for react native
[](https://img.shields.io/github/license/onmotion/react-native-autocomplete-dropdown)
[](https://npmjs.com/package/react-native-autocomplete-dropdown)
[](https://npmjs.com/package/react-native-autocomplete-dropdown)
> 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)
## Demo
> Run expo snack demo [@onmotion/react-native-autocomplete-dropdown](https://snack.expo.dev/@onmotion/react-native-autocomplete-dropdown-v4)
or download the [Expo Go](https://expo.dev/go) app and scan the QR code below
## Nav
- [react-native-autocomplete-dropdown](#react-native-autocomplete-dropdown)
- [Demo](#demo)
- [Nav](#nav)
- [Installation](#installation)
- [Post-install Steps](#post-install-steps)
- [iOS](#ios)
- [Android](#android)
- [Usage](#usage)
- [Dataset item format](#dataset-item-format)
- [Example with local Dataset](#example-with-local-dataset)
- [Example with remote requested Dataset](#example-with-remote-requested-dataset)
- [Playground](#playground)
- [Options](#options)
- [Contribution](#contribution)
## Installation
Run:
or
```bash
yarn add react-native-autocomplete-dropdown
```
or for v3.x
```bash
yarn add [email protected]
```
## Post-install Steps
Make sure **react-native-svg** is installed. Follow the guide
```bash
yarn add react-native-svg
```
### iOS
Run: `npx pod-install` for install `react-native-svg` dependency (if not installed yet).
### Android
No additional steps are necessary
## Usage
Wrap 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.js)
```js
```
If you have a header component, you can pass an offset. For example with react navigation
```js
//...
import { useHeaderHeight } from '@react-navigation/elements';
//...
const headerHeight = useHeaderHeight();
//...
```
import the package
```js
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
```
### Dataset item format
`dataSet` property must be an **array of objects** or **null**. Object required keys are:
```js
{
id: 'some uniq string id',
title: 'list item title'
}
```
### Example with local Dataset
```js
const [selectedItem, setSelectedItem] = useState(null);
;
```
### Example with remote requested Dataset
```js
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 (
<>
{
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) => {item.title}}
// ChevronIconComponent={}
// ClearIconComponent={}
inputHeight={50}
showChevron={false}
closeOnBlur={false}
// showClear={false}
/>
dropdownController.current.toggle()} />
Selected item id: {JSON.stringify(selectedItem)}
>
)
})
```
More examples see at
## Playground
To play around with the examples, you can run the following commands
```bash
cd example
yarn install
yarn pods
yarn ios
yarn android
```
## Options
| **Option** | **Description** | **Type** | **Default** |
|--- |-----------------------------------------------------------------------------------------------------------------|--- |-----------------------------------------------|
| `dataSet` | set of list items | array | null |
| `initialValue` | string (**id**) or object that contain **id** | string \| object | null |
| `loading` | loading state | bool | false |
| `useFilter` | whether use local filter by dataSet (useful set to false for remote filtering to prevent rerender twice) | bool | true |
| `showClear` | show clear button | bool | true |
| `showChevron` | show chevron (open/close) button | bool | true |
| `closeOnBlur` | whether to close dropdown on blur | bool | false |
| `closeOnSubmit` | whether to close dropdown on submit | bool | false |
| `clearOnFocus` | whether to clear typed text on focus | bool | true |
| `caseSensitive` | whether to perform case-sensitive search | bool | false
| `ignoreAccents` | ignore diacritics | bool | true |
| `trimSearchText` | trim the searched text | bool | true |
| `editable` | is textInput editable | bool | true |
| `debounce` | wait **ms** before call `onChangeText` | number | 0 |
| `suggestionsListMaxHeight` | max height of dropdown | number | 200 |
| `direction` | "up" or "down" | string | down + auto calculate |
| `matchFrom` | whether match suggestions from start of titles or anywhere in the title. Possible values are "any" or "start" | string | any |
| `bottomOffset` | for calculate dropdown direction (e.g. tabbar) | number | 0 |
| `onChangeText` | event textInput onChangeText | function | |
| `onSelectItem` | event onSelectItem | function | |
| `onOpenSuggestionsList` | event onOpenSuggestionsList | function | |
| `onChevronPress` | event onChevronPress | function | |
| `onClear` | event on clear button press | function | |
| `onSubmit` | event on submit KB button press | function | |
| `onBlur` | event fired on text input blur | function | |
| `onFocus` | event on focus text input | function | |
| `renderItem` | JSX for render item `(item, searchText) => JSX \| null` if return null then the element will not be displayed | function | item.title |
| `controller` | return reference to module controller with methods **close, open, toggle, clear, setInputText, setItem** | function | |
| `containerStyle` | | ViewStyle | |
| `rightButtonsContainerStyle` | | ViewStyle | |
| `suggestionsListContainerStyle` | | ViewStyle | |
| `suggestionsListTextStyle` | | TextStyle | styles of suggestions list text items |
| `ChevronIconComponent` | | React.Component | Feather chevron icon |
| `ClearIconComponent` | | React.Component | Feather x icon |
| ~~ScrollViewComponent~~ | removed in 2.0.0 based on FlatList | React.Component name | ScrollView that provide suggestions content |
| `EmptyResultComponent` | replace the default `` Component on empty result | React.Component | |
| `InputComponent` | input element component | React.ComponentType | TextInput |
| `emptyResultText` | replace the default "Nothing found" text on empty result | string | "Nothing found" |
| `textInputProps` | text input props | TextInputProps | |
| `flatListProps` | props for \ component | FlatListProps\ | |
## Contribution