Skip to main content

Push-Notification in React-native



Implimenting Push-notification in React-native


Note: To send push notification you have to implement firebase first for implementing firebase check my previour blog
1. Install Package = @react-native-firebase/messaging,


2.FcmService.js                                                                                        
import messaging from '@react-native-firebase/messaging';
import {Platformfrom 'react-native';

class FCMService {

   register = (onRegisteronNotificationonOpenNotification=>{
       this.checkPermission(onRegister)
       this.createNotificationListeners(onRegisteronNotificationonOpenNotification)
   }
   registerAppWithFCM = async() => {
       if(Platform.OS === 'ios'){
        await messaging().registerDeviceForRemoteMessages();
        await messaging.setAutoInitEnabled(true)
       }
      
   }
   checkPermission = (onRegister=> {
       messaging().hasPermission()
       .then(enabled => {
           if(enabled){
               // Use Has Permissions
               this.getToken(onRegister)
           }
           else{
               //user dont have permission
               this.requestPermission(onRegister)
           }
       }).catch(error => {
           console.log("[FCMService] permission rejected",error);
            })
       }

       getToken = (onRegister=> {
           messaging().getToken()
           .then(fcmToken => {
               if(fcmToken){
                   onRegister(fcmToken)
               }else{
                   console.log("[FCMService] User Does not have a device token")
               }
           }).catch(error => {
            console.log("[FCMService] getToken rejected",error);
           })
       }
    
    requestPermission = (onRegister=> {
            messaging().requestPermission()
            .then(() => {
                this.getToken(onRegister)
            }).catch(error => {
                console.log("[FCMService] Request Permission rejected",error);
            })
        }
    deleteToken = () => {
        console.log("[FCMService] deleteToken")
        messaging().deleteToken()
        .catch(error => {
            console.log("[FCMService] Delete Token error",error);
        })
    }

    createNotificationListeners = (onRegisteronNotificationonOpenNotification=> {
        //when the application is running but in background
        messaging()
        .onNotificationOpenedApp(remoteMessage => {
            console.log("[FCMService] onNotificationOpendApp Notification Cauesd app to open error");
            if(remoteMessage) {
                const notification = remoteMessage.notification
                onOpenNotification(notification)
                //this.
            }
        });

        //when the application is opened from a quit state.
        messaging()
        .getInitialNotification()
        .then(remoteMessage => {
            console.log("[FCMService] getInitialNotification Notification Cauesd app to open error");
            if(remoteMessage){
                const notification = remoteMessage.notification
                onOpenNotification(notification)
            }
        });

        //forgrounnd state messages
        this.messageListener = messaging().onMessage(async remoteMessage => {
            console.log("[FCMService] A new FCm message arrived",remoteMessage);
            if(remoteMessage){
                let notification = null
                if(Platform.OS === 'ios'){
                    notification = remoteMessage.data.notification
                }else{
                    notification = remoteMessage.notification
                }
                onNotification(notification)
            }
        });

        //Triggerd When have new token
        messaging().onTokenRefresh(fcmToken => {
            console.log("[FCMService] new token refresh",fcmToken);
        })
    }
    unRegister = () => {
        this.messageListener()
    };
}

export const fcmService = new FCMService() 

3.LocalNotificationService.js
import PushNotification from 'react-native-push-notification';
import PushNotificationIOS from "@react-native-community/push-notification-ios";
import  {Platformfrom 'react-native';

class LocalNotificationService {
    configure = (onOpenNotification=> {
        PushNotification.configure({
            // (optional) Called when Token is generated (iOS and Android)
            onRegister: function (token) {
            //  console.log("[LocalNotificationService] onRegister:", token);
            },
            onNotification: function (notification) {
             //   console.log("[LocalNotificationService] onNotification:", notification);
                if(!notification?.data){
                    return
                }
                notification.userInteraction = true;
                onOpenNotification(Platform.OS === 'ios' ? notification.data.item : notification.data);
                // process the notification
             if(Platform.OS === 'ios'){
                 notification.finish(PushNotificationIOS.FetchResult.NoData)
             }
              },
              permissions: {
                alert: true,
                badge: true,
                sound: true,
              },
              popInitialNotification: true,

             /**
   * (optional) default: true
   * - Specified if permissions (ios) and token (android and ios) will requested or not,
   * - if not, you must call PushNotificationsHandler.requestPermissions() later
   * - if you are not using remote notification or do not have Firebase installed, use this:
   *     requestPermissions: Platform.OS === 'ios'
   */
  requestPermissions: true,
    });
}
unRegister = () => {
    PushNotification.unregister()
}

    showNotification = ( idtitlemessagedata = {},option = {}) => {
        PushNotification.localNotification({

        ...this.buildAndroidNotification(id,title,message,data,option),
        ...this.buildIOSNotification(id,title,message,data,option),
        title:title || "",
        message:message||"",
        playSound:option.playSound || false,
     soundName:option.soundName || 'default',
     userInteraction:false //Boolen
    
    });

}
buildAndroidNotification = (idtitlemessagedata = {},option = {}) => {
    return {
        id:id,
        autoCancel: true,
        largeIcon: option.largeIcon || "ic_launcher",
        smallIcon: option.smallIcon ||"ic_stat_ic_notification"
        bigText: message || ""// (optional) default: "message" prop
        subText: title || "",
        vibrate: option.vibrate || true// (optional) default: true
        vibration: option.vibration ||300,
        priority: option.priority ||"high"
        importance: option.importance ||"high"
        data:data,
    }
}
buildIOSNotification = (idtitlemessagedata = {},option = {}) => {
    return {
       alertAction:option.alertAction || 'view',
       category:option.category || "",
       userInfo: {
           id:id,
           item:data,
       }
    }
}
cancelAllLocalNotifications = () => {
    if(Platform.OS === 'ios'){
        PushNotificationIOS.removeAllDeliveredNotifications();

    }else{
        PushNotification.cancelAllLocalNotifications();
    }
}

  removeAllDeliveredNotificationByID = (notificationId=> {
   // console.log("[LocalNotificationService] removeAllDeliveredNotificationByID:", notificationId);
    PushNotification.cancelLocalNotifications({id:`${notificationId}`})
  }

}

export const localNotificationService = new LocalNotificationService()

4.For knowing fcm token =>
   messaging().getToken()
        .then(fcmToken => {
            console.log(fcmToken)
           this.setState({fcmtoken:fcmToken})
        }).catch(error => {
         console.log("[FCMService] getToken rejected",error);
        })
5.Index.js
/**
 * @format
 */
import React from 'react'
import {AppRegistryfrom 'react-native';
import App from './App';
import {name as appNamefrom './app.json';
import messaging from '@react-native-firebase/messaging'

messaging().setBackgroundMessageHandler(async remoteMessage => {
    console.log('Message handled in the background!'remoteMessage);
  });

  function HeadlessCheck({ isHeadless }) {
    if (isHeadless) {
      // App has been launched in the background by iOS, ignore
      return null;
    }
  
    return <App />;
  }
  
AppRegistry.registerComponent(appName, () => HeadlessCheck)

Comments

Popular posts from this blog

How to use Axios In React-native

  Axios Is used For Api Calling in React-native ... Step 1.  npm install axios; After installing package. import axios from "axios"; const options = {         method:method   // post or get         headers:{'content-type':'application/json'},         data:data,         url:"Apiurl",     };     axios(options).then(res => {             //Do something     } Note If u Want to Send Form-data then  change Content-type to multiformdata and pass formdata in data field in Options

Disadvantages or Drawbacks of React-native

Despite its maturity, React Native still lacks some components. Others, in turn, are underdeveloped. The chances are you won’t have a problem with that, as the majority of custom modules you need are available, well-documented, and working properly. However, it might happen that you will have to build your solution from scratch or try to hack an existing one. When developing your custom modules, you could end up with three codebases (RN, Android, and iOS) for a component instead of only one. In each of those codebases, there can be differences in behaviour and appearance. Fortunately, those situations don’t come about often.