The AppDNA SDK provides a complete push notification module for registering device tokens, handling notification delivery, and tracking user interactions in React Native.
Before using push notifications, configure the native push services for each platform:
iOS
- In Xcode, enable the Push Notifications capability under your target’s Signing & Capabilities tab.
- Generate an APNs authentication key (.p8 file) in the Apple Developer Portal.
- Upload the .p8 key to the AppDNA Console under Settings > Push > iOS Configuration.
Android
- Add your
google-services.json file to the android/app directory.
- Upload the Firebase Server Key to the AppDNA Console under Settings > Push > Android Configuration.
Without the platform-specific push credentials uploaded to the Console, push notifications will not be delivered to your users.
Static Methods
The AppDNA class exposes top-level static methods for common push operations:
Set Token
Pass a device push token to the SDK manually:
await AppDNA.setPushToken("device-token-string");
Set Permission Status
Update the SDK with the current push permission status:
await AppDNA.setPushPermission(true);
Track Delivery
Track when a push notification is delivered to the device:
await AppDNA.trackPushDelivered("push-123");
Track Tap
Track when a user taps on a push notification, with an optional action identifier:
await AppDNA.trackPushTapped("push-123", "open_workout");
Push Module
Access the push module through the AppDNA.push property for advanced usage:
const push = AppDNA.push;
Module Methods
| Method | Signature | Description |
|---|
setToken | setToken(token: string): Promise<void> | Register a device push token |
setPermission | setPermission(granted: boolean): Promise<void> | Update the push permission status |
trackDelivered | trackDelivered(pushId: string): Promise<void> | Track notification delivery |
trackTapped | trackTapped(pushId: string, action?: string): Promise<void> | Track notification tap with optional action |
requestPermission | requestPermission(): Promise<boolean> | Request push permission from the user |
getToken | getToken(): Promise<string | null> | Returns the current device token, or null |
setDelegate | setDelegate(delegate: AppDNAPushDelegate): void | Set a delegate for push notification callbacks |
Request Permission
Request push notification permission from the user. This presents the system permission dialog:
const granted = await AppDNA.push.requestPermission();
if (granted) {
console.log("Push permission granted");
} else {
console.log("Push permission denied");
}
Get Current Token
Retrieve the current device push token:
const token = await AppDNA.push.getToken();
if (token) {
console.log("Current token:", token);
}
AppDNAPushDelegate
Set a delegate to receive push notification lifecycle callbacks:
interface AppDNAPushDelegate {
onPushTokenRegistered(token: string): void;
onPushReceived(notification: Record<string, unknown>, inForeground: boolean): void;
onPushTapped(notification: Record<string, unknown>, actionId?: string): void;
}
Example Implementation
AppDNA.push.setDelegate({
onPushTokenRegistered(token: string) {
console.log("Token registered:", token);
},
onPushReceived(notification: Record<string, unknown>, inForeground: boolean) {
if (inForeground) {
// Show in-app notification banner
showBanner(notification.title, notification.body);
}
},
onPushTapped(notification: Record<string, unknown>, actionId?: string) {
if (actionId) {
// Handle custom action
handleAction(actionId);
}
},
});
Standalone AppDNAPush Class
For a more React-idiomatic approach, use the standalone AppDNAPush class with callback-based listeners:
import { AppDNAPush } from '@appdna/react-native-sdk';
Methods
| Method | Signature | Description |
|---|
requestPermission | requestPermission(): Promise<boolean> | Request push permission from the user |
onPushReceived | onPushReceived(callback: (payload: PushPayload) => void): () => void | Listen for received notifications |
onPushTapped | onPushTapped(callback: (payload: PushPayload) => void): () => void | Listen for notification taps |
Example with Listeners
import { AppDNAPush } from '@appdna/react-native-sdk';
// Request permission
const granted = await AppDNAPush.requestPermission();
// Listen for received push notifications
const unsubReceived = AppDNAPush.onPushReceived((payload) => {
console.log("Push received:", payload.title);
});
// Listen for push notification taps
const unsubTapped = AppDNAPush.onPushTapped((payload) => {
console.log("Push tapped:", payload.push_id);
if (payload.action_value) {
navigateTo(payload.action_value);
}
});
// Clean up listeners when component unmounts
unsubReceived();
unsubTapped();
Always call the unsubscribe function returned by onPushReceived and onPushTapped when the component unmounts to prevent memory leaks.
PushPayload
The PushPayload type contains the notification content:
| Property | Type | Description |
|---|
push_id | string | Unique identifier for the notification |
title | string | Notification title |
body | string | Notification body text |
image_url | string | undefined | URL to a rich notification image |
data | Record<string, unknown> | undefined | Custom data payload |
action_type | string | undefined | Action type (e.g., “deep_link”, “url”) |
action_value | string | undefined | Action value (e.g., a URL or screen ID) |
NativeEventEmitter Events
The SDK emits the following events through React Native’s NativeEventEmitter:
| Event | Payload | Triggered When |
|---|
onPushTokenRegistered | { token: string } | Device token is successfully registered |
onPushReceived | PushPayload & { inForeground: boolean } | A push notification is received |
onPushTapped | PushPayload & { actionId?: string } | User taps on a push notification |
You do not need to subscribe to NativeEventEmitter events directly. The AppDNAPush class and delegate interface handle event bridging for you. Use the native events only if you need custom low-level handling.
Auto-Tracked Events
The SDK automatically tracks the following push-related events:
| Event | Triggered When |
|---|
push_token_registered | Device token is successfully registered |
push_permission_granted | User grants push permission |
push_permission_denied | User denies push permission |
push_delivered | A push notification is delivered |
push_tapped | User taps on a push notification |
Auto-tracked events are sent alongside any manually tracked events. You do not need to track these events yourself.
Full Example
import { useEffect } from 'react';
import { AppDNA, AppDNAPush } from '@appdna/react-native-sdk';
function App() {
useEffect(() => {
async function setupPush() {
// Configure the SDK
await AppDNA.configure("adn_live_xxx", "production");
// Set delegate for lifecycle callbacks
AppDNA.push.setDelegate({
onPushTokenRegistered(token) {
console.log("Token:", token);
},
onPushReceived(notification, inForeground) {
if (inForeground) {
showInAppBanner(notification);
}
},
onPushTapped(notification, actionId) {
handleDeepLink(notification, actionId);
},
});
// Request permission
const granted = await AppDNA.push.requestPermission();
console.log("Push permission:", granted);
}
setupPush();
}, []);
// Listener-based approach for component-scoped handling
useEffect(() => {
const unsubReceived = AppDNAPush.onPushReceived((payload) => {
console.log("Received:", payload.title);
});
const unsubTapped = AppDNAPush.onPushTapped((payload) => {
console.log("Tapped:", payload.push_id);
});
return () => {
unsubReceived();
unsubTapped();
};
}, []);
return <MainNavigator />;
}