How to Add Tag Input in React Native ?

Tags are widely used for managing items or categories in UI. Adding a tag input feature in React Native allows users to dynamically add and remove tags, enhancing data organization and filtering in applications. In this article, we will see how we can add tag input in react native application.

We are going to create a dynamic tag input component in React Native that allows users to add, edit, and remove tags. We are focusing in creating an intuitive and visually appealing interface for efficient tag management within our app.

Prerequisites:

• Introduction to React Native
• React Native Components
• Expo CLI
• Node.js and npm (Node Package Manager)

Setting up React Native Project:

Step 1: Set Up the Development Environment

Install Expo CLI globally by running this command:

npm install -g expo-cli​

Step 2: Create React Native Application With Expo CLI

Create a new native project with Expo CLI by using this command:

expo init tag-input

Step 3: ​Navigate to project directory by using this command:

cd tag-input​

Project Structure:

Approach:

In this approach, we will first create a TagInput component to handle the tags input and then manage state variables for tags and input text. Then, we finally integrate TagInput component into the screen or application.

Example:

App.js file

Javascript

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity,
    StyleSheet } from 'react-native';

const TagInputComponent = () => {
    const [tags, setTags] = useState([]);
    const [text, setText] = useState('');
    const [editIndex, setEditIndex] = useState(null);

    const addTag = () => {
        if (text.trim() !== '') {
            if (editIndex !== null) {

                // If editing an existing tag
                const newTags = [...tags];
                newTags[editIndex] = text.trim();
                setTags(newTags);
                setEditIndex(null);
            } else {

                // If adding a new tag
                setTags([...tags, text.trim()]);
            }
            setText('');
        }
    };

    const removeTag = (index) => {
        const newTags = [...tags];
        newTags.splice(index, 1);
        setTags(newTags);
    };

    const editTag = (index) => {
        const tagToEdit = tags[index];
        setText(tagToEdit);
        setEditIndex(index);
    };

    return (
        <View style={styles.container}>
            <View style={styles.tagContainer}>
                {tags.map((tag, index) => (
                    <View key={index}
                        style={styles.tagWrapper}>
                        <TouchableOpacity
                            onPress={() => editTag(index)}
                            style={styles.tag}>
                            <Text style={styles.tagText}>
                                {tag}
                            </Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={() => removeTag(index)}
                            style={styles.removeButton}>
                            <Text style={styles.removeButtonText}>
                                X
                            </Text>
                        </TouchableOpacity>
                    </View>
                ))}
            </View>
            <View style={styles.inputContainer}>
                <TextInput
                    style={styles.input}
                    placeholder="Add a tag"
                    value={text}
                    onChangeText={setText}
                    onSubmitEditing={addTag}
                />
                <TouchableOpacity onPress={addTag}
                    style={styles.addButton}>
                    <Text style={styles.buttonText}>
                        {editIndex !== null ? 'Update' : 'Add'}
                    </Text>
                </TouchableOpacity>
            </View>
        </View>
    );
};

const App = () => {
    return (
        <View style={styles.appContainer}>
            <TagInputComponent />
        </View>
    );
};

const styles = StyleSheet.create({
    appContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
        backgroundColor: '#F5F5F5',
    },
    container: {
        width: '100%',
        paddingHorizontal: 20,
    },
    tagContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginBottom: 10,
    },
    tagWrapper: {
        flexDirection: 'row',
        alignItems: 'center',
        marginVertical: 5,
        marginRight: 5,
    },
    tag: {
        backgroundColor: '#ccc',
        borderRadius: 20,
        paddingHorizontal: 10,
        paddingVertical: 5,
    },
    tagText: {
        color: 'black',
        fontWeight: 'bold',
        fontSize: 17,
    },
    removeButton: {
        marginLeft: 5,
        padding: 5,
        borderRadius: 10,
        backgroundColor: '#E53935',
    },
    removeButtonText: {
        color: '#FFFFFF',
        fontSize: 18,
    },
    inputContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    input: {
        flex: 1,
        height: 40,
        borderColor: '#CCCCCC',
        borderWidth: 1,
        paddingHorizontal: 10,
        borderRadius: 5,
        marginRight: 10,
        backgroundColor: '#FFFFFF',
    },
    addButton: {
        backgroundColor: '#4CAF50',
        paddingHorizontal: 15,
        paddingVertical: 10,
        borderRadius: 5,
    },
    buttonText: {
        color: '#FFFFFF',
        fontSize: 16,
        fontWeight: 'bold',
    },
});

export default App;

Explanation:

• Import necessary React and React Native dependencies.
• Define the TagInputComponent function component to manage tags, text input, and edited tag index.
• Implement addTag function to add new tags or update existing tags.
• Create removeTag function to remove tags based on their index.
• Implement editTag functi​on to enable editing of existing tags.
• Define component rendering logic using React Native components and styles.
• Use TagInputComponent within the root App component.
• Define custom styles using StyleSheet.create method.

Start the React Native Application:

Run the following command:

To run on Expo:

npx expo start

To run on Android:

npx react-native run-android

To run on iOS:

npx react-native run-ios

Output: