rn-tags-input

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

Npm repo

https://www.npmjs.com/package/rn-tags-input

Git repo

https://github.com/JohnnyScript/rn-tags-input

Getting started

$ yarn add rn-tags-input

Standard example

1import React, { Component } from 'react';
2import {
3  Dimensions,
4  StyleSheet,
5  View
6} from 'react-native';
7
8import TagInput from 'rn-tags-input';
9
10export default class App extends React.Component {
11  constructor(props) {
12    super(props);
13    this.state = {
14      tags: {
15        tag: '',
16        tagsArray: []
17      },
18    };
19  }
20  
21  updateTagState = (state) => {
22      this.setState({
23        tags: state
24      })
25    };
26
27  render() {
28    return (
29      <View style={styles.container}>
30        <TagInput
31          updateState={this.updateTagState}
32          tags={this.state.tags}
33          />
34      </View>
35    );
36  }
37}
38
39const styles = StyleSheet.create({
40  container: {
41    flex: 1,
42    justifyContent: 'center',
43    alignItems: 'center',
44  },
45});

Custom example

1import React, { Component } from 'react';
2import {
3  Dimensions,
4  StyleSheet,
5  View
6} from 'react-native';
7import {Icon} from 'react-native-elements';
8
9import TagInput from 'rn-tags-input';
10
11const mainColor = '#3ca897';
12
13export default class App extends React.Component {
14  constructor(props) {
15    super(props);
16    this.state = {
17      tags: {
18        tag: '',
19        tagsArray: []
20      },
21      tagsColor: mainColor,
22      tagsText: '#fff',
23    };
24  }
25  
26  updateTagState = (state) => {
27      this.setState({
28        tags: state
29      })
30    };
31
32  render() {
33    return (
34      <View style={styles.container}>
35        <TagInput
36          updateState={this.updateTagState}
37          tags={this.state.tags}
38          placeholder="Tags..."                            
39          label='Press comma & space to add a tag'
40          labelStyle={{color: '#fff'}}
41          leftElement={<Icon name={'tag-multiple'} type={'material-community'} color={this.state.tagsText}/>}
42          leftElementContainerStyle={{marginLeft: 3}}
43          containerStyle={{width: (Dimensions.get('window').width - 40)}}
44          inputContainerStyle={[styles.textInput, {backgroundColor: this.state.tagsColor}]}
45          inputStyle={{color: this.state.tagsText}}
46          onFocus={() => this.setState({tagsColor: '#fff', tagsText: mainColor})}
47          onBlur={() => this.setState({tagsColor: mainColor, tagsText: '#fff'})}
48          autoCorrect={false}
49          tagStyle={styles.tag}
50          tagTextStyle={styles.tagText}
51          keysForTag={', '}/>
52      </View>
53    );
54  }
55}
56
57const styles = StyleSheet.create({
58  container: {
59    flex: 1,
60    justifyContent: 'center',
61    alignItems: 'center',
62    backgroundColor: mainColor,
63  },
64  textInput: {
65      height: 40,
66      borderColor: 'white',
67      borderWidth: 1,
68      marginTop: 8,
69      borderRadius: 5,
70      padding: 3,
71    },
72    tag: {
73        backgroundColor: '#fff'
74      },
75    tagText: {
76        color: mainColor
77      },
78});

Contributing

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

License

rn-tags-input is MIT License @ Johnny Pacheco