React Native SDK

Comprehensive reference of iZooto's SDK methods for Android & iOS apps built with the React Native framework.

📘

Just starting with Android?

Check out our React Native SDK Integration guide.

ParameterData TypeDescription
Initialisation
initBuilder MethodInitialises 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.
User Permission
setSubscriptionMethodDisables iZooto from sending notifications to the current device.
Notifications Handler
onNotificationReceivedListenerHandlerCalled when a notification is received by a device.
onNotificationOpenedListenerHandlerCalled when the notification is clicked by the user.
WebView Handler
onWebViewListenerHandlerTo open Landing URL inside your app's activity.
Appearance
setDefaultTemplateMethodCustomize your notification template instead of the default Android template. Details available here.
setDefaultNotificationBannerMethodDefine a default banner image to be used when using the custom template. Details available here.
setBadgeCountMethodCustomize the badge count displayed on the app icon.
Sound
setNotificationSoundMethodCustomize the sound that gets played whenever a notification is received on the device.
Analytics
setFirebaseAnalyticsMethodSend events to Google Analytics to track your campaign performance.
Android Tags
addTagMethodUse this method to tag a users to a specific value.
removeTagMethodUser this method to remove already tagged users from a value.
Get Tags List
REST: GET API
APIGet a list of all the tags that you have created for you app along with the number of users inside that tag.
Send Campaigns to Tagged Users
REST: POST API
APIUse this to send out notifications to only your tagged users.

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);
}

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
  });
}

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:

Event NamePurpose
push_notification_openedAn iZooto notification was opened
push_notification_receivedAn iZooto notification was received.
push_notification_influence_openAn application was opened within 2 minutes of an iZooto notification being received.

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.

Parameter NamePurpose
sourceTo attribute this event's source to the iZooto SDK
mediumA formal indication that the medium for the event is a notification.
campaignBy default, it would be your campaign name.
termCan be used to track keywords
contentCan be used to differentiate between links that point to the same URL.

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.