DEV Community

loading...

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

issueresolvercollab profile image IssueResolver-collab Updated on ・2 min read

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;
Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

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>
  );
};

Enter fullscreen mode Exit fullscreen mode

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
       });
    } 
 }
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

pic
Editor guide