Callbacks

To listen to events triggered by the Nudge SDK in a React Native application, you need to set up event listeners using DeviceEventEmitter.

1. Register Event Listeners

In React Native, you can register listeners to receive callback events emitted by the SDK. The two main event types emitted by the SDK are:

• NUDGE_CORE_CALLBACK: For core events, such as tracking events.
• NUDGE_UI_CALLBACK: For UI-related events triggered by the SDK.

Below is an example of how to set up and manage these event listeners.

Example:

import { useEffect } from 'react';
import { DeviceEventEmitter } from 'react-native';

const MyComponent = () => {
  useEffect(() => {
    // Listener for Core Events
    const coreCallbackListener = DeviceEventEmitter.addListener(
      'NUDGE_CORE_CALLBACK',
      (event) => {
        console.log('Core Event Received:', event);
        handleCoreEvent(event);
      }
    );

    // Listener for UI Events
    const uiCallbackListener = DeviceEventEmitter.addListener(
      'NUDGE_UI_CALLBACK',
      (event) => {
        console.log('UI Event Received:', event);
        handleUIEvent(event);
      }
    );

    // Cleanup listeners on unmount
    return () => {
      coreCallbackListener.remove();
      uiCallbackListener.remove();
    };
  }, []);

  const handleCoreEvent = (event) => {
    switch (event.action) {
      case 'NUDGE_INITIALISED':
        console.log('SDK Initialized:', event.data.sdk_version);
        break;

      case 'NUDGE_USER_IDENTIFIER_SUCCESS':
        console.log('User Identified Successfully:', event.data.user_details);
        break;

      case 'NUDGE_USER_IDENTIFIER_FAILURE':
        console.error('User Identification Failed:', event.data.error);
        console.log('User Details:', event.data.user_details);
        console.warn('Retry Message:', event.data.message);
        break;

      case 'NUDGE_TRACK_EVENT':
        console.log('Track Event:', event.data.event, 'Response:', event.data.response);
        break;

      case 'NUDGE_REWARD_RECEIVED':
        console.log('Reward Received:', event.data.rewards);
        break;

      default:
        console.log('Unhandled Core Event:', event.action, event.data);
    }
  };

  const handleUIEvent = (event) => {
    switch (event.action) {
      case 'NUDGE_EXPERIENCE_OPEN':
        console.log('Experience Opened:', {
          campaignId: event.data.CAMPAIGN_ID,
          rootId: event.data.ROOT_ID,
          displayType: event.data.DISPLAY_TYPE,
        });
        break;

      case 'NUDGE_EXPERIENCE_DISMISS':
        console.log('Experience Dismissed:', {
          campaignId: event.data.CAMPAIGN_ID,
          rootId: event.data.ROOT_ID,
          displayType: event.data.DISPLAY_TYPE,
        });
        break;

      case 'NUDGE_EXPERIENCE_HIDDEN':
        console.log('Experience Hidden:', event.data);
        break;

      case 'NUDGE_COMPONENT_CTA_CLICK':
        console.log('CTA Clicked:', {
          clickType: event.data.CLICK_TYPE,
          target: event.data.TARGET,
        });
        break;

      default:
        console.log('Unhandled UI Event:', event.action, event.data);
    }
  };

  return null; // Replace with your UI components
};

export default MyComponent;

Callback	Action	Data Structure
NUDGE_CORE_CALLBACK	NUDGE_INITIALISED	{ sdk_version: string }
	NUDGE_USER_IDENTIFIER_SUCCESS	{ user_details: { name: string, email: string, phone_number: string, external_id: string } }
	NUDGE_USER_IDENTIFIER_FAILURE	{ user_details: { name: string, email: string, phone_number: string, external_id: string }, error: string, message: string }
	NUDGE_TRACK_EVENT	{ event: string, response: object }
	NUDGE_REWARD_RECEIVED	{ rewards: object[] }
NUDGE_UI_CALLBACK	NUDGE_EXPERIENCE_OPEN	{CAMPAIGN_ID : string, CAMPAIGN_NAME : string, DISPLAY_NAME: string, DISPLAY_TYPE : string, DISPLAY_ID: string}
	NUDGE_EXPERIENCE_DISMISS	{CAMPAIGN_ID : string, CAMPAIGN_NAME : string, DISPLAY_NAME: string, DISPLAY_TYPE : string, DISPLAY_ID: string}}
	NUDGE_EXPERIENCE_HIDDEN	{ ... }
	NUDGE_COMPONENT_CTA_CLICK	{TARGET: string, CAMPAIGN_ID: string, CAMPAIGN_NAME: string, WIDGET_NAME: string, WIDGET_ID: string, DISPLAY_NAME: string, CLICK_TYPE: string, DISPLAY_ID: string} `

2. Handle Callback Events

Now, you can define how to handle the events within the handleCoreCallback and handleUICallback functions.

• Core Event Example: Respond to tracking events or other core SDK operations.
• UI Event Example: Handle changes or updates to the user interface based on SDK triggers.

Cleanup

Ensure that the event listeners are properly removed to avoid memory leaks when the component unmounts. This is handled in the return statement of the useEffect hook.