"Foreground Notification with firebase and notifee in React native "
Bootstrap 4.1.1 Snippet by RachnaKhatnawlia

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> import messaging from "@react-native-firebase/messaging"; import AsyncStorage from "@react-native-async-storage/async-storage"; import firestore from '@react-native-firebase/firestore'; import notifee, {AndroidImportance} from '@notifee/react-native'; export async function requestUserPermission() { const authStatus = await messaging().requestPermission(); const enabled = authStatus === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL; if (enabled) { // console.log('Authorization status:', authStatus); getFcmToken(); } } const getFcmToken = async () => { let fcmToken = await AsyncStorage.getItem("fcmToken"); // console.log(fcmToken, "the old token"); if (!fcmToken) { try { const fcmToken = await messaging().getToken(); if (fcmToken) { console.log(fcmToken, "new generated token"); await AsyncStorage.setItem("fcmToken", fcmToken); } } catch (error) { console.log(error, "error occurred during fcm token"); } } }; export const notificationListner = async () => { messaging().onNotificationOpenedApp((remoteMessage) => { console.log( "Notification caused app to open from background state:", remoteMessage.notification ); navigation.navigate(remoteMessage.data.type); }); messaging().onMessage(async (remoteMessage) => { console.log(remoteMessage, "receved in foreground"); DisplayNotification(remoteMessage); }); messaging() .getInitialNotification() .then((remoteMessage) => { if (remoteMessage) { console.log( "Notification caused app to open from quit state:", remoteMessage.notification ); } }); }; async function DisplayNotification(remoteMessage) { console.log("display called", remoteMessage) // Create a channel const channelId = await notifee.createChannel({ id: 'default', name: 'Default Channel', importance: AndroidImportance.HIGH, }); // Display a notification await notifee.displayNotification({ title: remoteMessage.notification.title, body: remoteMessage.notification.body, // title: 'hello smartone', // body: 'smart one app test in foreground', android: { channelId, }, }); }
import React, { useEffect, useState } from "react"; import { notificationListner, requestUserPermission, } from "./src/utils/notificationServices"; const App = () => { useEffect(() => { requestUserPermission(); notificationListner(); }; return ( <></> ); }; export default App;

Related: See More


Questions / Comments: