Building a React Native Chat App with Expo and Gifted Chat

Last year, I wrote a series of articles on the ChatKitty blog covering how to create an Expo React chat app. The articles cover the basic concepts you need to get started with ChatKitty if you plan to use Expo or React Native to build your product. The series is broken up into four parts.

The first part covers:

  • Creating an Expo React Native project using the Expo CLI tool

  • Building Sign up and Login screens for your project

  • Adding Firebase Authentication to handle user registration and sign-in

  • Integrating Firebase with ChatKitty using a chat function to authenticate your chat users and securely begin chatting.

The second part covers:

  • Creating public channels for chat users to join

  • Creating a Home screen of channels the current user has join and can chat into

  • Creating a Browse screen of channels the current user has access to but hasn’t joined

  • Integrating the Gifted Chat React Native library to implement a group chat screen

The third part is all about notifications and covers:

  • Implementing in-app notifications to inform the current user of chat events from another context than the current app context

  • Using Expo push notifications to send push notifications using a chat function

The final part completes the chat app, covering:

  • Creating direct channels for one-to-one messaging

  • Enhancing the chat experience by integrating Gifted Chat’s in-built typing indicator and later replacing it with a custom more detailed indicator

  • Notifying chat users when a user enters or leaves a chat

  • Adding functionality to leave channels

1 Like