react-native-push-notifications (handling foreground push notifications)

#javascript #reactnative

Ever wondered why push-notifications are not getting displayed when your app is in foreground ???

If your answer is yes,then you are at the right place!!

Here you go

So recently I faced one issue while implementing push notifications in my app using AWS SNS, firebase cloud messaging (FCM).

Firstly I thought that there is some issue with my AWS SNS configuration.

After digging into this issue I finally found that there is issue with the way I configured my react-native-push-notifications library in my react-native code.

Prerequisites : You have configured your react-native app as shown in below link :
Link

Create a new React component (RemotePushController.js)

import React, { useEffect } from 'react';
import PushNotification from "react-native-push-notification";


const RemotePushController = () =>{
    useEffect(()=>{
        PushNotification.configure({

            onRegister: function (token) {
              console.log('TOKEN:', token);
            },

            onNotification: function (notification) {
              console.log('NOTIFICATION:', notification);

            if (notification.foreground) {
            PushNotification.localNotification({
              title:notification.title,
              message:notification.message
            });
            } 
            },

            senderID: "your_fcm_sender_id_here",

            permissions: {
              alert: true,
              badge: true,Consent
              sound: true
            },

            popInitialNotification: true,

            requestPermissions: true,
          });
    },[]);

    return null;
};

export default RemotePushController;

Now inside your App.js file include the RemotePushController component as shown below:

const App = () => {
  return (
    <View>
      <RemotePushController/>
    </View>
  );
};

In case suppose your root component is Provider from react-redux library then add it as follows:

const App = () => {
  return (
    <Provider store={store}>
      <RemotePushController/>
    </Provider>
  );
};

So the basic idea is just add RemotePushController component above the ending root tag.

So the important part you need to keep in mind is adding following code in PushNotification.configure() as below:

  onNotification: function (notification) {
   console.log('NOTIFICATION:', notification);

   if (notification.foreground) {
       PushNotification.localNotification({
           title:notification.title,
           message:notification.message
       });
    } 
 }

That's it!!!!
Now you are good to go.
Now just run your react-native app again and try sending push notifications while your app is running in foreground.

Let me know in comment section