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 | | :----------------- | :------: | :------: | :----------------------------------------------------------------------------------------------- | | suggestions | array | yes | Array of suggestion objects. They must have a 'name' prop if not overriding filter && renderTags | | 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 | | renderTags | function | no | Override the render tags and it's styles | | renderSuggestion | function | no | Override the suggestions dropdown items | | filterData | function | no | Override the search function, allows you to filter by props other than name | | 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). |

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.