react-native-tag-autocomplete

Tag autocomplete component for contacts, groups, etc.

Up and Running

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

Example

//...
import AutoTags from 'react-native-tag-autocomplete';
// ...
state = {
    suggestions : [ {name:'Mickey Mouse'}, ],
    tagsSelected : []
}

handleDelete = index => {
   let tagsSelected = this.state.tagsSelected;
   tagsSelected.splice(index, 1);
   this.setState({ tagsSelected });
}

handleAddition = suggestion => {
   this.setState({ tagsSelected: this.state.tagsSelected.concat([suggestion]) });
}

render() {
  return (
      <AutoTags
            suggestions={this.state.suggestions}
            tagsSelected={this.state.tagsSelected}
            handleAddition={this.handleAddition}
            handleDelete={this.handleDelete}
            placeholder="Add a contact.." />
    );
}
// ...

Props

Prop	Type	Required	Description
tagsSelected	array	yes	List of tags that have already been selected
handleAddition	function	yes	Handler for when suggestion is selected (normally just push to tagsSelected)
handleDelete	function	yes	Handler called with index when tag is clicked
placeholder	string	no	Input placeholder
placeholderTextColor	string	no	Set input placeholder text color
renderTags	function	no	Override the render tags and it's styles
renderSuggestion	function	no	Override the suggestions dropdown items
onCustomTagCreated	function	no	Function called with user input when user presses enter
createTagOnSpace	boolean	no	calls onCustomTagCreated when user presses space
tagStyles	object	no	Override the default tag styling
tagsOrientedBelow	boolean	no	Move tags below the input instead of above (default)
onInputChangeText	function	no	Function callback ((text, onSuccess, onError) => {}) when user has finish typing
inputStyle	object	no	Override the default input text styling
flatListProps	object	no	Set other props on suggestion FlatList
debounceTimer	number	no	Override the default debounce timer (Default at 200 milliseconds)
(Deprecated) suggestions	array	yes	Array of suggestion objects. They must have a 'name' prop if not overriding filter && renderTags
(Deprecated) filterData	function	no	Override the search function, allows you to filter by props other than name

Android

This repository wraps react-native-autocomplete-input, so their limitations will also apply here.

As such:

"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}>
        <AutoTags {/* 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
  }
});

Pull Requests

I'm a dummy, so any PR's are wholly appreciated <3.