React Native Firebase Chat with Expo – Part I

Author: Dave February 24, 2020

For a recent project, I started building a simple React Native app based off Google’s FriendlyChat codelab code. I can’t say much yet about what the actual app is going to do but I figured posting the base chat code could help a lot of other developers over hurdles I had to jump.

In this series, we’re going to build a simple chat app with React Native using Expo + Firebase. There are many other similar articles out there using the very excellent GiftedChat or other open source software, but the app I’m building only needed to be super simple and clean with minimal code.

What we’ll be working with

Here’s a list of some of the concepts we’ll be touching on in the full series.

1. Setting up Firebase, database, and cloud functions
2. React Native functional components using hooks
3. Using React themes for consistent styling
4. React native elements and navigation
5. Push notifications

Getting Started with Firebase

First thing we need to do is set up a new app on Google’s Firebase console.

Visit the Google Firebase Console page here https://console.firebase.google.com/

1. Click the “add a project” button
2. Choose a name for the project
3. Accept defaults and click ok for everything.

You’ll wind up here.

Under “Get started by adding Firebase…” click the web button and give the app a nickname. Click “Register App”.

Copy the fancy code, you’ll need it soon, and click “Continue to console”.

On the left-hand navigation, click Authentication and the “Set up sign-in method” button as seen above. In the provided list, we’re going to enable email/password and Google authentications. Make sure you toggle both so their status shows “Enabled”.

Under Database on the left-hand side, click the “Create database” button. Select “Start in Test mode”. This is important so don’t skip it. If you do, you’ll be wondering why your app doesn’t work. To get started, we’ll have read/write access to your new database but so will the entire universe. For a production app, you’d need to lock down permissions here. There are other articles on how to do that, so I’ll leave it to you.

Click Next, and select your cloud firestore location closest to you. Click Done.

Guess what? You’re done for now, my friend. Your database is alive and ready to house any magnificent words of wisdom your app consumes. Now, let’s get to the fun part. Coding!

Getting started with Expo

If you don’t already have it installed, let’s get the Expo CLI up and running.

npm install expo-cli --global

You’ll want to download the Expo app on your phone https://apps.apple.com/us/app/expo-client/id982107779

Create your new app with Expo.

expo init ReactNativeChat

Choose a blank template when the options appear. I choose not to use Yarn because I’ve had some buggy issues, but use it if you wish.

cd ReactNativeChat

To make life easier on ourselves, let’s install a whole bunch of other modules now, like React navigation, Firebase, etc.

expo install react-navigation

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

expo install react-navigation-stack @react-native-community/masked-view

npm install --save firebase

Let’s fire up the app and see if we missed anything.

expo start -c

Running your Expo app with live updates

Open your camera app and scan the QR code that shows in your browser after Expo completes its thing. If you installed the Expo app on your phone, you should see an empty shell of your app running successfully with no errors. The screen should say “Open up App.js to start working on your app!” If you’ve made it this far, congratulations! You should have an empty React Native app running on your device that you can use to paint your canvas of exquisitely worded chat messages.

Pro Tip: When in doubt just run a quick npm install if you have any problems with modules.

Getting the code base

I’m going to upload the code to my Github here https://github.com/dflatley/ReactNativeChat

The initial basic empty skeleton of the React Native code is checked in and tagged as version v1.0. I will create new tags for the next articles in this series to keep things neat and tidy. So Part II will be accompanied by v2.0 code in the repository.

In Part II, we’ll start to build the fun stuff like React Native navigation, themes using react-native-elements, and we’ll hook up Firebase to get some data flowing. Eventually, we’ll get into push notifications too. The less exciting but necessary part is done now, so give yourself a big pat on the back for setting up the infrastructure of a React Native app that uses Firebase for the back-end.