A react native component to implement autocomplete input

A react native component to implement autocomplete input

react-native-autocomplete-input

npm version Build Status

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.

Autocomplete Example

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.

Installation

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

or install HEAD from github.com:

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

Example

// ...

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

// ...

A complete example for Android and iOS can be found here.

Android

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
  }
});

Props

PropTypeDescription
containerStylestyleThese styles will be applied to the container which surrounds the autocomplete component.
hideResultsboolSet to true to hide the suggestion list.
dataarrayAn array with suggestion items to be rendered in renderItem({ item, i }). Any array with length > 0 will open the suggestion list and any array with length < 1 will hide the list.
inputContainerStylestyleThese styles will be applied to the container which surrounds the textInput component.
listContainerStylestyleThese styles will be applied to the container which surrounds the result list.
listStylestyleThese style will be applied to the result list.
onShowResultfunctiononShowResult will be called when the autocomplete suggestions appear or disappear.
onStartShouldSetResponderCapturefunctiononStartShouldSetResponderCapture will be passed to the result list view container (onStartShouldSetResponderCapture).
renderItemfunctionrenderItem will be called to render the data objects which will be displayed in the result view below the text input.
keyExtractorfunctionkeyExtractor(item, i) will be called to get key for each item. It's up to you which string to return as a key.
renderSeparatorfunctionrenderSeparator will be called to render the list separators which will be displayed between the list elements in the result view below the text input.
renderTextInputfunctionrender custom TextInput. All props passed to this function.
flatListPropsobjectcustom props to FlatList].

Known issues

  • 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).
  • If you want to test with Jest add jest.mock('react-native-autocomplete-input', () => 'Autocomplete'); to your test.

Contribute

Feel free to open issues or do a PR!

Check it on GitHub