Building a React Native Chat App with Firebase Cloud Messaging

Prerequisites

To follow along with this tutorial, you’ll need:

• Node v14 or above and npm v5.6 or above installed on your local machine
• A working knowledge of React Native
• A Firebase account

Setting up a React Native Chat App

Create a new project folder and initialize the application using the following command:

npx react-native init chat_app_with_fcm

Change the directory path to the newly created chat_app_with_fcm folder:

cd chat_app_with_fcm

Test the bootstrapped React Native template by running the following command:

npx react-native run-android

This will start a development environment that you can use to access the application on a connected device or emulator.

Building Chat Functionality

To handle chat functionality, we’ll use the react-native-gifted-chat package. Install the package by running the following command:

npm install react-native-gifted-chat

Import the GiftedChat module and define a state for messages in the App.js file:

import React, { useState } from 'eact';
import { GiftedChat } from 'eact-native-gifted-chat';

const App = () => {
  const [messages, setMessages] = useState([]);

  return (

  );
};

Setting up Firebase Cloud Messaging

Create a new Firebase project and enable the FCM API. Download the google-services.json file and place it in the android/app directory.

Install the @react-native-firebase/app package by running the following command:

npm install @react-native-firebase/app

Import the firebase module and initialize the Firebase app in the App.js file:

import firebase from '@react-native-firebase/app';

const App = () => {
  firebase.initializeApp({
    apiKey: '',
    authDomain: '',
    projectId: '',
  });

  //...
};

Handling Foreground Message Notifications

Create an event handler to handle foreground message notifications. The handler will receive the incoming message, structure it, add it to the message state, and display an alert.

Use the firebase.messaging() method to listen for incoming messages:

import firebase from '@react-native-firebase/messaging';

const App = () => {
  firebase.messaging().onMessage((message) => {
    const newMessage = {
      text: message.notification.body,
      createdAt: new Date(),
    };

    setMessages((prevMessages) => [...prevMessages, newMessage]);

    // Display an alert
  });

  //...
};

Handling Background Message Notifications

Create an event handler to handle background message notifications. The handler will receive the incoming message, structure it, add it to the message state, and display an alert.

Use the firebase.messaging() method to listen for incoming messages in the background:

import firebase from '@react-native-firebase/messaging';

const App = () => {
  firebase.messaging().setBackgroundMessageHandler((message) => {
    const newMessage = {
      text: message.notification.body,
      createdAt: new Date(),
    };

    setMessages((prevMessages) => [...prevMessages, newMessage]);

    // Display an alert
  });

  //...
};

By following these steps, you’ve successfully integrated Firebase Cloud Messaging into your React Native chat application. You can now send and receive push notifications, even when the app is not running in the foreground.