Nami Emitters for React Native

The React Native version of the Nami SDK uses emitters to handle callbacks, which is different from how the native SDK works. To make use of the emitters, your React Native code can attach listeners to the emitters.

There are two event emitters in the Nami SDK, one for general Nami callbacks and one for Analytics callbacks.

Each callback receives an event containing a dictionary that has keys with the same name as the callback block in the native SDK.

In some cases, some arguments may be omitted when a specific parameter has no way of being passed through the React Native bridge (like a raising view controller in the paywall handler callback).

When a Swift/Objective-C object exists in normal parameters, it will be converted to a dictionary (shape) for passing across the React Native bridge. This event will have all of the values needed from the native object to use it in your React Native project. The main effect you'll find is that instead of receiving a NamiMetaProduct object, you'll find a product dictionary that has most values from the Nami product and the embedded SKProduct objects combined into one dictionary of key/value pairs. See our docs on the React Native dictionaries for specific details of these mappings.

There are two Emitter classes that can be set up for listening:

import { NativeEventEmitter, NativeModules } from 'react-native';

const { NamiEmitter } = NativeModules;
const { NamiAnalyticsEmitter } = NativeModules;
const eventEmitter = new NativeEventEmitter(NamiEmitter);
const analyticsEmitter = new NativeEventEmitter(NamiAnalyticsEmitter);

📘

AnalyticsEmitter - Custom Billing Plan Feature

Our analytics integrations are part of our Custom Billing Plans. If you are not on a custom billing plan, the NamiAnalyticsEmitter will not produce any events. Please contact [email protected] if you'd like to add access to these features.

You can set up listeners for the events from the emitters wherever you'd like in your code, but we recommend placing them somewhere that is called as early as possible.

👍

Nami Best Practice

We recommend adding event listeners in the useEffect or componentDidMount method so that your code can respond more quickly to events as they occur.

import { NativeEventEmitter, NativeModules } from 'react-native';

const { NamiEmitter } = NativeModules;
const { NamiAnalyticsEmitter } = NativeModules;
const eventEmitter = new NativeEventEmitter(NamiEmitter);
const analyticsEmitter = new NativeEventEmitter(NamiAnalyticsEmitter);

useEffect(() => {
  eventEmitter.addListener('PurchasesChanged', onSessionConnect);
  analyticsEmitter.addListener('NamiAnalyticsSent', onNamiAnalyticsReceived);
},[])

import { NativeEventEmitter, NativeModules } from 'react-native';

componentDidMount(){
 const { NamiEmitter } = NativeModules;
 const { NamiAnalyticsEmitter } = NativeModules;
 const eventEmitter = new NativeEventEmitter(NamiEmitter);
 const analyticsEmitter = new 	  NativeEventEmitter(NamiAnalyticsEmitter);
 eventEmitter.addListener('PurchasesChanged', onSessionConnect);
 analyticsEmitter.addListener('NamiAnalyticsSent', onNamiAnalyticsReceived);
}

A handler function for any of these events is a simple function that takes a single event argument, and then pulls parameter values the event dictionary passed in:

const onNamiAnalyticsReceived = (event) => {
  console.log("Analytics Dictionary or JSON data", event);
  const { analyticsItems, actionType} = event;
  addAnalyticEvent(analyticsItems, actionType)
}
  
const addAnalyticEvent = async (analyticsItems, actionType) => {
  switch (actionType)
}

onNamiAnalyticsReceived = (event) => {
  console.log("Analytics Dictionary or JSON data", event);
  const { analyticsItems, actionType} = event;
  addAnalyticEvent(analyticsItems, actionType)
}
  
addAnalyticEvent = async (analyticsItems, actionType) => {
  switch (actionType)
}

The possible events you can listen to for the NamiEmitter are:

• AppPaywallActivate - arguments with keys developerPaywallID, products, paywallMetadata
• EntitlementsChanged
• PurchasesChanged - argument with key products
• SignInActivate - arguments with keys developerPaywallID

The possible events you can listen to for the NamiAnalyticsEmitter are:

• NamiAnalyticsSent - arguments with keys actionType, analyticsItems