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
Create a Portfolio App using React-Native In this article, we are going to Create a portfolio app using React Native. The portfolio app is a simple application that is a collection of a person's qualifications, achievements, work samples, and other relevant materials. It is used to demonstrate one's abilities and suitability for a particula
5 min read
Create a Text Narrator App using React-Native In this project, we'll develop a Text Narrator application using React Native. The Text Narrator app is a valuable tool for improving accessibility. It allows users to input text, and the app will convert that text into audible speech. This can be incredibly helpful for individuals with visual impai
2 min read
Create a Voice Notes App using React-Native We are going to build a Voice Notes app that will allow us to save our voice as a recording in our application. It is similar to a notes app but we will have our voice as notes. We can play the voice recordings, record them, and delete them. It leverages React-Native's cross-platform capabilities to
4 min read
Create a Phonebook and Call App using React-Native React-Native is an open-source framework used to develop cross-platform applications i.e., you can write code in React-Native and publish it as an Android or IOS app. In this article, we will build a basic Phonebook and call app using React-Native. The phonebook app will show all the contacts from t
5 min read
Clipboard App using React-Native In this tutorial, we will create a stylish clipboard app using React Native. The app allows users to copy text to the clipboard, paste text from the clipboard, and display a stylish popup message to indicate successful copy or paste actions. Preview of final output: Let us have a look at how the fin
3 min read