npm.io
1.0.0 • Published 6 years ago

npm-autocomplate-highlight-words

Licence
ISC
Version
1.0.0
Deps
0
Size
10 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

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!

Keywords

npmnpm-autocomplate-highlight-words