react-native-simple-notifications v1.2.1

React Native Simple Notifications

Android

Setup Firebase

If you haven't already, set up Firebase in your project.

No SDK's will have to be added (you can skip Step 4: Add Firebase SDKs to your app)

Notification Icon

It's a good idea to use a custom notification icon. You can specify which icon to use in your AndroidManifest.xml

<meta-data
      android:name="com.google.firebase.messaging.default_notification_icon"
      android:resource="@drawable/notification_icon" />

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

It's recommended to use an icon which is white with a transparent background, as the color you set will be the color set for the entire icon.

It's also very hard to know which background color will be picked for the notification, as it varies between different OS versions (MaterialU will change it depending user settings) and flavours (Samsung does it one way and Pixel does it another). So try to pick a color which will work on most backgrounds.

You can generate an icon using this guide, and you can add colors to your Android project, by creating ${project-root}/android/app/src/main/res/values/colors.xml and adding:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="notification_icon">#HEXCOLORVALUE</color>
</resources>

iOS

Add Capabilities : Background Mode - Remote Notifications

Go into your MyReactProject/ios dir and open MyProject.xcworkspace workspace. Select the top project "MyProject" and select the "Signing & Capabilities" tab. Add a 2 new Capabilities using "+" button:

• Background Mode capability and tick Remote Notifications.
• Push Notifications capability

AppDelegate.m(m)

In AppDelegate implementation, add

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
 NSMutableString *hexString = [NSMutableString string];
  NSUInteger deviceTokenLength = deviceToken.length;
  const unsigned char *bytes = (unsigned char *)deviceToken.bytes;
  for (NSUInteger i = 0; i < deviceTokenLength; i++) {
    [hexString appendFormat:@"%02x", bytes[i]];
  }
  [[NSNotificationCenter defaultCenter] postNotificationName:@"RemoteNotificationsRegistered"
                                                      object:self
                                                    userInfo:@{@"token" : [hexString copy]}];
}

- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
 [[NSNotificationCenter defaultCenter] postNotificationName:@"RemoteNotificationsFailedToRegister"
                                                      object:self
                                                    userInfo:@{@"error": error}];
}

Usage

getToken

import SimpleNotifications from 'react-native-simple-notifications';

try {
  const token = await SimpleNotifications.getToken();
  // send token to push notification server
} catch (error) {
  console.log('getToken error', error);
}

createNotificationChannel (Android only)

Notification channels are required since Android 8. FCM automatically creates a default channel if none is specified, but when androidSdkTarget < 33, creating a notification channel is what requests notification permissions on Android >= 13, so it's recommended to manually create one. It's safe to call this function repeatedly. If you create it manually, you must tell FCM to use the channel you created by adding the following in your AndroidManifest.xml:

<meta-data
    android:name="com.google.firebase.messaging.default_notification_channel_id"
    android:value="uniqueChannelId" />

import SimpleNotifications from 'react-native-simple-notifications';

try {
  await SimpleNotifications.createNotificationChannel(
    'uniqueChannelId',
    'uniqueChannelName', // friendly name shown to the user in the apps settings
  );
  // send token to push notification server
} catch (error) {
  console.log('createNotificationChannel error', error);
}

Note: When launching the Android app through the react-native cli, there's currently a weird bug that prevents the permission dialog from showing immediately after the creation of a notification channel. Instead the dialog is shown when the app is re-opened. This is not the case when launched through Android Studio. We are yet to determine if there's any issues in published versions.

Notification providers

This section explains some quirks with specific notification providers.

Using AWS pinpoints default notification structure doesn't work when using this library. In the pinpoint console, and when using the js sdk, you need to specify that you're sending RAW messages. Pinpoint normally uses a format that @aws-amplify/pushnotification understands, which is far too complicated for most use cases. react-native-simple-notifications relies on the OS itself handling the notification, but that means that a specific structure is required.

When using the pinpoint console to send test messages, you can specify RAW message format. In the input box, put the following:

{
  "APNSMessage": {
    "alert": {
      "title": "your-title",
      "body": "your-body"
    },
    "sound": "your-sound OR default"
  },
  "GCMMessage": {
    "notification": {
      "title": "your-title",
      "body": "your-body"
    }
  }
}

Similarly, when using the js sdk, you also need to specify RAW content:

new SendMessagesCommand({
  // ... other params
  MessageConfiguration: {
    APNSMessage: {
      RawContent: JSON.stringify({
        alert: {
          title,
          body,
        },
        sound: 'default', // or your own sound
      }),
    },
    GCMMessage: {
      RawContent: JSON.stringify({
        notification: {
          title,
          body,
        },
      }),
    },
  },
});

More info on how google and apple defines their message structures can be found on google docs and on apple docs

Credits

Parts of this project are inspired/taken from https://github.com/react-native-push-notification/ios