TagTestApp.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import TagInput from 'react-native-tag-input'
import _ from 'lodash'


export default class App extends Component {
    constructor() {
        super();
        this.state = {text: '', emails: []}
    }
    render() {
        return (
            <View style={{flex: 1}}>
                <View style={{margin: 50, borderWidth: 3, height: 80}}>
                    <TagInput
                        value={this.state.emails}
                        onChange={(emails) => {
                            this.setState({ emails });
                        }}
                        text={this.state.text}
                        labelExtractor={(email) => email
                        }
                        onChangeText={(newText) => {
                            let possibleEmails = newText.split(/[;, ]/);
                            // email validation code here
                            if (possibleEmails.length > 1) {
                                if (possibleEmails.length > 2) {
                                    possibleEmails = possibleEmails
                                        .filter(a => !!a)
                                }
                                const newEmails = _.uniq([...this.state.emails].concat(possibleEmails.filter(e => !!e.trim())));
                                this.setState({ text: '', emails: newEmails });
                            }
                            else this.setState({ text: newText.trim() });
                        }}
                        tagContainerStyle={{
                            height: undefined,
                            padding: 0
                        }}
                        style= {{paddingTop: 13, paddingLeft: 5, width: this.state.emails.length ? undefined : 220}}
                        inputProps={{
                            keyboardType: 'email-address',
                            blurOnSubmit: true,
                            onBlur: () => {
                                let possibleEmails = this.state.text.split(/[;, ]/).filter(e => !!e.trim());
                                const newEmails = _.uniq([...this.state.emails].concat(possibleEmails));
                                this.setState({ text: '', emails: newEmails });
                            },
                            placeholder: !this.state.emails.length ? 'Not listed above? Invite by email' : ''
                        }}
                    />
                </View>

            </View>
        );
    }
}