A pure JS autocomplete component for React Native. Use this component in your own projects or use it as inspiration to build your own autocomplete.

Play around with the Example Snack

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

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

or install HEAD from github.com:

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

// ...

render() {
  const { query } = this.state;
  const data = filterData(query);
  return (
    <Autocomplete
      data={data}
      value={query}
      onChangeText={(text) => this.setState({ query: text })}
      flatListProps={{
        keyExtractor: (_, idx) => idx,
        renderItem: ({ item }) => <Text>{item}</Text>,
      }}
    />
  );
}

// ...

Android does not support overflows (#20), for that reason it is necessary to wrap the autocomplete into a absolute positioned view on Android. This will allow the suggestion list to overlap other views inside your component.

//...

render() {
  return(
    <View>
      <View style={styles.autocompleteContainer}>
        <Autocomplete {/* your props */} />
      </View>
      <View>
        <Text>Some content</Text>
      </View>
    </View>
  );
}

//...

const styles = StyleSheet.create({
  autocompleteContainer: {
    flex: 1,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    zIndex: 1
  }
});

• By default the autocomplete will not behave as expected inside a <ScrollView />. Set the scroll view's prop to fix this: keyboardShouldPersistTaps={true} for RN <= 0.39, or keyboardShouldPersistTaps='always' for RN >= 0.40. (#5). Alternatively, you can use renderResultList to render a custom result list that does not use FlatList. See the tests for an example.
• If you want to test with Jest add jest.mock('react-native-autocomplete-input', () => 'Autocomplete'); to your test.

Feel free to open issues or do a PR!