React Native Push Notification

Get Initial Notification

When your app is instantiated by clicking on push notification, you may need its payload; In order to get it, use getInitialNotification function

import React, { useEffect } from "react";

import { Alert } from "react-native";
import { getInitialNotification } from "reteno-react-native-sdk";

useEffect(() => {
  getInitialNotification().then((data) => {
    Alert.alert("getInitialNotification", data ? JSON.stringify(data) : data);
  });
}, []);

Initialize SDK and Event Handler

Before setting up any push notification listeners, initialize SDK and call initializeEventHandler() in the root component of your app.

Call it once, as early as possible:

import React, { useEffect } from "react";
import {
  initialize,
  initializeEventHandler,
  registerForRemoteNotifications,
} from "reteno-react-native-sdk";

useEffect(() => {
  const bootstrap = async () => {
    await initialize({
      apiKey: "YOUR_SDK_ACCESS_KEY",
    });
    initializeEventHandler();
    await registerForRemoteNotifications();
  };
  bootstrap();
}, []);

Note: Place this in the root component of your app (e.g., App.tsx), not inside a screen or nested component.

If your app uses @react-native-firebase/messaging, add iosDeviceTokenHandlingMode: "manual" to the initialize options:

await initialize({
  apiKey: "YOUR_SDK_ACCESS_KEY",
  iosDeviceTokenHandlingMode: "manual",
});

In this mode the SDK bridges the FCM token to Reteno automatically — no manual setDeviceToken call needed.

Listen for New Push Notifications while App Is Active

While app is open, you may need to track, if there is new push; To do so, set listener using setOnRetenoPushReceivedListener function;

import React, { useCallback, useEffect } from "react";

import { Alert } from "react-native";
import { setOnRetenoPushReceivedListener } from "reteno-react-native-sdk";

const onRetenoPushReceived = useCallback((event) => {
  Alert.alert("onRetenoPushReceived", event ? JSON.stringify(event) : event);
}, []);

useEffect(() => {
  const pushListener = setOnRetenoPushReceivedListener(onRetenoPushReceived);
  return () => pushListener.remove();
}, [onRetenoPushReceived]);

Listen for Push Notification Clicks

To handle push notification clicks, you can set up a listener using the setOnRetenoPushClickedListener function provided by the reteno-react-native-sdk.

import React, { useCallback, useEffect } from "react";

import { Alert } from "react-native";
import { setOnRetenoPushClickedListener } from "reteno-react-native-sdk";

const onRetenoPushClicked = useCallback((event) => {
  Alert.alert("onRetenoPushClicked", event ? JSON.stringify(event) : event);
}, []);

useEffect(() => {
  const pushClickListener = setOnRetenoPushClickedListener(onRetenoPushClicked);
  return () => pushClickListener.remove();
}, [onRetenoPushClicked]);

Listen for Push Dismiss Events (Android only)

import React, { useEffect } from "react";

import { Alert } from "react-native";
import { setOnRetenoPushDismissedListener } from "reteno-react-native-sdk";

useEffect(() => {
  const dismissedListener = setOnRetenoPushDismissedListener((event) => {
    Alert.alert("onRetenoPushDismissed", event ? JSON.stringify(event) : event);
  });

  return () => {
    if (dismissedListener) dismissedListener.remove();
  };
}, []);

Listen for Custom Push Data (Android only)

import React, { useEffect } from "react";

import { Alert } from "react-native";
import { setOnRetenoCustomPushDataListener } from "reteno-react-native-sdk";

useEffect(() => {
  const customPushListener = setOnRetenoCustomPushDataListener((event) => {
    Alert.alert("onRetenoCustomPushData", event ? JSON.stringify(event) : event);
  });

  return () => {
    if (customPushListener) customPushListener.remove();
  };
}, []);

Notification Permission Helpers (Android only)

Use SDK helper methods to request permission and read the current status.

import {
  requestNotificationPermission,
  getNotificationPermissionStatus,
} from "reteno-react-native-sdk";

requestNotificationPermission().then((granted) => {
  console.log("Notification permission granted:", granted);
});

getNotificationPermissionStatus().then((status) => {
  // ALLOWED | DENIED | PERMANENTLY_DENIED
  console.log("Notification permission status:", status);
});

Pause Push-triggered In-App Messages (Android only)

import {
  pausePushInAppMessages,
  setPushInAppMessagesPauseBehaviour,
} from "reteno-react-native-sdk";

pausePushInAppMessages(true); // pause
pausePushInAppMessages(false); // unpause

setPushInAppMessagesPauseBehaviour("SKIP_IN_APPS");
setPushInAppMessagesPauseBehaviour("POSTPONE_IN_APPS");

Manual Permission Flow Fallback on Android

When dealing with notifications on Android 13 and later versions, it's important to handle permissions properly at runtime. After obtaining permission from the user, you need to notify the Reteno SDK by calling the updatePushPermissionStatusAndroid() function from the Reteno interface.

import React, { useEffect } from "react";

import { updatePushPermissionStatusAndroid } from "reteno-react-native-sdk";

useEffect(() => {
  PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS!
  ).then((result) => {
    if (result === "granted") {
      updatePushPermissionStatusAndroid().then((status) => {
        console.log("Update status:", status);
      });
    }
  });
}, []);