Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 28, 2022 05:10 pm GMT

Implementing React Native push notifications with Firebase Cloud Messaging

React Native uses JavaScript and React to build apps for iOS, Android, and the web from a single codebase. It also allows you to tap into the native features of each device, such as the devices default themes, camera, geolocation, and push notifications. This means you can use React Native to build a complete mobile app that integrates with iOS or Androids underlying settings, which makes it simple to implement push notifications, as I will demonstrate today.

In this article, we will learn how to build a simple React chat application that integrates with Firebase Cloud Messaging and the devices push notifications to notify a user when they receive a new message.

Prerequisites
To follow along with this tutorial, it is essential to have the following:

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

Setting up a React Native chat app
To set up the application, go ahead and create a project folder where you want your project to live, then initialize the application using this npx command:

npx react-native init chat_app_with_fcm

Once the above command is executed, a chat_app_with_fcm directory that hosts your React Native settings will be created. Change the directory path to the newly created chat_app_with_fcm folder:

cd chat_app_with_fcm

Lets test if the bootstrapped React Native template is working. Make sure you have a connected device or an emulator, and then start the application as such:

npm run android

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

Building chat functionality
This guide is creating a chat application. To handle the chat functionality, we will use the react-native-gifted-chat package. The package will provide a ready-to-use, interactive UI for the chat application.

To install the package, open your project terminal and run the following command:

npm i react-native-gifted-chat

Once installed, navigate to the App.js file and make the following changes.

First, import the GiftedChat module:

import { GiftedChat } from 'react-native-gifted-chat'

Then, import the following Hooks:

import { useState, useCallback, useEffect } from "react";

Inside the App: () function, define a state for messages:

const [messages, setMessages] = useState([]);

Define a useEffect to set a default message when the application loads:

useEffect(() => {    setMessages([        {            _id: 1,            text: 'Hello there',            createdAt: new Date(),            user: {                _id: 2,                name: 'PartyA',                avatar: 'https://placeimg.com/140/140/any',            },        },    ]);}, [])

Finally, replace the rendered view with the GiftedChat component:

return (    <GiftedChat        backgroundColor={isDarkMode ? Colors.black : Colors.white}        messages={messages}        onSend={messages => onSend(messages)}        user={{            _id: 1,        }}    />)

After making the above changes, React Native will use its hot reload features and reflect the changes to your screen.
Image description

Setting up an application on the Firebase console
Lets now connect this application to Firebase. To set this up, log on to your Firebase account and create a new project using the Add project card. Enter your project name, and then click Continue. Feel free to enable or disable Google Analytics on the next step, and then click Continue.

When your project is ready, click Continue again to go to the project dashboard. On this dashboard, create an Android application using the Android icon present on your project dashboard.

Under Android package name, enter the package name from your app. You can get this package name inside the /android/app/src/main/AndroidManifest.xml file. Finally, hit Register app, download the google-services.json file, and place it under your projects android/app/ directory.

Setting up Firebase Cloud Messaging in a React Native app
To connect our React Native application with Firebase, we have to configure the application with the Firebase credentials.

Under android/build.gradle, add the following classpath inside the buildscripts/dependencies tags:

classpath 'com.google.gms:google-services:4.3.10'

Under the /android/app/build.gradle file, add the google-services plugin right below apply plugin: "com.android.application" :

apply plugin: 'com.google.gms.google-services'

Next, install React Native Firebase like so:

npm i --save @react-native-firebase/messaging

These settings are ready. Now, lets handle how React Native will use FCM to send the chat messages.

Handling foreground message notifications
First, 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.

Navigate to the App.js file and import React Native Firebase:

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

Under App(), add a useEffect() Hook, which will listen to any change in the messages state:

useEffect(() => {}, [messages]);

Inside the useEffect(), add an event handler to listen to notifications:

// Get the notification messageconst subscribe = messaging().onMessage(async remoteMessage => {    // Get the message body    let message_body = remoteMessage.notification.body;    // Get the message title    let message_title = remoteMessage.notification.title;    // Get message image    let avatar = remoteMessage.notification.android.imageUrl;    // Append the message to the current messages state    setMessages(messages => GiftedChat.append(messages, {        _id: Math.round(Math.random() * 1000000),        text: message_body,        createdAt: new Date(),        user: {            _id: 2,            name: "PartyB",            avatar: avatar,        },    }));    // Show an alert to the user    Alert.alert(message_title, message_body);});return subscribe;

To test this, go to the Firebase console of the application you created in the previous step. On the left sidebar, under Engage, click Cloud messaging. Then click the button Send your first message.

On the form that proceeds:

Enter any title (e.g., test) Under Notification text
Type in Hello there! under Notification image
Paste in any image address youd like, or use this one of a glass of water
Click the Next button below
Now, under Target, click Select an app and then select your app. Click Next on the next step and then Review. On the resulting popup, click Publish.

Handling background message notifications
Background message notifications work when the application is closed. Similarly to foreground notifications, we will be adding a handler.

To add the handler, make the following changes on App.js before App():

// Register background handler// Get the notificationmessaging().setBackgroundMessageHandler(async remoteMessage => {    // Extract the body    let message_body = remoteMessage.notification.body;    // Extract the title    let message_title = remoteMessage.notification.title;    // Extract the notification image     let avatar = remoteMessage.notification.android.imageUrl;    // Add the notification to the messages array    setMessages(messages => GiftedChat.append(messages, {        _id: Math.round(Math.random() * 1000000),        text: message_body,        createdAt: new Date(),        user: {            _id: 2,            name: "PartyB",            avatar: avatar,        },    }));    // Send a notification alert    Alert.alert(message_title, message_body);});

To test the functionality, you will have to close the application, then send a notification message from the console as in the previous section.

You should receive such an alert like the one below on your phones push notification bar.

Image description
Conclusion
Notifications are critical to modern mobile applications. I hope this guide has helped you learn the important skill of adding push notifications to React Native apps. As we have seen, Firebase Cloud Messaging and React Native Firebase makes this flow seamless and very easy.


Original Link: https://dev.to/willysambora/implementing-react-native-push-notifications-with-firebase-cloud-messaging-18c8

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To