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...
Collapse
 
lylest profile image
wackyizzy

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

Collapse
 
seif1000 profile image
benmazouz seif eddine

same issue here did find any solution???

Collapse
 
rodrigo98rm profile image
Rodrigo Mayer

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.

Collapse
 
jakubkoci profile image
jakubkoci

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

Collapse
 
lylest profile image
wackyizzy

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

Collapse
 
seif1000 profile image
benmazouz seif eddine • Edited

did you fix it ???

Collapse
 
microxoft profile image
Miguel Moronta

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

Collapse
 
rynatk profile image
Ryan Atkinson

@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!

Collapse
 
sumit1317 profile image
Sumit S Chadha

With






how to access the token inside RootScreen without using Redux ?

Collapse
 
maniruzzamanakash profile image
Maniruzzaman Akash

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.

Collapse
 
miqueasgutierrez profile image
miqueasgutierrez

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/

Collapse
 
sumit1317 profile image
Sumit S Chadha

how to access the token inside RootScreen without using Redux ?

Collapse
 
sumit1317 profile image
Sumit S Chadha

With



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

Collapse
 
ajmal_hasan profile image
Ajmal Hasan • 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>
Collapse
 
danielwinkler profile image
Daniel Winkler

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

Collapse
 
oulkelaa profile image
oulkelaa

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

Collapse
 
malikgenius profile image
malikgenius

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..

Collapse
 
jayanta_mondal_40bfc314d9 profile image
Jayanta Mondal

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

Collapse
 
jayantadhn profile image
jayantadhn

How do I clear this notification alert?

Collapse
 
aravi365 profile image
Aravind M Nair

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

Collapse
 
kenwilsonie profile image
Ken • 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

Collapse
 
kujma10 profile image
kujma10

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

Collapse
 
arvaloplz profile image
AndroiDev

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

Collapse
 
chasty profile image
Willy Rosa Huanca

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

Collapse
 
halbano profile image
halbano

Did you solved the issue Willy?

Collapse
 
stijncoolen profile image
Stijn Coolen • 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...

Collapse
 
jakubkoci profile image
jakubkoci

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.

Collapse
 
davidreyesh profile image
David Reyes H.

I really like this code! Congratulations.