Create a Chatbot App using React-Native
Last Updated :
25 Jul, 2024
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 appPrerequisite:
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:
Similar Reads
Create a Blog App using React-Native This article will help you make a simple blog app using React Native. The app lets users add, edit, and delete blog posts, making it easy to manage content. You will learn how to use different React Native features to create a user-friendly design that checks if the input is correct, making sure all
15+ min read
Create a Calling App using React-Native Building a Calling App using React-Native allows you to create a cross-platform application that supports voice calling. This tutorial will guide you through the process of integrating voice calling functionality into a React-Native app, enabling users to make and receive calls seamlessly.Preview of
4 min read
Create ClassRoom App using React-Native ClassRoom App using React Native is a simple application designed to facilitate online learning and classroom management. These apps are commonly used in educational institutions, schools, colleges, and universities to enhance the teaching and learning experience.Preview of final output: Let us have
7 min read
Create an E-commerce App using React-Native An E-commerce app using react native is an application designed to facilitate online buying and selling of goods and services. These apps aim to provide a digital platform for businesses to showcase their products or services and for consumers to browse, compare, and purchase items without the need
12 min read
Create Job Board App using React-Native In this article, we are going to Create a Job Board App using React Native. The Job Board App is a simple application that is a collection of job openings in any field. It helps the students and the people who are searching for jobs in the market. It helps to find jobs and provides in-depth informat
6 min read