Autocomplete dropdown in react native

you want to give the autocomplete feature to your app than you are at right place. I tried different library of this but all have a lots of issues, the one which i find useful i am gonna tell you today.

If you want to give search functionality in your mobile application like, when user is typing in search box then we can show matched result in dropdown so user can choose. This is must use feature in all the list components.

Install React Native AutoComplete Dropdown

for npm

npm install --save react-native-autocomplete-dropdown

for yarn

yarn add react-native-autocomplete-dropdown

After that this library needs some dependency for running

first one is react native vector icons install it and configure it properly in your app.

yarn add react-native-vector-icons

Usage of React Native AutoComplete Dropdown

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

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' },
  ]}
/>;

dataSet must be array of object with id and title

Props

• dataSet: array of object
• initialvalue: initial id
• debounce: give waiting time in ms
• suggestionsListMaxHeight: max height of list
• direction: direction of list to up and down
• position: relative or absolute
• bottomOffset: for calculate dropdown direction

Events

onChangeText, onSelectItem, onOpenSuggestionsList, onChevronPress, onClear, onSubmit, onBlur, onFocus, renderItem, controller

Styling props

containerStyle, rightButtonsContainerStyle, suggestionsListContainerStyle : ViewStyles

suggestionsListTextStyle: TextStyles

React Component props

ChevronIconComponent, ClearIconComponent, EmptyResultComponent, InputComponent

some important boolean props

• loading: current loading state of list
• useFilter: if you want to use filter than make it true
• showClear: for showing clear button
• showChevron: open and close button
• closeOnBlur, closeOnSubmit, clearOnFocus

Other Props

emptyResultText, textInputProps, flatListProps