React Native Private Chat Application

Let’s build a chat application.

The goal is to create an application with NO Authentication (signup/login) first name only, chat room creation, and group messages within those rooms.

It will be built in React Native. Firebase will be used to handle database storage. React Navigation will help with getting around. And, Farid Safi’s wonderful Gifted Chat library will handle the actual chat screen.

In the interest of space, and keeping things clean all styles will be kept out of this write up but live in the GitHub repository.

Create the App and Install Dependencies

Open a terminal window, navigate to your folder of choice, and invoke the React Native Expo to create a new application named “Private-ChatApp-React-Native”

Once the application is set up, navigate into the folder and use npm to install the project dependencies.

# Create a new React Native Expo App
expo init Private-ChatApp-React-Native
cd Private-ChatApp-React-Native# Install dependencies from npm
npm install —-save firebase react-native-gifted-chat @react-native-async-storage/async-storage

Setup

App.js

Let’s Started By Importing all the necessary packages we have installed.

Imports and details:

• Import react-native-gifted-chat — The most complete chat UI for React Native & Web.
• Import firebase — Firebase is a platform developed by Google for creating mobile and web applications.
• Import async-storage — unencrypted, asynchronous, persistent, key-value storage system that is global to the app.

Now, Configure the firestore and connecting with the collection — “chats”.

FireStore Configuration in App

A few key notes on above code:

• firebaseConfig file has all the firebase details from your account.
• Initialize the firebase if the firebase hasn’t already been.
• LogBox.igonoreAllLogs([]) to ignore all log notifications.
• Create reference to firestore() using firebase.firestore() and select the collections of chats by db.collection('chats) ; if collection ‘chats’ does not exist firestore creates a new collection.

useEffect() : what is happening here ??

Key Notes : useEffect

• readUser() function checks if there is any user details (name) in the Async-Storage.
• After that we use the onSnapshot() method to constantly listen to a document. Then, each time the contents change, another call updates the document snapshot since we are using useEffect().
• We check for any change in data using docChange() filter through the data and map document doc and return all the messages using spread operator (...) and sort the messages by the difference the time of messages.
• Finally, we append the changed message to the existing messages using the appendMessages function, using useCallback Hooks.

Async Function

• handlePress() function to store the username in async-storage
• handleSend(messages) function to handle onSend method of react-native-gifted-chat and await for Promise to write message.

Render View

• if user doesn’t exist Login / Name View is shown to the user.
• else, GiftedChat is used to render the messages, user and onSend to start chatting.

Working Demo

Putting It All Together

We now have a React Native Expo -Private Chat Application which can be used in a Local Area Network ONLY.

Useful links

• GitHub Repo
• Youtube Video