react-native-autocomplete-input

react-native-autocomplete-input

This is a pure javascript react-native component to display autocomplete suggestions given an array of objects respective to the input text.

How to use react-native-autocomplete-input

Tested with RN >= 0.26.2. If you want to use RN < 0.26 try to install react-native-autocomplete-input <= 0.0.5.

Fist things first install the component from npmjs.org:

$ npm install --save react-native-autocomplete-input

or install HEAD from github.com:

$ npm install --save l-urence/react-native-autocomplete-input

This brief example should illustrate the usage of the autocomplete:

// ...
render() { 
  const { query } = this.state;
  const data = this._filterData(query)
  <Autocomplete
    data={data}
    defaultValue={query}
    onChangeText={text => this.setState({query: text})}
    renderItem={data => (
      <TouchableOpacity onPress={() => 
          this.setState({query: data})
        }
      >
        <Text>{data}</Text>
      </TouchableOpacity>
    )}
  />
}
// ... 

The full example from the screenshot can be found here

react-native-autocomplete-input props

Prop	Type	Description
containerStyle	style	These styles will be applied to the container which surrounds the autocomplete component.
inputContainerStyle	style	These styles will be applied to the container which surrounds the textInput component.
style	style	These styles will be applied to the textInput component.
data	array	Assign an array of data objects which should be rendered in respect to the entered text.
listStyle	style	These style will be applied to the result list view.
renderItem	function	renderItem will be called to render the data objects which will be displayed in the result view below the text input.
onShowResult	function	onShowResult will be called when the autocomplete suggestions appear or disappear.

Contribute

Feel free to open issues or do a PR!