SDK

Implementation

If you've completed the steps described in the Setup guides, you are now ready to implement our React Native library in your app. Our library supports iOS version 10 and up. Make sure you always have the latest React Native SDK when using this library.

If you are upgrading from an older version of our library, it's always a good idea to read our Migration guide.

Install the SDK

The Notificare SDK is compatible with apps supporting Android 6+ and iOS 10+.

# Required
npm i react-native-notificare

# Optional modules
npm i react-native-notificare-inbox
npm i react-native-notificare-push
npm i react-native-notificare-push-ui

Configuration file

In order to connect your app to Notificare, you need to download the configuration file from the Dashboard and place it under your project's native modules. The configuration file can be downloaded by opening your Notificare application and going into the App Keys section via Menu > Settings > App Keys.

app keys v3 download

Place the downloaded Android configuration file under android/app/notificare-services.json.

For your reference, here's what this file should look like:

{
  "project_info": {
    "application_id": "{{ YOUR APPLICATION ID }}",
    "application_key": "{{ YOUR APPLICATION KEY }}",
    "application_secret": "{{ YOUR APPLICATION SECRET }}"
  }
}

It is recommended that you create at least two different apps in Notificare using separated environments for development and production. For each app you will have a different set of keys, resulting in two different configuration files. We recommend you to leverage Android's build variants / product flavours to manage which file will be embedded in the application.

Place the downloaded iOS configuration file under ios/YOUR_APP/NotificareServices.plist.

For your reference, here's what this file should look like:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>APPLICATION_ID</key>
    <string>{{ YOUR APPLICATION ID }}</string>
    <key>APPLICATION_KEY</key>
    <string>{{ YOUR APPLICATION KEY }}</string>
    <key>APPLICATION_SECRET</key>
    <string>{{ YOUR APPLICATION SECRET }}</string>
</dict>
</plist>

It is recommended that you create at least two different apps in Notificare using separated environments for development and production. For each app you will have a different set of keys, resulting in two different configuration files. We recommend you to leverage Xcode's Build Phases to manage which file will be embedded in the application. You read more about it in our Customizations section.

Launching Notificare

Launching Notificare is as simple as calling Notificare.launch(). However, before launching, you may want to consider customising some properties.

In the core module you can enable advanced logging which is helpful to diagnose problems during the development.

Despite not being mandatory, a good place to launch Notificare is when your main component is mounted. A small code sample can be found below.

useEffect(() => {
  (async () => {
    // Output additional logs. Useful to diagnose problems and execution flows.
    await Notificare.setUseAdvancedLogging(true);

    // Launch Notificare! 🚀
    await Notificare.launch();
  })();
}, []);

Listening to events

You can listen to the ready and device_registered events. This is a good opportunity to perform additional steps when Notificare becomes ready or when the device is updated.

useEffect(() => {
  const subscriptions = [
    Notificare.onReady((application) => {
      // At this point you have been assigned a temporary device identifier
      // All services subscribed can be used
    }),
    Notificare.onReady((application) => {
      // At this point you know a device is registered with the Notificare API
      // This method will be called every time something changes, be it token, push enabled/disabled or other property changes
      // Use this method to keep track of device changes in your own app or act on those changes
    }),
  ];

  // Remove event subscriptions on un-mount.
  return () => subscriptions.forEach((sub) => sub.remove());
}, []);

Un-launch Notificare

Finally, it is also possible to completely remove all data for a device, both locally in your app and remotely in our servers. To do that, use the following method:

await Notificare.unlaunch()

After invoking this, all the device's data will be destroyed and cannot be undone. Also, invoking any other method in Notificare will fail, and the only way to start using the SDK again, is by invoking its counterpart, the launch method.