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 });
Image carousel
To show a send with a carousel:
- iOS: set
iosNotificationContentExtension: truein the plugin options (it adds thePushtiflyNotificationContenttarget) and start the SDK withiosNotificationServiceExtension: trueandiosNotificationContentExtension: 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:
- Android: FCM. You need the Firebase credential.
- iOS: APNs. You need the .p8 key in Pushtifly.
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 }).