Building a React Native Chat App with Firebase Cloud Messaging
In this article, we’ll explore how to build a simple React Native chat application that integrates with Firebase Cloud Messaging (FCM) to send and receive push notifications. We’ll cover the setup process, chat functionality, and handling foreground and background message notifications.
Prerequisites
- Node v14 or above and npm v5.6 or above installed on your local machine
- 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:
bash
npx react-native init chat_app_with_fcm
Change the directory path to the newly created chat_app_with_fcm folder:
bash
cd chat_app_with_fcm
Test the bootstrapped React Native template by running the following command:
bash
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:
bash
npm install react-native-gifted-chat
Import the GiftedChat module and define a state for messages in the App.js file:
“`jsx
import React, { useState } from ‘react’;
import { GiftedChat } from ‘react-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:
bash
npm install @react-native-firebase/app
Import the firebase module and initialize the Firebase app in the App.js file:
“`jsx
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:
“`jsx
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]);
});
// …
};
“`
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:
“`jsx
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]);
});
// …
};
“`
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.