# react-native-tags-input

> Input component for React Native to add and remove tags.

Latest version **1.0.10** (published 2020-04-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-tags-input
pnpm add react-native-tags-input
yarn add react-native-tags-input
bun add react-native-tags-input
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2020-04-28 |
| First published | 2019-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 16.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 82 |
| Author | jimmybengtsson |
| Maintainers | jimmybengtsson |
| Keywords | react, native, tags, chips, input, form |

## Links

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

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.10 (latest) — 2020-04-28
- 1.0.9 — 2020-03-26
- 1.0.8 — 2020-03-26
- 1.0.7 — 2020-01-03
- 1.0.6 — 2019-12-18
- 1.0.5 — 2019-10-06
- 1.0.4 — 2019-10-05
- 1.0.3 — 2019-10-05
- 1.0.2 — 2019-09-25
- 1.0.1 — 2019-09-24
- 1.0.0 — 2019-09-24

## README

# react-native-tags-input


Fully customizable React Native input-component to add tags to an array. The tags are displayed as chips that can be deleted.

<img src="https://raw.githubusercontent.com/jimmybengtsson/react-native-tags-input/master/githubImage/react-native-tags-input.gif"/>

## Npm repo
https://www.npmjs.com/package/react-native-tags-input

## Git repo
https://github.com/jimmybengtsson/react-native-tags-input

## Getting started
`$ npm install react-native-tags-input --save`

## Props
|    | necessary | types | about
|----|-----|-----|---------|
|tags| ✓ | object | Object containing a empty string called **tag** and a empty array called **tagsArray**|
|updateState| ✓ | func | Function to pass for component to be able to update parents state |
|keysForTag|    |string|String to decide when a tag will be added. **Space** for standard|
|containerStyle|  | styles | Styles for the most outer view component |
|label|  |string|Text to appear on top of input|
|labelStyle|   |styles|Styles for label text|
|inputContainerStyle|  | styles | Styles for the outer input component |
|inputStyle|  | styles | Styles for the inner input component |
|leftElement| |element|Element to be passed to input. Such as an icon.|
|leftElementContainerStyle|  | styles | Styles for the left element inside input |
|rightElement| |element|Element to be passed to input. Such as an icon.|
|rightElementContainerStyle|  | styles | Styles for the right element inside input |
|tagsViewStyle|  | styles | Styles for the view component containing the tag-chips |
|tagStyle|  | styles | Styles for the tag-chips |
|tagTextStyle|  | styles | Styles for the text inside a tag-chip |
|disabled| |boolean|Active input or not? **false** for standard|
|disabledInputStyle|  |styles| Styles for when the input is disabled|
|deleteElement| |element|If this is included, the delete icon will be replaced by the element provided. (Thanks to periabyte)|
|deleteIconStyles| |styles|Styles for the delete icon|
|customElement| |element|Element to be displayed between input and tags. For example suggestions. (Auto suggestions will be implemented in a future release)|

> This component also inherits
> [all native TextInput props that come with a standard React Native TextInput element](https://facebook.github.io/react-native/docs/textinput.html).

## Examples

[Standard and Custom example](https://github.com/jimmybengtsson/react-native-tags-input/tree/master/example/StandardAndCustomExample)

[Auto suggest example by using customElement-prop](https://github.com/jimmybengtsson/react-native-tags-input/tree/master/example/AutoSuggestExample)


## Standard example

<img src="https://raw.githubusercontent.com/jimmybengtsson/react-native-tags-input/master/githubImage/StandardExample.gif"/>

```javascript
import React, { Component } from 'react';
import {
  Dimensions,
  StyleSheet,
  View
} from 'react-native';

import TagInput from 'react-native-tags-input';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tags: {
        tag: '',
        tagsArray: []
      },
    };
  }
  
  updateTagState = (state) => {
      this.setState({
        tags: state
      })
    };

  render() {
    return (
      <View style={styles.container}>
        <TagInput
          updateState={this.updateTagState}
          tags={this.state.tags}
          />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
```

## Custom example

<img src="https://raw.githubusercontent.com/jimmybengtsson/react-native-tags-input/master/githubImage/react-native-tags-input.gif"/>

```javascript
import React, { Component } from 'react';
import {
  Dimensions,
  StyleSheet,
  View
} from 'react-native';
import {Icon} from 'react-native-elements';

import TagInput from 'react-native-tags-input';

const mainColor = '#3ca897';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tags: {
        tag: '',
        tagsArray: []
      },
      tagsColor: mainColor,
      tagsText: '#fff',
    };
  }
  
  updateTagState = (state) => {
      this.setState({
        tags: state
      })
    };

  render() {
    return (
      <View style={styles.container}>
        <TagInput
          updateState={this.updateTagState}
          tags={this.state.tags}
          placeholder="Tags..."                            
          label='Press comma & space to add a tag'
          labelStyle={{color: '#fff'}}
          leftElement={<Icon name={'tag-multiple'} type={'material-community'} color={this.state.tagsText}/>}
          leftElementContainerStyle={{marginLeft: 3}}
          containerStyle={{width: (Dimensions.get('window').width - 40)}}
          inputContainerStyle={[styles.textInput, {backgroundColor: this.state.tagsColor}]}
          inputStyle={{color: this.state.tagsText}}
          onFocus={() => this.setState({tagsColor: '#fff', tagsText: mainColor})}
          onBlur={() => this.setState({tagsColor: mainColor, tagsText: '#fff'})}
          autoCorrect={false}
          tagStyle={styles.tag}
          tagTextStyle={styles.tagText}
          keysForTag={', '}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: mainColor,
  },
  textInput: {
      height: 40,
      borderColor: 'white',
      borderWidth: 1,
      marginTop: 8,
      borderRadius: 5,
      padding: 3,
    },
    tag: {
        backgroundColor: '#fff'
      },
    tagText: {
        color: mainColor
      },
});
```

## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## License
react-native-tags-input is [MIT](https://choosealicense.com/licenses/mit/) License @ Jimmy Bengtsson

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