DEV Community

IssueResolver-collab
IssueResolver-collab

Posted on • Edited on

7 1

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

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

PulumiUP 2025 image

From Infra to Platforms: PulumiUP 2025 Panel

Don’t miss the expert panel at PulumiUP 2025 on May 6. Learn how teams are evolving from infrastructure engineering to platform engineering—faster, more secure, and at scale.

Save Your Spot

Top comments (1)

Collapse
 
sudipstha08 profile image
Sudip Shrestha

Did not work

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay