Expo

Official @daertech/pushtifly-react-native SDK with its Expo plugin, or expo-notifications via REST.

In Expo, the official SDK is the same as for React Native. It ships a config plugin that, during npx expo prebuild or the EAS build, configures APNs and adds the iOS extension for images and buttons.

Installation

npx expo install @daertech/pushtifly-react-native @react-native-firebase/app @react-native-firebase/messaging expo-build-properties

In app.json:

{
  "expo": {
    "ios": { "bundleIdentifier": "com.yourcompany.app", "googleServicesFile": "./GoogleService-Info.plist" },
    "android": { "package": "com.yourcompany.app", "googleServicesFile": "./google-services.json" },
    "plugins": [
      "@react-native-firebase/app",
      "@react-native-firebase/messaging",
      ["expo-build-properties", { "ios": { "useFrameworks": "static" } }],
      ["@daertech/pushtifly-react-native", { "apsEnvironment": "production", "iosNotificationServiceExtension": true }]
    ]
  }
}

Plugin options:

Option Default Description
apsEnvironment development production for TestFlight and the App Store.
iosNotificationServiceExtension true Adds the PushtiflyNotificationService target, for images and buttons, and registers it for EAS.
developmentTeam — Apple Team ID to sign the extension, if you don't use EAS.
iosDeploymentTarget 15.1 Minimum iOS version of the extension.

To use the Firebase Installation ID, add installationIdEnabled: true to the @react-native-firebase/messaging plugin options; the SDK detects it automatically.

The code usage is the same as in React Native. In Expo, the device is registered with framework: "expo".

import { Pushtifly } from '@daertech/pushtifly-react-native';

Pushtifly.init({ appKey: 'pk_live_YOUR_PUBLIC_KEY', iosNotificationServiceExtension: true });

To show a send with a carousel:

  • iOS: set iosNotificationContentExtension: true in the plugin options (it adds the PushtiflyNotificationContent target) and start the SDK with iosNotificationServiceExtension: true and iosNotificationContentExtension: true.
  • Android: register the background handler and turn on androidCarousel, just like in React Native.

Without these steps only the first image is shown.

Without the SDK (expo-notifications via REST)

With expo-notifications, the native token is:

import * as Notifications from 'expo-notifications';
import { Platform } from 'react-native';

export async function initPush() {
  const { status } = await Notifications.requestPermissionsAsync();
  if (status !== 'granted') return;
  const { data: token } = await Notifications.getDevicePushTokenAsync();   // native token
  await fetch('https://api.pushtifly.com/v1/devices', {
    method: 'POST',
    headers: { Authorization: 'Bearer pk_live_YOUR_PUBLIC_KEY', 'Content-Type': 'application/json' },
    body: JSON.stringify({ token, platform: Platform.OS, framework: 'expo', environment: 'auto' }),
  });
}

Notifications.setNotificationHandler({
  handleNotification: async () => ({ shouldShowBanner: true, shouldShowList: true, shouldPlaySound: true, shouldSetBadge: true }),
});
Notifications.addNotificationResponseReceivedListener((r) => {
  const data = r.notification.request.content.data;   // _phid, deepLink, your data
});

On Android, create the channel with Notifications.setNotificationChannelAsync('general', { name: 'Notices', importance: Notifications.AndroidImportance.HIGH }).