# react-native-autotags

> Autocomplete text input with tags

Latest version **0.0.1** (published 2020-07-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-autotags
pnpm add react-native-autotags
yarn add react-native-autotags
bun add react-native-autotags
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-07-15 |
| First published | 2020-07-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 339.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | todeschini |
| Keywords | react-native, react-component, react-native-component, react, react native, mobile, ios, android, text input, tags, autocomplete, input, email |

## Links

- npm: https://www.npmjs.com/package/react-native-autotags
- Repository: https://github.com/brunotodeschini/react-native-autocomplete-tags
- Homepage: https://github.com/brunotodeschini/react-native-autocomplete-tags#readme
- Issues: https://github.com/brunotodeschini/react-native-autocomplete-tags/issues
- npm.io page: https://npm.io/package/react-native-autotags

## Alternatives

- [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads
- [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads
- [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads
- [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads
- [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2020-07-15

## README

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

<img src="example.gif" style="max-width: 500px">

## 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](demo/demo.js)

```jsx
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

| Prop                      | type              | Description                                                          | required | default                  |
| ------------------------- | ----------------- | -------------------------------------------------------------------- | -------- | ------------------------ |
| **`tags`**                | `array` of any    | The current tags to be rendered                                      | `true`   |                          |
| **`labelExtractor`**      | `function`        | Determines what property of `tags` is displayed                      | `true`   |                          |
| **`text`**                | `string`          | value of `TextInput`                                                 | `true`   |                          |
| **`onChangeText`**        | `function`        | called when `text` changes, should also handle tag creation          | `true`   |                          |
| **`onChangeTags`**        | `function`        | called when tags change (i.e. by deleting), should just write `tags` | `true`   |                          |
| **`minInputWidth`**       | `number`          | minimum width of `TextInput` before jumping to new line              | `false`  | `100`                    |
| **`suggestions`**         | `array` of any    | All possible suggestions                                             | `false`  | `[]`                     |
| **`suggestionExtractor`** | `function`        | determines which property of `suggestions` is displayed              | `false`  | same as `labelExtractor` |
| **`onSuggestionPress`**   | `function`        | called when suggestion is pressed                                    | `false`  | `null`                   |
| **`onTagPress`**          | `function`        | called when tag is pressed                                           | `false`  | `null`                   |
| **`renderSuggestion`**    | `function`        | renders a custom suggestion item                                     | `false`  | `null`                   |
| **`renderTag`**           | `function`        | renders a custom tag                                                 | `false`  | `null`                   |
| **`filterSuggestions`**   | `function`        | filters suggestions based on `text` (receives `text` as parameter)   | `false`  | `null`                   |
| **`inputProps`**          | `TextInput` props | any additional props for `TextInput`                                 | `false`  | `null`                   |
| **`flatListProps`**       | `FlatList` props  | any additional props for `FlatList`                                  | `false`  | `null`                   |

### Style Props

No style props are required.

| Prop                           | Description                                                                              |
| ------------------------------ | ---------------------------------------------------------------------------------------- |
| **`containerStyle`**           | The outmost container which contains the `TextInput` and the `FlatList` of `suggestions` |
| **`tagContainerStyle`**        | Container for the `tags` and the `TextInput`                                             |
| **`inputContainerStyle`**      | Container around the `TextInput`                                                         |
| **`inputStyle`**               | Applied to the `TextInput` directly                                                      |
| **`tagStyle`**                 | Applied to each tag                                                                      |
| **`tagTextStyle`**             | Applied to the tag label                                                                 |
| **`suggestionStyle`**          | Applied to each suggestion                                                               |
| **`suggestionContainerStyle`** | Applied to the `FlatList` which renders `suggestions`                                    |
| **`suggestionTextStyle`**      | Applied to the suggestion label                                                          |

## Contributing

PRs and issues welcome!

---
_Source: https://npm.io/package/react-native-autotags · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._