npm-autocomplate-highlight-words

How to use npm-autocomplate-highlight-words

Tested with RN >= 0.26.2. If you want to use RN < 0.26 try to install npm-autocomplate-highlight-words <= 0.0.5.

Installation

$ npm install --save npm-autocomplate-highlight-words

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

// ...

//...

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

| Prop | Type | Description | | :------------ |:---------------:| :-----| | containerStyle | style | These styles will be applied to the container which surrounds the autocomplete component. | | hideResults | bool | Set to true to hide the suggestion list. | data | array | An 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. | | inputContainerStyle | style | These styles will be applied to the container which surrounds the textInput component. | | listContainerStyle | style | These styles will be applied to the container which surrounds the result list. | | listStyle | style | These style will be applied to the result list. | | onShowResult | function | onShowResult will be called when the autocomplete suggestions appear or disappear. | | onStartShouldSetResponderCapture | function | onStartShouldSetResponderCapture will be passed to the result list view container (onStartShouldSetResponderCapture). | | renderItem | function | renderItem will be called to render the data objects which will be displayed in the result view below the text input. | | keyExtractor | function | keyExtractor(item, i) will be called to get key for each item. It's up to you which string to return as a key. | | renderSeparator | function | renderSeparator will be called to render the list separators which will be displayed between the list elements in the result view below the text input. | | renderTextInput | function | render custom TextInput. All props passed to this function. | | flatListProps | object | custom props to FlatList]. |

Contribute

Feel free to open issues or do a PR!