Categories
Web And App Development

How to Build A Chat App with React Native?

React Native has made the mobile application development comprehensive and quicker. Brands and businesses can build helpful apps for both Android and iOS by utilizing the same platform. Many businesses have now started creating Chat Apps to streamline the communication within their organization and with the purpose of assigning tasks individually or to a group, to chat with your customers on the fly. This eliminates the need of making long-distance calls to a great extent by allowing your team members and clients to make voice or video calls with just one tap at quite low costs. Not just this, the app can even prove to be beneficial in saving your time by letting you stay in touch with your team members and clients from anywhere, at any time.

Now, to build a Chat App with React Native, you must primarily understand that for a chat application react native will solve the problem of the visual portion of the application. This includes the UI, buttons, etc. but the demanding part of the chat application, IMO, is the backend. The part of the application that react native doesn’t cover. This includes push notifications, real-time updates, maybe a little encryption if you want to be fancy. This is where you will most likely spend 80% of your energy when creating a chat application. Unfortunately, this is that part that React Native doesn’t help with. For this, you will need web development platform such as SendBird, Pusher, Firebase, Appy Pie, Expo or Chatkit that provides Chat API and SDK for enabling real-time communication among your users.

Let’s create a basic chat application that works on every iOS and Android device. To do this we will use a framework called Expo! Expo extends React Native and gives us all the tools we need to get moving quickly without having to use anything but JavaScript!

For building the App we will need a few things:

  • A server to store all the messages
  • Screen to get the users name
  • Screen to send and receive messages

Setting Up the Server

  • You can use a service called Firebase, it’s free, it’s scalable, it’s easy, and it’s made by Google. Go to the Firebase console and setup a new app: 
  • Begin by adding a project and then continue by adding more info.
  • Authentication will lead you to click on “Set-up Sign-In Method”.
  • Now scroll down to click on Anonymous as it is meant to be enabled for a new chat app.
  • Enable and save.

Code

  • Open the starter snack
  • add react-navigation and connect the screens.
  • With app.js and components/main.js in place you will see basic components and style set up
  • Add text input
  • Update component state with a new string value
  • Add the new imports

Chat Screen

  • Open chat.js and start adding details
  • You can import GiftedChat from React-Native-Gifted-Chat
  • Create the component state and give it a messages prop then assign it to an array.

Database to Get Messages

  • It is a way to get messages and determine which ones came from you. Add a listener that gets called whenever a message is sent or received.
  • Import firebase to access a database
  • Initialise and authenticate to sign in
  • Create a function to a location in the database where your messages will be saved

Create a way to send messages

  • Create a helper for getting user’s UID
  • Get accurate timestamp for saving messages
  • Make send function that accepts an array of messages, then loops through the message
  • That’s it for backend, now go again to chat.js screen and connect everything

Components/Chat.js

  • When the component is added to the screen, we want to start looking for messages.
  • When the component leaves the screen, we want to unsubscribe from the database.

And that’s how you build a Chat App with React Native! Now when you run the build you should be able to join your group and start saving messages to the database!

By Sandeep Chauhan

Sandeep Chauhan is a Software Developer at plancoders. He loves to build beautiful Mobile Apps, and Websites.

In the past, he has worked in companies like OpenText, Intel, CenturyLink, and Walmart Labs.

He is the founding CTO of Dealsite (prev WorkingGroupLink), GoPetie, and HRaspirin. Sandeep created the first version of Doc.com (prev Docademic), and helped develop ScaleLab product.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s