React Native Reminders with Firebase integration
By: Sudhir Kumar
Tags: JavaScript, Push Notification, Code, React, React Native

Notification Module Setup

As we are going to add notification. We would need two basic modules of firebase for notifications that are Cloud messaging and Notifications.

iOS installation:Notifications

Add the following code to your existing podfile.

pod 'Firebase/Messaging'

pod update

Add the following import to the top of your ios/[App Name]/AppDelegate.m :

#import "RNFirebaseNotifications.h"

Add the following to the didFinishLaunchingWithOptions:(NSDictionary *)launchOptions the method, right after [FIRApp Configure] :

[RNFirebaseNotifications configure];

Add the following method:

- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {

[[RNFirebaseNotifications instance] didReceiveLocalNotification:notification];

}

If you would like to support Remote Notifications via FCM, also add the following import to the top of your ios/[App Name]/AppDelegate.m :

#import "RNFirebaseMessaging.h"

Then add the following methods to your ios/[App Name]/AppDelegate.m :

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo

fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{

[[RNFirebaseNotifications instance] didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];

} - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings {

[[RNFirebaseMessaging instance] didRegisterUserNotificationSettings:notificationSettings];

}

Android installation: Notifications

Add the Firebase Cloud Messaging dependency and optional ShortcutBadger dependency to android/app/build.gradle :



// ...

implementation "com.google.firebase:firebase-messaging:15.0.2"

implementation '

} dependencies {// ...implementation "com.google.firebase:firebase-messaging:15.0.2"implementation ' me.leolin:ShortcutBadger:1.1.21@aar ' //

Add the RNFirebaseMessagingPackage to your android/app/src/main/java/com/[app name]/MainApplication.java :

// ...

import io.invertase.firebase.RNFirebasePackage;

import io.invertase.firebase.messaging.RNFirebaseMessagingPackage; // <-- Add this line public class MainApplication extends Application implements ReactApplication {

// ... @Override

protected List<ReactPackage> getPackages() {

return Arrays.<ReactPackage>asList(

new MainReactPackage(),

new RNFirebasePackage(),

new RNFirebaseMessagingPackage() // <-- Add this line

);

}

};

// ...

}

Add the following to android/app/src/main/AndroidManifest.xml :

Within the application component, add the messaging service and instance ID service:

<application ...>

<service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">

<intent-filter>

<action android:name="com.google.firebase.MESSAGING_EVENT" />

</intent-filter>

</service>

<service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">

<intent-filter>

<action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>

</intent-filter>

</service>

</application>

If you want to be able to react to data-only messages when your app is in the background, e.g. to display a heads up notification, then you need to add the following to android/app/src/main/AndroidManifest.xml :

<application ...>

<service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" />

</application>

Add the RNFirebaseNotificationsPackage to your android/app/src/main/java/com/[app name]/MainApplication.java :

// ...

import io.invertase.firebase.RNFirebasePackage;

import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage; // <-- Add this line public class MainApplication extends Application implements ReactApplication {

// ... @Override

protected List<ReactPackage> getPackages() {

return Arrays.<ReactPackage>asList(

new MainReactPackage(),

new RNFirebasePackage(),

new RNFirebaseNotificationsPackage() // <-- Add this line

);

}

};

// ...

}

Add the following to android/app/src/main/AndroidManifest.xml :

Add permissions:

<manifest ...>

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

<uses-permission android:name="android.permission.VIBRATE" />

Set app launch mode inside activity props:

<activity ...

android:launchMode="singleTop"

>

If you would like to schedule local notifications then you also need to add the following to the application component of android/app/src/main/AndroidManifest.xml :

<application ...>

<receiver android:name="io.invertase.firebase.notifications.RNFirebaseNotificationReceiver"/>

<receiver android:enabled="true" android:exported="true" android:name="io.invertase.firebase.notifications.RNFirebaseNotificationsRebootReceiver">

<intent-filter>

<action android:name="android.intent.action.BOOT_COMPLETED"/>

<action android:name="android.intent.action.QUICKBOOT_POWERON"/>

<action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>

<category android:name="android.intent.category.DEFAULT" />

</intent-filter>

</receiver>

</application>

Code for Notifications:

Before integrating the code please install the following dependencies:

yarn add @react-native-community/async-storage

Add the following code to App.js file

import React from 'react';

import {View, Alert} from 'react-native';

import {styles} from './styles';

import firebase from 'react-native-firebase';

import Dash from './Dashboard'; export default class App extends React.Component { componentDidMount() {

// Create notification channel required for Android devices

this.createNotificationChannel();

// Ask notification permission and add notification listener

this.checkPermission();

} createNotificationChannel = () => {

// Build a android notification channel

const channel = new firebase.notifications.Android.Channel(

'reminder', // channelId

'Reminders Channel', // channel name

firebase.notifications.Android.Importance.High, // channel importance

).setDescription('Used for getting reminder notification'); // channel description

// Create the android notification channel

firebase.notifications().android.createChannel(channel);

}; checkPermission = async () => {

const enabled = await firebase.messaging().hasPermission();

if (enabled) {

// We've the permission

this.notificationListener = firebase

.notifications()

.onNotification(async notification => {

// Display your notification

await firebase.notifications().displayNotification(notification);

console.log(notification);

});

} else {

// user doesn't have permission

try {

await firebase.messaging().requestPermission();

} catch (error) {

Alert.alert(

'Unable to access the Notification permission. Please enable the Notification Permission from the settings',

);

}

}};

render() {

return (

<View style={styles.container}>

<Dashboard />

</View>

);}}

Dashboard code for the Front end: