How To Create A Simple React Native Chat App With Firebase?

By Author: Ash Rakars
Total Articles: 308
Comment this article

In the year 2020, React Native has upgraded in several ways and with such amazing enhancements, React Native development companies are providing much better software applications to their clients than ever.

So in this article, we are going to get familiar with these latest updates in the React Native framework while developing a simple React Native Chat App. This chat app will allow the users to easily login with their credentials, upload their pictures, and enter the chat-room to start the conversations in real-time. We will use Firebase and Expo as the backend service for its development. Firebase is Google’s cloud service and in this application, it will be used for cloud storage and email authentication. We will also require different services from Firebase like below for building this project:

• Services for user authentication ...
...
• For storing the user's email address
• For storing the user's avatar image
• For storing the messages

Procedure to Create React Native Chat App with Firebase

Installations and Setups before Mobile App Development

Dependencies’ Installation:

The first step that React Native developers need to follow is to install Expo CLI on your local machine by using the appropriate commands from the terminal. Then generate a new project and then run this project on the Android emulator or iOS simulator, depending on what platform you choose to develop your app on. Now install “react-native-gifted-chat” which is a dependency for providing a customizable User Interface. For navigations, we will use react-navigation and Firebase SDK to connect with the Firebase project.

Firebase Setup:

For setting up a free project of Firebase, you need to create a new project by visiting the Firebase console. Now you need to enter the project name and then click on “Create Project” button. You will land on a home screen. You will find the main navigation on the side menu bar located on the left side. To enable authentication, go to the Develop section. First, click on the Authentication tab and then, click on the Sign-in method. After this enter your Email and Password to Enable authentication and then save the details.

Firebase Database Setup:

Now select the Database tab from the left menu and then select Real-time Database. Here, under the Rule tab, modify the read/write to true. After these steps, let’s begin with the development process for our chat app.

Getting Started with React Native Development for Chat App

Chat Screen:

We will use “react-native-gifted-chat” here which helps to display chat messages in the app. So, create a new directory named “components” where all the components (class/presentational) will be stored. Now create a new file- “Chat.js” in this directory with the right code.

After this, go to App.js and use the “react-navigation” module to create a navigational component by adding logic.

If you run your simulator device now, a bare chat screen with a plain header and background will appear. The users will be able to type messages at the bottom of this screen. Also, a Send button will be visible here but this doesn’t have any functionality as of now.

Connection with Firebase SDK:

Create a folder named “config” and then a new file- “firebaseSDK.js” in this folder. Now add the required keys to this file. For this, you need to visit the Firebase console. On the left, you will find a gear icon next to Project Overview. Click on the gear icon and then go to Project settings. Here, the Login function is used to authorize users who have done the registration using email and password.

Also, add a test user in the Authentication screen since we will be adding a login component before the sign-up component.

Addition of Login Screen:

Now, inside the “components” directory, create a new component file- “Login.js” using the appropriate code from GitHub. Then import the required components from both firebase SDK object and React Native core. There will be two methods- “loginSuccess” and “loginFailed” in “Login.js” that are the callback arguments, out of which any one of them will be executed. We will use a method- “onPressLogin” for calling them by entering the user credentials on a login button.

By clicking on the Signup button, the users will be able to directly go to the signup screen from the login screen. Also, they will go to the chat screen directly if they click on the Login button for now. In case they enter the wrong credentials, they will get an error message.

Creation of Signup Screen:

For the users to create a new account with credentials like email, username, password, and also upload an image, you need to add functions like uploadImage, createAccount in the code mentioned in config/firebaseSDK.js file. Then create the sign-up component for which, you need to create a new file- “components/Signup.js” and add the code. Now we will be asking for device permissions for allowing the device to upload an image.

For keeping the track of the user data, an initial component state is present. Once the users fill the information in input fields, the state object in the component will also be updated. Let us now modify the stack navigator inside the App.js file, for practically making this work. The users will now be able to successfully upload their image while signing-up or logging-in.

Integrating Chat Functionality:

For creating a chat message and sending it, this component will require user data from Firebase. Here, the props coming from the login screen will be used to retrieve user data. Also, you will have to declare a component state which consists of an array of messages. As per these requirements, modify the “components/Chat.js” file.

Run the app once again by using “npm run android” or “npm run ios” depending on what platform you chose earlier. In this way, the chat functionality is integrated successfully in a React Native app.

Wrap-up:

React Native is a robust framework and when combined with Firebase, they together provide outstanding results like speedy development and time-efficiency. In this article, we have used this combination to create a chat app. Do try creating such an application with React Native and Firebase by following the above-mentioned steps. Let us know your experience with React Native Development in the comments section.

Similarly, if you want to integrate payment functionality in your React Native application, consider reading our blog- “An Overview of Stripe Payment Processing in React Native Apps!”

Do you have a business idea and want to turn it into a lucrative mobile app using React Native? Or want to design a top-grade native-like mobile application for your business? We are here to help you! We, Biz4Solutions, are an eminent Mobile app development company, known for providing high-tech software applications. For more details, reach out to us at sales.enquiry@biz4solutions.com.