react-native-xeno

React Native SDK for Xeno Ecosystem

How to use

• Add this in your package.json

react-native-xeno: $latest_version

Using with React Native Expo

If your app is built with Expo (managed or development client), follow Xeno's official Expo integration guide to ensure compatibility, and EAS build support.

Using with React Native CLI

If you're using the standard React Native CLI (non-Expo), follow the steps below to configure the Xeno SDK for both Android and iOS platforms.

Platform wise configuration

Android

1- Configure Xeno in application class

• If you don't have Application class , create one XenoApplication : Application()
  • Add below line in onCreate method

package com.getxeno.com.android.example

import android.app.Application
import com.xenoreactnative.XenoReactNativeInitializer
import com.xenoreactnative.model.XenoConfigReactNative

class XenoApplication : Application() {
    override fun onCreate() {
        super.onCreate()

        XenoReactNativeInitializer.configure(
            application = this,
            config = XenoConfigReactNative(
                apiKey = "YOUR_XENO_API_KEY",
                isDebug = true,
                notificationSmallIcon = R.drawable.ic_notification_icon_small
            )
        )
    }
}

2- Configure application's manifest.xml

• Add Notification Permission

<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

• Then Add this XenoApplication application class

<application
	android:name=".XenoApplication"
	android:icon="@mipmap/ic_launcher"
	android:label="Xeno Example">
	<activity android:name=".MainActivity"/>
</application>

iOS

1- Configure Xeno in AppDelegate

Option A: Swift AppDelegate

import UIKit
import ReactNativeXeno
import XenoIos

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {

        XenoReactNativeInitializer.configure(
            config: XenoConfigReactNative(apiKey: "YOUR_XENO_API_KEY", isDebug: false),
            launchOptions: launchOptions
        )

        return true
    }
}

Option B: Objective-C AppDelegate

AppDelegate.m:

#import "AppDelegate.h"
#import <ReactNativeXeno/XenoReactNativeInitializerObjc.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    [XenoReactNativeInitializerObjc initializeSdkWithApplication:application
                                                          apiKey:@"YOUR_XENO_API_KEY"
                                                         isDebug:NO
                                                   launchOptions:launchOptions];

    return YES;
}

@end

2- Enable Push Notification

• Open Project is xcode
  • Select Runner from left tile
  • Then select Signing & Capabilities tab
  • Then click on + Capabilities
  • Then search for Push Notifications and click on the Push Notifications from search to add.

Note : This (step 1) can be skipped in case already completed

3- Add this in application's info.plist

<key>UIBackgroundModes</key>

<array>
	<string>fetch</string>
	<string>remote-notification</string>
</array>

Note : This (step2) can be skipped in case already completed

4- Enable IOS to receive Image in Notifications

• Visit here for more details - Add a notification service extension

  • From Xcode top menu go to: File > New > Target...
  • A modal will present a list of possible targets, scroll down or use the filter to select Notification Service Extension. Press Next.
  • Add a product name (use ImageNotification to follow along) and click Finish
  • Enable the scheme by clicking Activate

• Add target to the Podfile Ensure that your new extension has access to Firebase/Messaging pod by adding it in the Podfile:

  • From the Navigator open the Podfile: Pods > Podfile
  • Scroll down to the bottom of the file and add

    target 'ImageNotification' do
      use_frameworks! :linkage => :static
      pod 'Firebase/Messaging'
    end

  • Install or update your pods using pod install from the ios folder
  • Use the extension helper (Objective-C) At this point everything should still be running normally. This is the final step which is invoking the extension helper.
  • From the navigator select your ImageNotification extension
  • Open the NotificationService.m file
  • At the top of the file import FirebaseMessaging.h right after the NotificationService.h as shown below

#import "NotificationService.h"
#import "FirebaseMessaging.h"

• Then replace everything from line 25 to 28 with the extension helper

// Modify the notification content here...

- self.bestAttemptContent.title = [NSString stringWithFormat:@"%@ [modified]", self.bestAttemptContent.title]; - self.contentHandler(self.bestAttemptContent);

+ [[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent withContentHandler:contentHandler];

• Use the extension helper (Swift)

Note : This (step 3) can be skipped in case already completed

Setting User Context to Xeno SDK

import XenoSdk from "react-native-xeno";


await XenoSdk.setUser({
    countryCode: "+91",
    phone: "9999999999",
    name: "User full name",
    email: "[email protected]"
});

Requesting Notification Permission on your application's main screen.

• This will show a popup to the user asking for permission to send notifications.
  • This will handle the user's response and update the user's notification permission status in Xeno-SDK.
  • If you will not pass context and config then it will show the default popup and will handle the user's response and update the user's notification permission status in Xeno-SDK.

import { useEffect } from 'react';
import XenoSdk from "react-native-xeno";

useEffect(() => {
  const requestPermission = async () => {
    await XenoSdk.requestNotificationPermission({
        title: 'Stay in the know!',
        body: 'Enable push notifications and never miss a thing.',
        primaryButtonText: 'Enable Notifications',
        primaryButtonRadius: 6,
        secondaryButtonText: 'Not Now',
        decoration: {
          radius: 12,
          backgroundColor: '#FFFFFF',
          primaryColor: '#0000FF',
          secondaryColor: '#808080',
        },
      });
  };

  setTimeout(requestPermission, 0);
}, []);

Submitting FCM Device Token to Xeno SDK

import XenoSdk from "react-native-xeno";


const sendFcmTokenToXeno = async () => {
  const fcmDeviceToken = await messaging().getToken();

  if (fcmDeviceToken) {
    await XenoSdk.updateDeviceToken(fcmDeviceToken);
  }
};

Handle Incoming Push Messages

import messaging from '@react-native-firebase/messaging';

import XenoSdk from "react-native-xeno";


useEffect(() => {
  const unsubscribe = messaging().onMessage(async remoteMessage => {
		/// onMessageReceived has 2 arguments, 'remoteMessage'
    /// remoteMessage : received message from Firebase messaging
    /// true/false based on you want to display notifications or not
    XenoSdk.onMessageReceived(remoteMessage, true);
  });

  return unsubscribe; // Clean up listener on unmount
}, []);

Handling Deep Links

import XenoSdk from "react-native-xeno";

// Handle case when app is launched by tapping on a notification
XenoSdk.getInitialDeeplink().then((deeplink) {
    // TODO: Redirect to some screen based on deeplink
});

// Handle case when app is in foreground and a notification is tapped
XenoSdk.listenDeeplink().listen((deeplink) {
    // TODO: Redirect to some screen based on deeplink
});

Capturing Events

Track user interactions and custom events in your app using the captureEvent method:

import XenoSdk from "react-native-xeno";

// Event with custom data
await XenoSdk.captureEvent('button_clicked', {
    screen_name: 'home_screen',
    button_id: 'login_button',
    timestamp: Date.now()
});