React Native Notifications

Overview


React Native Notifications

npm Build Status npm (tag) npm (tag)

Handle all the aspects of push notifications for your app, including remote and local notifications, interactive notifications, silent notifications, and more.

All the native iOS notifications features are supported!

For information regarding proper integration with react-native-navigation, follow this wiki.

Requirements

Apps using React Native Notifications may target iOS 10 and Android 5.0 (API 21). You may use Windows, macOS or Linux as your development operating system.

iOS

Interactive notifications example

  • Remote (push) notifications
  • Local notifications
  • Background/Managed notifications (notifications that can be cleared from the server, like Facebook messenger and Whatsapp web)
  • PushKit API (for VoIP and other background messages)
  • Interactive notifications (allows you to provide additional functionality to your users outside of your application such as action buttons)

Android

  • Receiving notifications in any App state (foreground, background, "dead")
  • Built-in notification drawer management
  • High degree of code extensibility to allow for advanced custom layouts and any specific notifications behavior as available by Android's API
  • Android equivalent of React-Native's implementation of PushNotificationsIOS.getInitialNotification().

Upcoming: local notifications, background-state Rx queue (iOS equivalent)

Quick Links

License

The MIT License.

See LICENSE

Comments
  • Android overhaul (includes important bug fixes and new functionality)

    Android overhaul (includes important bug fixes and new functionality)

    This is a mammoth pull request, and I know that's a pain for maintainers. So I've tried to make this as easily digestible as possible. I've elaborated on the motivation for the changes below, and although I didn't write it that way, I've gone back and split this into smaller feature commits so they can each be evaluated some-what individually.

    • c967bff484f3313420429e0e3c7ab76c3669aa5b - Migrate to FCM and refactor

    This is the largest commit of the lot, but mostly does what it says. The motivation for upgrading from GCM (deprecated) to FCM is pretty obvious but some of the refactoring probably needs further explanation/justification.

    In particular I've completely done away with the concept of PushNotification and split its functionality into two classes, LocalNotification and RemoteNotification, which are slightly more limited in scope.

    This is a breaking change to the Android Java API.

    Additionally PushNotificationProps has been changed to NotificationProps to highlight its dual role and had its behaviour adjusted to more accurately represent Google/Firebase's concept of a notification. In particular, Firebase RemoteMessage class does not bundle end-user data arguments in with UI notification properties. Notification properties and "data" are distinct concepts.

    NotificationProps contains a getData() method to return the data only, the notification properties can be accessed by their corresponding accessor methods. This flows over into JS where there is a property called data, which should take a JS object and all user/custom data should be part of that object, not as part of the top-level notification. This is also a breaking change.

    These breaking changes weren't made arbitrarily or even to keep the project neat. They're actually required to facilitate correct function. In particular we need to be able to reliably determine whether a notification is "data only" so that JS consumers know under which context a notification is being delivered to them. I believe this is something that was perhaps missed by the original author of this functionality, but there are very distinct rules under which notifications are delivered to running applications. I've actually explained these rules in a README update (later commit) but the official Firebase reference explains in detail.

    The final breaking change is that RemoteNotification does not automatically post a local notification when a push/remote notification is received (in the foreground). This is important as it gives JS consumers control over when they'd like to display notifications and also what information they include in said notifications. Firebase does not support several options (large icons, LED lighting) etc.

    Android now supports cancelAllLocalNotifications.

    • ae36e8a3b89ebddbf31743870beeab03230f420b - Namespace globally broadcast JS events

    Fairly self explanatory, this is necessitated by the fact Android's JS events are broadcast "globally", so it's best to avoid any accidental interference by name-spacing.

    • 521f0c7e3bd9d4003f9361b63267987764fd1e55 - Support FCM token invalidation

    A simple mechanism to invalidate push tokens. This can be used for example when a user logs out to ensure the app stops receiving notifications.

    • 98424119cfb51eacaf8ee1503dab9fbed3eb2ee2 - Fixed initial intent behavior for background notifications

    I've covered this pretty thoroughly in the README and it relates to the "data-only" changes mentioned above (first commit) - or in this case, when the notification isn't data-only. If the system tray receives our push notification because the app was backgrounded, at the moment there's no way to tell when the user launched the app by tapping that notification - this commit corrects that situation.

    • faf442e27c5e27989e51fdd90a8fa510fc6db4d0 - Do not automatically dismiss all notifications

    This is about giving control to JS consumers. At present any time the app is launched all notifications are dismissed. That's likely to be undesirable for many use cases, particularly when a user has received multiple push notifications pertaining to different components of the app. The support that was added (first commit) for cancelAllLocalNotifications() means users can still achieve this effect if it's desirable. This is a breaking change with respect to default expected behaviour.

    • 812ced326fd8cece8850dee02ed879e0558297c8 - Android large icon support (URL or drawable name)

    This is actually pretty dang nifty. It's now trivial to specify largeIcon appears in the notification (typically used in messaging apps as profile pictures). Fresco (React Native's image manager) is used to download the images if they're specified as remote URLs - it takes care of caching and what-not.

    Additionally, file:// URLs are supported, which is what React Native converts require("./some_image.jpg") syntax to in JS. So React Native bundled images can seamlessly be used in addition to remote images.

    • de8c172949c76531dbb2c04f96fdfde6c2bc48ea - Minor code simplification/clean-up

    Just a nit. Nothing particularly important or pressing.

    • f084ebd5b3cfcb55b8422d5ab7aaec01a14d24b4 - Move getInitialNotification() NotificationsAndroid (match iOS)

    Got rid of PendingNotifications, as it was an unnecessary namespace. This is a breaking change.

    • 59c6237552ac4bd130d83fb9120d8576b3f86ccb - Android lights/LED support

    Added support for controlling the LED notification light i.e. What Facebook and similar apps do.

    Firebase (system tray) remote notifications are actually incapable of achieving this, so it's one of many very good reasons to send "data-only" notifications and generate local notifications from the content.

    • 7ff0123cd8c3c672aca7026d5e412ebb77c7d7b4 - Android README updates

    • dc3e4626f00fb2bb0b987360b60f438f6b07f760 - Expose invalidateToken() to JS

    Expose invalidateToken() implemented in 521f0c7e3bd9d4003f9361b63267987764fd1e55 to JS.

    • 3c1f7a72c43e47621f6dadd4e34c6f02ee2f4e72 - Fixed native Android test compilation

    Ensure the Android native tests compile correctly with the latest changes.

    • 835cd866461d72ff4663410ad927100c96faac33 - Refactored ProxyService into LocalNotificationService

    General clean-up and removal of dead/unnecessary code.

    • ff3ae152b3f57be9fb2ba2f29572214ad642974b - Android background queue

    Fixed (or rather added) proper background notification support. Android needs a background queue, for precisely the same reasons iOS needs one. Therefore, I've added NotificationsAndroid.consumeBackgroundQueue().

    Events won't be delivered at all unless this is called, which is a breaking change, but the same behaviour as iOS. I've updated the documentation accordingly. In doing so I've also addressed some misleading advice / sample code. In particular the (iOS) documentation showed adding and removing event listeners inside components. This is incorrect, "cold start" background notifications will not immediately be received by your listener if they're added inside a component, as the component hierarchy does not exist at all until your app is foregrounded.

    • a207aa4235f6e6ed85463e81d06b889dda7ad50d - RN 0.47 support (handle Android breaking change)

    Probably easiest way to explain this is just to refer to the discussion/PR for the same change merged into react-native-maps - https://github.com/airbnb/react-native-maps/pull/1481.

    • 9edcddf66e838f3d0ade945deba54e81937fde22 - Updated README installation instructions for Android.

    Prior to this commit, there were issues with multiple versions of Firebase being included due to a bug in the Google Services plugin. This commit provides updated installation instructions that work-around the bug in the Google Services plugin.

    --

    If you made it all the way through that then your time was hugely appreciated. You deserve a gold star! ⭐️

    I'm certainly open to feedback and happy to correct code style issues and what-not.

    🏚 stale 
    opened by Benjamin-Dobell 53
  • Notification Event Callbacks are not Firing on iOS

    Notification Event Callbacks are not Firing on iOS

    Thanks for picking up the task of being the only free and maintained PN library for react-native 🙏

    react-native: 61.0 react-native-notifications: 3.1.4

    I have followed the installation instructions exactly as outlined, and have picked up a few additional snippets from other github issues that have helped me get to a perfectly functioning Android implementation for foreground, background (warm) and background (cold) notifications.

    Im having some issues on iOS though, namely none of the native event callbacks are firing: registerNotificationOpened registerNotificationReceivedBackground registerNotificationReceivedForeground

    I am receiving push notifications on iOS and when I press the notification banner, none of those callbacks are triggered.

    It may be worth noting that getInitialNotification is working on iOS.

    I've searched every issue and am at a loss. Any ideas what I may have improperly configured, or is anyone else experiencing this?

    I'm using firebase to send the actual remote notifications.

    🏚 stale 
    opened by rynpatk 52
  • postLocalNotification - fireDate ignored

    postLocalNotification - fireDate ignored

    In React Native 0.61.5 react-native-notifications 3.1.1

    On android it doesn't matter what date i pass as fireDate, the notifications is fired immediately.

    const someLocalNotification = Notifications.postLocalNotification({
        fireDate: addSeconds(new Date(), 15),
        body: 'Local notificiation!',
        title: 'Local Notification Title',
      });
    
    Android type: accepted/bug 🏚 stale 
    opened by tststs 44
  • Android Compile Error

    Android Compile Error

    I met android compile error. react-native: 0.63.2 react-native-notifications: 3.3.0

    Log is like this. react-native-notifications: 3.2.2 works good.

    1: Task failed with an exception.

    • Where: Build file '/node_modules/react-native-notifications/lib/android/app/build.gradle' line: 4

    • What went wrong: A problem occurred evaluating project ':react-native-notifications'.

    Plugin with id 'kotlin-android' not found.

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. ==============================================================================

    2: Task failed with an exception.

    • What went wrong: A problem occurred configuring project ':react-native-notifications'.

    compileSdkVersion is not specified. Please add it to build.gradle

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. ==============================================================================

    • Get more help at https://help.gradle.org

    🏚 stale 
    opened by jihokim2 40
  • setRegistrationTokenUpdateListener does not return the deviceToken

    setRegistrationTokenUpdateListener does not return the deviceToken

    I am moving from react-native-push-notification to this one because of the conflict of the RNN-RNPN. However, it does not work in my case. PendingNotifications.getInitialNotification returns undefined and NotificationsAndroid.setRegistrationTokenUpdateListener does not returns deviceToken. I can see the result and correct response in Android monitor Logging (App initialized => publishing existing token (dc5oJgMT-qw:APA ...). But, I cannot get any response from JS. What can I do with that? I also try the example of this one. https://github.com/chrise86/rn-notification-navigation It gives me the same result.

    Android/core 🏚 stale 
    opened by seanlau555 34
  • [v3] registerNotificationOpened not triggered on Android

    [v3] registerNotificationOpened not triggered on Android

    I previously had an issue with sending data to my device (https://github.com/wix/react-native-notifications/issues/497). Solved this by changing the payload to (Amazon SNS):

    {
       "GCM":" {
           \"notification\": {
               \"title\": \"title\", 
               \"body\": \"Sample message for Android endpoints\" 
           }, 
    }
    

    But I still think I the docs can be more clear about how to implement a custom FirebaseMessagingService. Right now I want to send data to my app, I'm not sure if this works without a custom FirebaseMessagingService or how to implement one.

    Although with the custom messages send via Amazon SNS are now shown on my Android device, the registerNotificationOpened event is not triggered when I click the notification (on iOS it is). How can I resolve this?

    I want to open a certain screen when opening the notification based on data send with the notification.

    Do I have to add the custom FirebaseMessagingService to my app to handle data? How can I implement this? Tried sending another payload as stated in the docs (https://firebase.google.com/docs/cloud-messaging/concept-options) with the apns key, but it didn't work out as expected. The registerNotificationOpened was not triggered and the data was not parsed in the same way as on iOS where everything works without any hassle.

    Thanks for the help in advance.

    🏚 stale 
    opened by rnnyrk 33
  • What is the best way to use it with RNNavigation?

    What is the best way to use it with RNNavigation?

    Hi, guys! Thanks for your libraries they are great. I have a question what is the best way to use RNNotifications with RNNavigation. In docs it says to subscribe to notifications in componentWillMount and remove listeners in componentWillUnmount of the root component e.g. App or something, but with RNNavigation we don't have one. We start App with startSingleScreenApp and that's it. Of course I can subscribe for notifications before call to startSingleScreenApp, but I won't be able to remove listeners. So what is a best practice to deal with it how should I use it with RNNavigation? Thanks in advance.

    opened by Elf2707 32
  • Android 11 and above crashing on notification open

    Android 11 and above crashing on notification open

    The app crashes while opening the notification and shows the following message java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.Object android.os.Bundle.clone()' on a null object reference

    currently using version 4.2.3

    bug 
    opened by MajkellVZ 28
  • The local notification is not visible

    The local notification is not visible

    I have follow the instruction to install the lib in Xcode 9. I use local notification for my app and run in simulator iPhone 6 and run in real device iPhone 7 but the notification is not visible. Please help me My snippet code to show notification

    _let localNotification = NotificationsIOS.localNotification({ alertBody: "Local notificiation!", alertTitle: "Local Notification Title",

        silent: false,
    	category: "SOME_CATEGORY",
    	userInfo: { }
    });_
    
    🏚 stale 
    opened by googlecomvn 27
  • notificationReceivedBackground didn't fire

    notificationReceivedBackground didn't fire

    I have run the example, notificationReceivedForeground and notificationOpened work fine.But notificationReceivedBackground didn't fire, is there any possible reason cause this?

    bug iOS/background-notifications 🏚 stale 
    opened by waynehong 27
  • registerNotificationReceivedBackground listener not triggered on Android when App is in background

    registerNotificationReceivedBackground listener not triggered on Android when App is in background

    Using Android, when App is in background, notification gets displayed on tray but registerNotificationReceivedBackground event is not triggered. This event is important to trigger the App do a service api call. Especially, if the user happens to dismiss the notification. The App never knew a notification arrived. [This flow works fine on iOS.]

    • I have tried latest version (v3.3.2) and even went back to v3.2.* versions and same behavior
    • It appears same issue was reported on 2/3 for v3.1 https://github.com/wix/react-native-notifications/issues/478, unresolved and was closed by stale bot.
    • I even tried to debug Native code PushNotification.java and the other java files. I've put system.out.println() to what i think would be the likely functions that will get called, e.g. notifyReceivedToJS(), but none of the functions were triggered when the notification is received while app is in background. It seems the App is disconnected during this state
    1. Is this a known issue that will eventually be resolved?
    2. Is there a work around that I could try? Or how has the others worked around this?

    Thanks!

    Android type: accepted/bug 🏚 stale 
    opened by reeinohio 25
  • Fixed Android 31 issues

    Fixed Android 31 issues

    Issue fixed:

    • App get relaunch (splash screen) on notification tap while app is in running state.

    • Notification handled multiple times. Steps

      1. Tap on notification while app is not in running state, it will launch Activity_A.
      2. Navigate to any other activity Activity_B based on notification received.
      3. Press back button and navigate back to Activity_A
      4. App will auto navigate to ActivityB as previous intent still have extras for notification.
    • Android 11 device: Notification handled even when app get relaunched from history.

      1. Tap on notification while app is not in running state.
      2. execute code based on notification.
      3. Close app by pressing back button
      4. Launch app from history(recent app list).
      5. App will try to process previous notification as activity got launched from history and intent will have notification extras.
    opened by patidars 0
  • Tap on push notification that was received when app was on foreground reloads the application

    Tap on push notification that was received when app was on foreground reloads the application

    App was crashing when I got push notification when app is on the background. Resolved that. But when the app is on foreground the app reloads when I tap on the notification that I received when app is on the foreground.

    I want to navigate to certain page on tap of that notification but reloading the app prevents from doing that. Notifications.events().registerNotificationOpened() is being called on tap and after that my app gets reload.

    opened by KhimGurung 0
  • Detox e2e does not work with Background Notifications

    Detox e2e does not work with Background Notifications

    Hi, I am testing the example project along with the detox e2e. I can see that there is currently no test covering the usecase of 'background notifications' where content-available=1.

    I have added a test where I try the following steps: await device.sendToHome(); await device.sendUserNotification(createBackgroundNotification({link: 'background/notification/click3'})); await device.launchApp({newInstance: false});

    with createBackgroundNotification() containing content-available=1.

    However despite adding logs everywhere, I can see that the handler registerNotificationReceivedBackground is never fired.

    Can you please advise how to e2e background notifications? Thanks

    opened by qwilbird 0
  • Tried to schedule job for non-existent component

    Tried to schedule job for non-existent component

    I'm trying to run existing project which previous developer said it was working before, then I face this issue compileReactNative60DebugJavaWithJavac FAILED #851, trying what suggested there but no luck, then I'm trying to downgrade the version from 4.3.1 to 4.3.0 now it successfully built, but now it shows this error on first launch and the app immediately closed

    my environment: OS: macOS Ventura 13.0.1 Node: v12.22.12 Yarn: 1.22.19

    react: 16.13.1 react-native: 0.63.4 emulator: Pixel_3a_API_33

    wondering if anyone ever face this issue and what causes this and how to solve this thank you

    🏚 stale 
    opened by tyartyartyar 1
  • Notification grouping on samsung devices makes it so notification badge only displays

    Notification grouping on samsung devices makes it so notification badge only displays "1"

    We have a bug in our prod app currently that only happens on samsung devices.

    When the phone receives multiple push notifications, the O.S. is grouping them. in turn, the badge on the side of the app icon only displays 1 since there is only one group of notifications (no matter how many notifications are in it)

    this gives a false impression of the level of urgency of getting the user back into the app.

    is there a feature that can disable this type of grouping when displaying a notification?

    🏚 stale 
    opened by christian-hess-94 1
Releases(4.3.3)
Owner
Wix.com
Open-sourcing useful pieces of code
Wix.com
React Native Library for OneSignal Push Notifications Service

React Native OneSignal SDK OneSignal is a free push notification service for mobile apps. This SDK makes it easy to integrate your native React-Native

OneSignal 1.5k Dec 28, 2022
Send or schedule Android system notifications for React Native.

react-native-system-notification Send or schedule Android system notifications for React Native. Table of Contents Installation Usage Creating Notific

null 15 Jul 15, 2022
Free React Native library to display local notifications.

React-Native NotiFREE ⚛ React Native library to display local notifications. A FREE alternative to React Native NotiFEE. Why? Nobody can remove the gr

Douglas Nassif Roma Junior 23 Nov 10, 2022
React Native Android Notification Listener - Listen for status bar notifications from all applications

react-native-android-notification-listener React Native Android Notification Listener is a library that allows you to listen for status bar notificati

Leandro Simões 87 Dec 26, 2022
Show internal notifications for react native application with TypeScript

React Native InApp Notifications Typescript component to show internal notifications for react native application Install yarn add react-native-intern

Viacheslav Volkov 4 Nov 29, 2022
Firebase incoming call notifications for React Native based applications.

Android Call Notifications App (React Native) Banner Notifications FullScreen Notifications Prerequisites for project Create a firebase project from f

Vishnu Ramineni 20 Dec 29, 2022
PushyPush - How to Code Push Notifications for React Native Apps

How to Code Push Notifications for React Native Apps Please step through the fol

Nick 5 Apr 27, 2022
Alarm clock functionality for react native ios and android using react-native-push-notification and react-native-community/async-storage

react-native-simple-alarm Alarm clock functionality for react native ios and android built using react-native-push-notification and react-native-commu

Jordan Daniels 74 Jan 6, 2023
A barcode scanner component for react native - not maintained anymore - use react-native-camera

react-native-barcodescanner - not maintained anymore - use react-native-camera Version 0.4.0 of react-native-camera includes barcode scanning for andr

Idea Creation / E-GUMA 540 Oct 31, 2022
React Native CallKit utilises a brand new iOS 10 framework CallKit to make the life easier for VoIP developers using React Native.

React Native CallKit utilises a brand new iOS 10 framework CallKit to make the life easier for VoIP developers using React Native.

React Native WebRTC 120 Nov 21, 2022
React-native-wordle - A simple re-implementation of wordle using react native

react native wordle A simple re-implementation of wordle. guess the randomly cho

Ananthu P Kanive 16 Sep 23, 2022
React-native-esbuild: The fastest bundler for React Native

Fast bundler and dev server for react-native using esbuild

Joel Arvidsson 492 Dec 31, 2022
React Native Firebase Authentication Starter, manage user authentication in React Native app with firebase

Sign up and sign in screens for mobile using React Native. This is an example of how to use Firebase Authentication in React Native application, how to let users create an account or log in to an existing account.

Maor 14 Sep 8, 2022
react native tooltip like never before, using leading packages like react-native-reanimated v2, framer-motion, and @gorhom/portal

react-native-tooltiplize react native tooltip like never before, using leading packages like react-native-reanimated v2, framer-motion, and @gorhom/po

Muhammad Saeed 27 Dec 6, 2022
Native filesystem access for react-native

react-native-fs Native filesystem access for react-native IMPORTANT For RN < 0.57 and/or Gradle < 3 you MUST install react-native-fs at version @2.11.

Hagen Hübel 4.6k Jan 6, 2023
react-native native module for In App Purchase.

Announcement React Native IAP hook is out. You can see medium post on how to use it. The react-native-iap module hasn't been maintained well recently.

dooboolab 2.3k Jan 4, 2023
React Native authentication with the native Touch ID popup.

React Native Touch ID React Native Touch ID is a React Native library for authenticating users with biometric authentication methods like Face ID and

Naoufal Kadhom 1.4k Jan 3, 2023
Native sensors access for react-native

react-native-sensor-manager Wrapper for react-native. Accelerometer, Gyroscope, Magnetometer, Orientation, Step Counter, Thermometer, LightSensor, and

Kevin Primicerio 230 Dec 15, 2022
React Native: Native Bottom Sheet - Text View

ReactNative: Native Bottom Sheet Text View (Android/iOS): Deprecated Due to time constraint, this library is deprecated and not maintained anymore, Y

Pranav Raj Singh Chauhan 22 Jul 4, 2021