Npm-autocomplate-highlight-words NPM

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!

npm npm-autocomplate-highlight-words

@infinitebrahmanuniverse/nolb-npm-a @everything-registry/sub-chunk-2336

1.0.0

4 years ago