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.

First 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

Android

On Android please install the v.1.1.2 release. The v2.0.0 release don’t show the suggestion list correctly because RN for Android doesn’t support overflows (see #20).

$ npm install --save [email protected]

Example

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

Contribute

Feel free to open issues or do a PR!