Create a Chatbot App using React-Native

Creating a chatbot app using React Native will be an exciting project. In this article, we are going to implement a Chatbot App using React Native. Chatbot App is a mobile application that answers the user’s questions on the basis of their previous learning or content provided by developers.

It helps to reduce the cost of the workforce in companies because companies design the chatbot to solve the problems of users.

Preview of final output: Let us have a look at how the final output will look like.

preview of the app

Prerequisite:

• React Native
• React Native State
• React Native Props

Approach:

• This app answers the questions asked by users.
• We used the react-native-gifted-chat package in the app because it is a popular open-source library for implementing a chat interface in React Native applications.
• It simplifies the process of building chat features by providing pre-built components and functionality.

Steps to Create React Native Application:

Step 1: Create a react native application by using this command in the command prompt

React-native init ChatbotApp

Step 2: After initiating the project, install the react-native-gifted-chat package to view the Chatbot format.

npm i react-native-gifted-chat

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "react-native-elements": "0.18.5",
    "react-native-gifted-chat": "*"
}

Example: Write the below source code into the App.js file.

Javascript

//App.js

import React from 'react';
import { SafeAreaView, Text } from 'react-native';
import ChatbotApp from './ChatbotApp';

const App = () => {
    return (
        <SafeAreaView style={{ flex: 1 }}>

            <Text
                style={{
                    marginLeft: 23,
                    fontSize: 20,
                    marginTop: 20,
                    fontWeight: 'bold',
                    color: 'green',
                    backgroundColor: 'yellow',
                    marginRight: 30
                }}>
                GeekforGeeks ChatBot App</Text>

            <ChatbotApp />
        </SafeAreaView>
    );
};

export default App;

Javascript

//ChatbotApp.js

import React, { useState } from "react";
import { GiftedChat } from "react-native-gifted-chat";

const ChatbotApp = () => {
    const [messages, setMessages] = useState([
        {
            _id: 1,
            text: "Hello! I am your GFG chatbot. How can I help you?",
            createdAt: new Date(),
            user: { _id: 2, name: "Chatbot" },
        },
    ]);

    const handleSend = (newMessages = []) => {
        setMessages((previousMessages) =>
            GiftedChat.append(previousMessages, newMessages)
        );

        const userMessage = newMessages[0].text;
        const botResponse = generateChatbotResponse(userMessage);

        setMessages((previousMessages) =>
            GiftedChat.append(previousMessages, [
                {
                    _id: Math.round(Math.random() * 1000000),
                    text: botResponse,
                    createdAt: new Date(),
                    user: { _id: 2, name: "Chatbot" },
                },
            ])
        );
    };

    const generateChatbotResponse = (userMessage) => {
        switch (userMessage.toLowerCase()) {
            case "hello":
                return "Hi there! How can I assist you today?";
            case "how are you":
                return "I am just a chatbot, but thanks for asking!";
            case "bye":
                return "Goodbye! If you have more questions, feel free to ask.";
            case "javascript":
                return "JavaScript is a programming language commonly used to create interactive effects within web browsers.";
            case "python":
                return "Python is a versatile and easy-to-read programming language often used for web development, data analysis, and artificial intelligence.";
            case "html":
                return "HTML (Hypertext Markup Language) is the standard markup language for documents designed to be displayed in a web browser.";
            case "css":
                return "CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of a document written in HTML.";
            case "git":
                return "Git is a distributed version control system used to track changes in source code during software development.";
            case "api":
                return "An API (Application Programming Interface) is a set of rules that allows one software application to interact with another.";
            case "algorithm":
                return "An algorithm is a step-by-step procedure or formula for solving a problem or accomplishing a task in computer science.";
            case "database":
                return "A database is an organized collection of data, typically stored and accessed electronically from a computer system.";

            default:
                return "I'm sorry, I didn't understand that. Can you please rephrase?";
        }
    };

    return (
        <GiftedChat
            messages={messages}
            onSend={(newMessages) => handleSend(newMessages)}
            user={{ _id: 1, name: "User" }}
        />
    );
};

export default ChatbotApp;

Step to run the Project:

Step 1: Depdending on your opearting system, type the following command in terminal.

For android:

React-native run-android

For IOS:

React-native run-ios

Output: