React Native SDK

📘

Just starting with Android?

Check out our React Native SDK Integration guide.

Initialization

init

Initialises iZooto to register the device for push notifications. Should be called in the default class in the App.js file.
See React Native SDK Setup for details and code examples.

componentDidMount() {
  iZooto.initAndroid();	// FOR ANDROID
  iZooto.initiOSAppID("YOUR_IZOOTO_APP_ID");	// FOR IOS
}

User Permission

setSubscription

Can be used to not deliver notifications to a specific device. This method does not officially subscribe or unsubscribe users from the app settings, it unsubscribes them from receiving a push from iZooto.
You can call this method with false to opt-out users from receiving notifications through iZooto. You can pass true later to opt users back into notifications.

The below snippet needs to be added to the App.js file of the code.

componentDidMount() {
  iZooto.setSubscription(false);
}

navigateToSettings

This method can be used to take the users to the App Settings page to check the notification permissions and/or other app settings. This method becomes useful if the user has disabled notifications and you would like to have an option inside the app itself to re-direct the user to the App Settings page to allow the user to re-enable the notification permissions. The method can be called at the click of a button or any other event as per requirement.

navigateToSettings();

Token Handler

onTokenReceivedListener

This method will return the subscription token of the current device. The token would only be visible when the app has been launched after installation.

The following snippet goes in the App.js file.

componentDidMount() {
  iZooto.addEventListener('onTokenReceived', (token) => {
      console.log("iZooto Device Token", token)
    });
}

Notification Handlers

Implement Notification Handlers to send and receive data when a notification is received or clicked.

onNotificationReceivedListener

Fires when a notification is received. It will be fired when your app is in focus or in the background.

The following snippet goes in the App.js file.

componentDidMount() {
  // FOR ANDROID
  iZooto.onNotificationReceivedListener(payload => {
    console.log("Notification Payload",payload);	// THIS CAN BE CHANGED AS PER REQUIREMENT
  });
  
  // FOR IOS
  iZooto.addEventListener('onNotificationReceived',(data) => {
    console.log("Notification Payload Data ",data);	// THIS CAN BE CHANGED AS PER REQUIREMENT
  });
}

onNotificationOpenedListener

Use to process an iZooto notification the user just tapped on.

Add the below code snippet in the App.js file.

componentDidMount() {
  // FOR ANDROID
  iZooto.onNotificationOpenedListener(data => {
    console.log("DeepLink Data Received",data);	// THIS CAN BE CHANGED AS PER REQUIREMENT
  });
  
  // FOR IOS
  iZooto.addEventListener('onNotificationOpened',(openData) => {
    console.log("Notification Deep Link Data",openData);	// THIS CAN BE CHANGED AS PER REQUIREMENT
  });
}

WebView Handler

onWebViewListener

This method can be used to override iZooto's Landing URL and directly open them inside your app's WebView. No explicit notification handler code is required and you would not have to define additional key: value pairs to do so.
Using this will significantly reduce the campaign creation time.

Add the below code snippet in the App.js file.

componentDidMount() {
  // FOR ANDROID
  iZooto.onWebViewListener(landingUrl => {
    console.log("Landing URL",landingUrl);	// THIS CAN BE CHANGED AS PER REQUIREMENT
  });
  
  // FOR IOS
  iZooto.addEventListener('onWebView',(urlData) => {
    console.log("Notification WebView URL Data",urlData);	// THIS CAN BE CHANGED AS PER REQUIREMENT
  });
}

Notification Channel

setNotificationChannelName

This method can be used to define a custom Notification Channel name for the push notifications.

setNotificationChannelName(String channelName);

🚧

Points to Note

• The Notification Channel name cannot be more than 30 characters and the name cannot contain special characters.
• If no channel name is provided or if the character length is more than 30 characters, then the channel name will be AppName Notifications.
• If the App Name is also not available, then the channel name will be Push Notifications.

Appearance

setDefaultTemplate

The NewsRoom Template ensures that the background image covers the entire available surface area of the push notification with zero bezels. All the text is overlaid on the image. This works in both expanded and collapsed views.

import { PushTemplate } from 'react-native-izooto/src/PushTemplate';

componentDidMount() {
  iZooto.setDefaultTemplate(PushTemplate.TEXT_OVERLAY);
}

This would override the default behaviour and would use the new NewsRoom Template. Please refer to our Android Push Notification Templates guide for more details.

setDefaultNotificationBanner

If you plan to use the NewsRoom Template (as defined above), it is a good practice to define a default banner image to be used with the notification in case the actual banner image does not load due to network issues, etc. This would ensure that the notification is always pushed with a banner image.

iZooto.setDefaultNotificationBanner("image_name");

setBadgeCount (only for iOS)

Used to set a custom badge count to be displayed on the app icon on the device. By default, the notification count is set as incremental.

This can be modified to a static number by using the below method:

func applicationDidBecomeActive(_ application: UIApplication) {
  application.applicationIconBadgeNumber = 0
  iZooto.setBadgeCount(badgeNumber: 1)
}

- (void)applicationDidBecomeActive:(UIApplication *)application
{
  [iZooto setBadgeCountWithBadgeNumber:1];
  application.applicationIconBadgeNumber = 0;
}

If your project is built using SWIFT, you will have to make additional changes in the SceneDelegate.swift file as below:

@available(iOS 13.0, *)
func sceneDidBecomeActive(_ scene: UIScene) {
  UIApplication.shared.applicationIconBadgeNumber = 0
  iZooto.setBadgeCount(badgeNumber: 1)
}

@available(iOS 13.0, *)
func sceneWillEnterForeground(_ scene: UIScene) {
  UIApplication.shared.applicationIconBadgeNumber = 0
  iZooto.setBadgeCount(badgeNumber: 1)
}

🚧

Pass 0 in the setBadgeCount method to default to an incremental value.

Sound

setNotificationSound

Used to set a custom sound to the notifications when delivered on the device. The device's default notification sound is played by default, which can be overridden to use a custom sound for your app.

Add the below code to the respective files to enable this feature:

iZooto.setNotificationSound("Sound_File_Name");

iZooto.didReceiveNotificationExtensionRequest(bundleName :"YOUR_BUNDLE_NAME", soundName: "<SoundNameHere>",request: receivedRequest, bestAttemptContent: bestAttemptContent,contentHandler: contentHandler)

[iZooto didReceiveNotificationExtensionRequestWithBundleName:@"YOUR_BUNDLE_IDENTIFIER_NAME" soundName:@"Sound_Name_Here" request:self.receivedRequest bestAttemptContent:self.bestAttemptContent contentHandler: self.contentHandler];

🚧

Points to Note

• The notifications sound file should already be present in the project directory.
• Supported file types are .mp3 and .wav.
• The file name needs to be passed without the file extension for Android and with the file extension for iOS.

Analytics

setFirebaseAnalytics

iZooto will automatically send notification events to your analytics dashboard if Google Analytics for Firebase is correctly implemented.

Events
The iZooto SDK tracks events that pertain to notification open & receive events. The following events are sent:

The iZooto SDK also sends parameters that contain more info about the particular notification the event is attributed to. These can be directly defined when you create a campaign.

Follow the Firebase integration documentation and verify that Firebase is correctly functioning inside your application.

Once everything is set up, use the following code snippet in the App.js file to enable passing events to Firebase.

iZooto.setFirebaseAnalytics(true);

👍

You're Done!

Google Analytics for Firebase is now set up to receive iZooto events.