react-native-autotags v0.0.1

This package is a quick fix for a project. All rights reserved to Andreas Raduege. Github: https://github.com/Eldjotnar

react-native-autocomplete-tags

A quick and easy solutions for projects that need an input with both autocomplete and tags

Features

• custom tag and suggestions
• fully style-able
• extractors for tags and for suggestions
• easy to integrate and use
• controlled text input

Installation

yarn add react-native-autocomplete-tags

or

npm install react-native-autocomplete-tags --save

Dependency

Requires RN >= 0.59

Useage

Also see the demo projects

const suggestions = [
  { name: "Boris Yeltsin", email: "boris.yeltsin@abc.com" },
  { name: "Tom Boboby", email: "tom.boboy@abc.com" }
];

const Demo = () => {
  const [text, setText] = useState("");
  const [tags, setTags] = useState([
    { name: "Fred Hendriks", email: "fred.hendricks@abc.com" }
  ]);

  const onChangeText = text => {
    setText(text);

    const lastTyped = text.charAt(text.length - 1);
    const parseWhen = [",", " ", ";", "\n"];

    if (parseWhen.indexOf(lastTyped) > -1) {
      setTags(tags => [...tags, { name: text, email: text }]);
      setText("");
    }
  };

  const handleSuggestionPress = suggestion => {
    setText("");
    setTags(tags => [...tags, suggestion]);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.rowContainer}>
        <Text>To: </Text>
        <AutocompleteTags
          tags={tags}
          labelExtractor={item => item.name}
          text={text}
          onChangeText={onChangeText}
          onChangeTags={tags => setTags(tags)}
          suggestions={suggestions}
          suggestionExtractor={item => item.email}
          onSuggestionPress={handleSuggestionPress}
        />
      </View>
    </SafeAreaView>
  );
};

Props

Style Props

No style props are required.

Contributing

PRs and issues welcome!