React Native Local Notifications for iOS and Android

iOS Preview	Android Preview
iOS.mp4	Android.mp4

Install

npm i react-native-local-notifier

Linking

React Native v0.60+

The package is automatically linked when building the app. All you need to do is:

For ios:

cd ios && pod install

For android, the package will be linked automatically on build.

NOTE: If you target iOS you will still have to manually update the AppDelegate.h and AppDelegate.mm (as below).

NOTE: For Android, you will still have to manually update the AndroidManifest.xml (as below).

Android Configurations

NOTE: sendLocalNotification() works without changes in the application part, while scheduleLocalNotification() only works with these changes:

In your android/app/src/main/AndroidManifest.xml

   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.test">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SCHEDULE_EXACT_ALARM"/> <!-- add this permission -->

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

      <receiver
            android:name="com.ahmedessam.helpers.NotificationReceiver"
            android:enabled="true"/> <!-- add this receiver -->

      ...
    </application>
</manifest>

iOS Configurations

Update AppDelegate.h

At the top of the file:

#import <RNLocalNotifierModule.h>

Then, add the 'UNUserNotificationCenterDelegate' to protocols:

@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>

Update AppDelegate.mm

at the end of your AppDelegate file before @end, add the following:

- (void)registerForLocalNotifications {

   UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
   center.delegate = self;
}

-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler{

   UIApplicationState state = [[UIApplication sharedApplication] applicationState];

  if (state == UIApplicationStateActive) {
      if (@available(iOS 14.0, *)) {
        completionHandler(UNNotificationPresentationOptionBanner);
      } else {
        completionHandler(UNNotificationPresentationOptionAlert);

      }

    }

    else {

      if (@available(iOS 14.0, *)) {
        completionHandler(UNNotificationPresentationOptionSound | UNNotificationPresentationOptionBanner);
      } else {
        completionHandler(UNNotificationPresentationOptionSound | UNNotificationPresentationOptionAlert);
      }
    }

}

And then add the following line in didFinishLaunchingWithOptions:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [self registerForLocalNotifications]; // add this line
  ...

  return YES;
}

Import Package

import LocalNotifier from 'react-native-local-notifier';

Grant Permission (iOS Only)

LocalNotifier.requestAuthorization() : Promise<boolean>

EXAMPLE:

useEffect(() => {
  LocalNotifier.requestAuthorization().then((isGranted) => {
    console.log('requestAuthorization', isGranted);
  });
}, []);

Local Notifications

LocalNotifier.sendNotification(details: Object)

EXAMPLE:

const notifierObject = {
  title: 'Some Title',
  body: 'this is some body',
};
LocalNotifier.sendNotification(notifierObject);

Scheduled Notifications

LocalNotifier.scheduleNotification(details: Object)

EXAMPLE:

const notifierObject = {
  title: 'Some Scheduled Title',
  body: 'this is some Scheduled body',
  delay: 5, // in seconds
};
LocalNotifier.scheduleNotification(notifierObject);

Author

👤 Ahmed Halbas

• Github: @AhmedHalbas
• LinkedIn: @AhmedHalbas

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!