DEV Community

React Native Push Notifications

jakubkoci on February 29, 2020

So you want to start using push notifications in your new shiny mobile app written in React Native. But if you’re new to mobile development and you...

Read full post

Rodrigo Mayer • Mar 6 '20

Hi @jakubkoci , thanks a lot! This article helped me a ton!

On file PushNotificationsManager.js, I had to remove the Android OS check, right before the Notifications.getInitialNotification(), in order to get the initial notification on iOS.

jakubkoci • Mar 18 '20

Thanks, @rodrigo98rm , you're right. You saved me, I had an issue with it today 👍 I fixed it in the article.

wackyizzy • Apr 29 '20

when i runned my code i get this error
TypeError: Cannot read property 'refreshToken' of undefined

This error is located at:
in NavigationContainer (at DrawerNavigator.js:18)
in component (at SceneView.tsx:98)

i don't know if i am missing something but i followed every point of instruction

benmazouz seif eddine • Jul 4 '20

same issue here did find any solution???

Ryan Atkinson • Apr 10 '20

@jakubkoci great article! the instructions for sending PNs via the curl are awesome.

question, did you ever have any issues getting the ios event handlers to trigger? I've been using the react-native-notifications library for a couple weeks now and am running into some issues in iOS.

I opened a GH issue here if you have any time to look: github.com/wix/react-native-notifi..., if not, no worries!

miqueasgutierrez • Feb 18 '21

Hello good article, also an excellent service for Push Notifications is with the INDIGITALL Service, it allows to send Push Notifications with also geo-located images, programmed among many more functions, here is the link of the documentation to install it easily: https: // docs.indigitall.com/es/

Maniruzzaman Akash • Oct 21 '20

That's really a very much helpful one.
I've succeeded to integrate push notification in my react native application. Thanks.

One issue found with versioning of google services and min SDK versino, by upgrading all services and everything now works fine now.

Sumit S Chadha • Jul 30 '20

how to access the token inside RootScreen without using Redux ?

Sumit S Chadha • Jul 30 '20

With

how to access the token inside RootScreen without using Redux ?

Sumit S Chadha • Jul 30 '20

With

, how to access the token inside RootScreen without using Redux ?

wackyizzy • Apr 29 '20

i get this when i tried the first section of the code
typeError null:null is not an object evaluating.this.nativeCommandModule.refreshToken

can not ready refreshtoken of undefined

benmazouz seif eddine • Jul 4 '20 • Edited

did you fix it ???

Miguel Moronta • Jul 9 '20

Me too, I'm having the same problem.
"react-native": "0.62.2",
"react-native-notifications": "^3.2.2",

Ajmal Hasan • Jun 18 '20 • Edited

1) Notifications.events().registerNotificationOpened, Notifications.events().registerNotificationReceivedBackground
and Notifications.getInitialNotification() is not triggered if u are using with splash screen.

2) For custom icon and color on notification, add icon into all res/mipmap-*
and then use meta-data tag _

Modify the AndroidManifest Like this for resolving above points:

package="com.rnb_boilerplate">

<uses-permission android:name="android.permission.INTERNET" />

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:theme="@style/AppTheme">

  <meta-data  
  android:name="com.google.firebase.messaging.default_notification_icon" 
  android:resource="@mipmap/ic_notifications" />
  <meta-data
  android:name="com.google.firebase.messaging.default_notification_color"
  android:resource="@color/app_bg" />

  <!-- Add this SplashActivity -->
  <activity
    android:name=".SplashActivity"
    android:theme="@style/SplashTheme"
    android:label="@string/app_name">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize" >
      <intent-filter>
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.INFO" />
      </intent-filter>
    </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

Daniel Winkler • Sep 30 '20

In the current version of the lib, the only icon name that worked for me was
@drawable/notification_icon

You can find the reason for that in the code, I opened a PR to update their docs, but for now I'll leave it here to save somebody else some hours of trial and error

malikgenius • Jun 25 '20

Awesome article, i had to change few things to get it working for my Android, still have not tested on IOS.....
below not required by firebase and if you keep might get error of google-play version bla .
implementation 'com.google.firebase:firebase-core:16.0.0'

wish it would be auto link react-native-notifications but we have do it manually...
below is not required so dont add it to MainApplication.java
packages.add(new RNNotificationsPackage(MainApplication.this));

rather than that till demo checking its working great, i will do some more digging on it..

oulkelaa • Dec 7 '20

Hello,
I have a quick question if you can help me please:
My react project is a simple Web view with integration of FCM notifications, and for that I have to send the token device by injection of javascript when calling the webview.

When I am locally, and I run run-android everything is fine, I receive my token
When I create my apk in release mode and I open and run it in Android Studio => everything is fine, I receive the token
but if I install the same apk on my phone, I don't get the token, it is still empty.

Anyone have an idea please?

Thank you

Aravind M Nair • Apr 28 '20

How to clear the notifications, if there are multiple notifications in the notification pane when user opens one of them?

jayantadhn • Jul 16 '20

How do I clear this notification alert?

Willy Rosa Huanca • Aug 10 '20

Great article, I'm receiving the window push notification while it's in background but not in foreground, does it close automatically?

halbano • Jun 2 '21

Did you solved the issue Willy?

Jayanta Mondal • Feb 23 '21

Hi
In android remote notifications show at statusbar on mobile not a popup, Please help me

AndroiDev • Nov 3 '20

Can you desing or customize the notification ? I need to do a player controler in expo, and I dont know if its posible ... :/

Ken • Apr 24 '20 • Edited

Hi, sorry for the silly question
but im having a problem with the following line
"<Provider store={store}>"
Is there something that I am missing or not doing right?

Thanks

kujma10 • May 12 '20

That's only when you use Redux in react native. You don't need that for push notifications.

Stijn Coolen • Apr 6 '20 • Edited

"FCM can be used only for Android." This is not entirely true, you should be able to send a APNs message with FCM based on their docs: firebase.google.com/docs/cloud-mes...

jakubkoci • Apr 6 '20

Oh, I see. I meant it in a way it's not necessary to set an iOS project in Firebase console. I rephrased it a little. I agree it was written wrongly. Thanks for pointing it out.

David Reyes H. • Sep 23 '22

I really like this code! Congratulations.