Expo Support #166
Comments
|
Thanks for the feedback and the code you provided. We will take this as a feature request on our end. Unfortunately, we don't have a timeline on this but will keep this issue open and update it whenever we have something to share on this topic. |
|
A heads up regarding my solution: it breaks the default deep link handling from Expo (when app is terminated). |
|
Hey giorgiofellipe, unfortunately we have set commitments to improve SDKs across the board that at this point we can't help with your request. However, as I mentioned earlier, we do have this as a feature request on our end and will update this thread as and when we have updates to share. Thanks! |
Hi Giorgio! Does your project use Expo's managed workflow? Our does, and we're also looking into using this library, so I'm trying to figure out if it will be feasible. Thanks! |
|
@jakemadash yes, we are currently using managed workflow. |
|
Thanks for this PR @giorgiofellipe! RNs direction is really towards using frameworks now, especially Expo. But most library providers have yet to transition |
|
Hi @ajaysubra I was wondering if there's any update on Expo support? I'd love to use this in my Expo project. |
|
Using expo-notifications with Klaviyo it does work as intended, even Push Open events. (only tested on iOS) Install the Klaviyo SDK in your Expo project with: npx expo install klaviyo-react-native-sdkThen, use the following hook to handle push notifications with the Expo Notifications API. This hook listens for notification responses and triggers the import { useEffect } from "react";
import * as Notifications from "expo-notifications";
import { Klaviyo } from "klaviyo-react-native-sdk";
export function useNotificationObserver() {
useEffect(() => {
let isMounted = true;
async function handleNotification(notification: Notifications.Notification) {
if (notification.request.trigger.type === "push") {
const event = {
name: "$opened_push",
properties: notification.request.trigger.payload as Record<string, object>,
};
Klaviyo.createEvent(event);
}
// Optionally, clear the last notification response if needed
// await Notifications.clearLastNotificationResponseAsync();
}
// Check for the last notification response on component mount
Notifications.getLastNotificationResponseAsync().then((response) => {
if (isMounted && response?.notification) {
handleNotification(response.notification);
}
});
// Subscribe to future notification responses
const subscription = Notifications.addNotificationResponseReceivedListener(
(response) => handleNotification(response.notification)
);
return () => {
isMounted = false;
subscription.remove();
};
}, []);
}Explanation
Optional: Uncomment This setup should ensure that your app tracks opened push notifications accurately with Klaviyo. |
|
@joshmohrer sorry for the late response, I was away from work for a bit. Unfortunately no real updates at this point, other than it's on our near term road map and I that can keep this thread updated as and when we have more clear timelines. Thanks for all your patience. |
|
Hi I'm also working on getting Push working with Expo and without modify the android or ios folder. I was able to get and push the Token with expo-notifications import * as Notifications from "expo-notifications";
...
Klaviyo.initialize("XXXYYY");
const { status: existingStatus } = await Notifications.getPermissionsAsync();
let finalStatus = existingStatus;
if (existingStatus !== "granted") {
const { status } = await Notifications.requestPermissionsAsync();
finalStatus = status;
}
if (finalStatus !== "granted") {
console.error("Failed to get push token for push notification!");
return;
}
const deviceToken = await Notifications.getDevicePushTokenAsync();
console.log(deviceToken?.data);
if (deviceToken != null && deviceToken.data.length > 0) {
Klaviyo.setPushToken(deviceToken.data);
}With that I can get Pushes on iOS and Android (you need to add the To handle the Android iOS But no success getting opened events in the campaigns. Any help is welcome. |
|
@pinguin999 This is what has been working for us on both android and ios, using expo-notifications without needing to add any modules. Also does deep-linking via import * as Notifications from "expo-notifications";
import { router } from "expo-router";
import { Klaviyo } from "klaviyo-react-native-sdk";
import { useEffect } from "react";
import { Platform } from "react-native";
export function useNotificationObserver() {
useEffect(() => {
let isMounted = true;
async function redirect(notification: Notifications.Notification) {
if (notification.request.trigger.type === "push") {
const properties = (
Platform.OS === "ios"
? notification.request.trigger.payload
: Object.fromEntries(
Object.entries(notification.request.content.data).map(
([key, value]) => [key.replace(/^com\.klaviyo\./, ""), value],
),
)
) as Record<string, object>;
if (properties) {
const event = {
name: "$opened_push",
properties,
};
Klaviyo.createEvent(event);
await Notifications.setBadgeCountAsync(0);
await Notifications.clearLastNotificationResponseAsync();
console.log("Notification opened", notification, event);
}
const url =
Platform.OS === "ios"
? notification.request.trigger.payload?.url
: notification.request.trigger.remoteMessage?.data?.url ||
notification.request.content.data["com.klaviyo.url"] ||
notification.request.content.data["url"];
if (url) {
console.log("Redirecting to", url);
router.push(url);
}
}
}
Notifications.getLastNotificationResponseAsync().then((response) => {
console.log("Last notification response", response);
if (!isMounted || !response?.notification) {
return;
}
redirect(response.notification);
});
const subscriptionOpened =
Notifications.addNotificationResponseReceivedListener((response) => {
console.log("Notification response received", response);
redirect(response.notification);
});
const subscription = Notifications.addNotificationReceivedListener((_) => {
Notifications.setBadgeCountAsync(0);
});
return () => {
isMounted = false;
subscription.remove();
subscriptionOpened.remove();
};
}, []);
} |
Checklist
Description
Proposed Solution
That said, we've been recently implementing it in an Expo project and I'll share the plugin files needed to implement at least Push Open event (it may be extended to other features).
Maybe it clears the path for some people who are planning to use it and make maintainers realize it is not that difficult to add out-of-the-box Expo support.
withKlaviyo.js
withKlaviyoIOS.js
withKlaviyoAndroid.js
It may need some tweaking.
The text was updated successfully, but these errors were encountered: