React Native Autocomplete is a library that allows users to easily create an autocomplete input field in their React Native app. Autocomplete is a feature that can be useful for many types of applications, especially those that rely heavily on user input, such as search engines or e-commerce apps.
With the React Native Autocomplete library, developers can create an input field that will display a list of suggested values based on the user’s input. This can be done by simply passing an array of options to the Autocomplete component. The user’s input is then matched against the options, and a list of matches is displayed.
The Autocomplete component also allows for customization of the suggestion list, including custom rendering of individual options and the ability to limit the number of options displayed at once. Overall, React Native Autocomplete is a powerful and flexible library that can help developers create more user-friendly and efficient input fields in their React Native apps.
event | Info |
---|---|
onTyping | Text is entered. The callback can be delayed with option autoCompleteFetchRequestDelay . |
onSelect | A cell in the suggestions list is selected. |
onFocus | Text input get focus. |
onBlur | Text input lost focus. |
Other events from Text Input are avalaible.
option | type | Info |
---|---|---|
cellComponent | string | Name of a React Native component used to render cells. If null , use the default rendering. |
suggestions | array | If using default cell rendering specify an Array of string, otherwise any object. |
autoCompleteFetchRequestDelay | number | Delay in milliseconds before retrieving suggestions. |
maximumNumberOfAutoCompleteRows | number | Number of suggestions displayed. |
showTextFieldDropShadowWhenAutoCompleteTableIsOpen | bool | Display a drop shadow around the text field. |
autoCompleteTableViewHidden | bool | If true, the suggestions list will be hidden. |
autoCompleteTableBorderColor | color | Set suggestions list border color. |
autoCompleteTableBorderWidth | number | Set suggestions list border color. |
autoCompleteTableBackgroundColor | color | Set suggestions list border size. |
autoCompleteTableCornerRadius | number | Set suggestions list background color. |
autoCompleteTableTopOffset | number | Set the distance between the text field and the suggestions list. |
autoCompleteTableLeftOffset | number | Set the left offset between the container and the suggestions list. |
autoCompleteTableSizeOffset | number | Set the offset of the suggestions list size. Combined with autoCompleteTableLeftOffset, you can reduce the width of the suggestions list and to center it. Exemple: autoCompleteTableLeftOffset=20 autoCompleteTableSizeOffset=40 |
autoCompleteRowHeight | number | Height of cells in the suggestions list. |
option | type | Info |
---|---|---|
autoCompleteFontSize | number | Font Size used to display text. |
autoCompleteRegularFontName | string | Font used to display text. |
autoCompleteBoldFontName | string | Font used to display suggestion text. |
autoCompleteTableCellTextColor | color | Text Color used to display text. |
autoCompleteTableCellBackgroundColor | color | Background color of cells. |
applyBoldEffectToAutoCompleteSuggestions | bool | If false, disable bold effect on suggestion text. |
reverseAutoCompleteSuggestionsBoldEffect | bool | Reverse the bold effect. |
npm install react-native-autocomplete
And
npm install react-native-vector-icons –save
import React, { memo, useCallback, useRef, useState } from 'react' import { Button, Dimensions, Text, View, Platform, SafeAreaView, ScrollView, StatusBar, StyleSheet, useColorScheme, KeyboardAvoidingView, } from 'react-native' import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown' import Feather from 'react-native-vector-icons/Feather' Feather.loadFont() 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 ( <> <SafeAreaView style={{ flex: 1 }}> <StatusBar barStyle={'light-content'} /> <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : 'height'} enabled> <ScrollView nestedScrollEnabled keyboardDismissMode="on-drag" keyboardShouldPersistTaps="handled" contentInsetAdjustmentBehavior="automatic" contentContainerStyle={{ paddingBottom: 200 }} style={styles.scrollContainer}> <Text style={styles.sectionTitle}>Remote list customization 2</Text> <View style={[ { flex: 1, flexDirection: 'row', alignItems: 'center' }, Platform.select({ ios: { zIndex: 1 } }), ]}> <Button style={{ flexGrow: 0 }} title="Clear" onPress={() => dropdownController.current.clear()} /> <View style={{ width: 10 }} /> <AutocompleteDropdown ref={searchRef} closeOnBlur={false} direction={Platform.select({ ios: 'down' })} controller={controller => { dropdownController.current = controller }} dataSet={suggestionsList} onChangeText={getSuggestions} onSelectItem={item => { item && setSelectedItem(item.id) }} debounce={600} suggestionsListMaxHeight={Dimensions.get('window').height * 0.3} onClear={onClearPress} onSubmit={e => console.log(e.nativeEvent.text)} onOpenSuggestionsList={onOpenSuggestionsList} loading={loading} useFilter={false} // prevent rerender twice textInputProps={{ placeholder: 'Type 3+ letters (dolo...)', autoCorrect: false, autoCapitalize: 'none', style: { borderRadius: 25, color: '#383b42', paddingLeft: 18, }, }} rightButtonsContainerStyle={{ height: 30, alignSelf: 'center', }} inputContainerStyle={{ borderRadius: 25, backgroundColor: '#fff', borderWidth: 1, borderColor: '#383b42', shadowColor: '#00000099', shadowOffset: { width: 0, height: 5, }, shadowOpacity: 0.3, shadowRadius: 8.46, elevation: 13, }} suggestionsListContainerStyle={{ backgroundColor: '#fff', }} containerStyle={{ flexGrow: 1, flexShrink: 1 }} renderItem={(item, text) => { console.log(text) return <Text style={{ color: '#383b42', padding: 15 }}>{item.title}</Text> }} ChevronIconComponent={<Feather name="chevron-down" size={20} color="#383b42" />} ClearIconComponent={<Feather name="x-circle" size={18} color="#383b42" />} //inputHeight={50} // showChevron={false} showClear={false} /> </View> <Text style={{ color: '#668', fontSize: 13, marginTop: 15 }}> Selected item id: {JSON.stringify(selectedItem)} </Text> </ScrollView> </KeyboardAvoidingView> </SafeAreaView> </> ) }) const styles = StyleSheet.create({ scrollContainer: { flex: 1, padding: 20, }, sectionTitle: { fontWeight: 'bold', marginBottom: 3, }, }) export default RemoteDataSetExample2;
Coming Soon…
Quick Links
Legal Stuff