When Onesignal is installed and configured alongside Expo Notifications, the Expo Notification listeners stop working. But, if you uninstall and remove all the code related to OneSignal, the listeners start working. I am not sure there is any extra steps to be taken while configuring the OneSignal package for it to not collide with Expo Notifictaion listeners.
Here is my React Context Provider with OneSignal code:
import { useMutation } from '@tanstack/react-query';
import {
setNotificationHandler,
addNotificationReceivedListener,
addNotificationResponseReceivedListener,
removeNotificationSubscription,
setNotificationChannelAsync,
getExpoPushTokenAsync,
Subscription,
ExpoPushToken,
Notification,
AndroidImportance,
} from 'expo-notifications';
import React, {
createContext,
FC,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { Platform } from 'react-native';
import { OneSignal } from 'react-native-onesignal';
import { v4 as uuidv4 } from 'uuid';
import { UserResponse } from '@app-types/user';
import { DEVICE_ID, HTTP_ENDPOINTS } from '@constants';
import { useAppState } from '@hooks/app-state';
import { useAuth } from '@hooks/auth';
import { useSyncStorage } from '@hooks/sync-storage';
import {
captureException,
EXCEPTION_TAG_TYPES,
getEnvironmentConfig,
getErrorMessage,
httpClient,
} from '@utils';
import {
PushNotificationContextType,
PushNotificationProviderProps,
} from './push-notification.type';
// The below method is invoked when a user receives a push notification
setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: false,
shouldSetBadge: false,
}),
});
async function getExpoPushNotificationToken() {
let token: ExpoPushToken | null = null;
try {
if (Platform.OS === 'android') {
await setNotificationChannelAsync('default', {
name: 'default',
importance: AndroidImportance.MAX,
vibrationPattern: [0, 250, 250, 250],
lightColor: '#FF231F7C',
});
}
token = await getExpoPushTokenAsync({
projectId: getEnvironmentConfig().easProjectId,
});
} catch (error) {
console.error('Failed to set notification channel', getErrorMessage(error));
throw error;
}
return token;
}
const PushNotificationContext = createContext<PushNotificationContextType>({
notification: null,
notificationEnabled: false,
});
const PushNotificationProvider: FC<PushNotificationProviderProps> = ({
children,
}) => {
const [notification, setNotification] = useState<Notification | null>(null);
const notificationListener = useRef<Subscription>();
const responseListener = useRef<Subscription>();
const { get, set } = useSyncStorage();
const { setUser, setAdminUser, user, adminUser } = useAuth();
const { appState } = useAppState();
const userRef = useRef(adminUser ?? user);
const previousAppState = useRef(appState);
const [notificationEnabled, setNotificationEnabled] = useState(false);
// Function to generate a unique device ID
const generateDeviceId = async () => {
let deviceId = get<string>(DEVICE_ID);
if (!deviceId) {
// Generate a new unique ID using device information and a random string
deviceId = uuidv4();
// Store the device ID in AsyncStorage for future use
try {
await set(DEVICE_ID, deviceId);
} catch (error) {
throw new Error('Failed to store device ID in AsyncStorage');
}
}
return deviceId;
};
const { mutateAsync } = useMutation({
mutationFn: async (token: string) => {
const deviceId = await generateDeviceId();
return await httpClient.post(HTTP_ENDPOINTS.notificationTokens, {
notification_token: {
token,
platform: Platform.OS,
provider: 'expo',
device_id: deviceId,
},
});
},
});
// Function to check if the device is already registered for push notification
const isDeviceRegistered = useCallback(() => {
const deviceId = get<string>(DEVICE_ID);
const hasDeviceId = userRef.current?.notification_tokens?.find(
token => token.device_id === deviceId,
);
return !!deviceId && !!hasDeviceId;
}, [get]);
// Function to save the push notification token to the server
const savePushNotificationToken = useCallback(async () => {
try {
if (isDeviceRegistered()) {
return;
}
const token = await getExpoPushNotificationToken();
if (token?.data) {
// Generate a new device ID if the device is not already registered
// and save the push notification token to the server
await mutateAsync(token.data);
if (adminUser) {
// Fetch the admin user profile after saving the push notification token
const response = await httpClient.get<UserResponse>(
HTTP_ENDPOINTS.userProfile,
{
headers: {
'X-Use-Admin-Token': 'true',
},
},
);
setAdminUser(response.data.result);
} else {
// Fetch the user profile after saving the push notification token
const response = await httpClient.get<UserResponse>(
HTTP_ENDPOINTS.userProfile,
);
// Update the user context with the latest user profile
setUser(response.data.result);
}
}
} catch (error) {
console.error(
'Failed to initialise push notification!',
getErrorMessage(error),
);
captureException(getErrorMessage(error), {
extra: {
context: 'expo-push-notification',
method: 'savePushNotificationToken',
},
tags: {
type: EXCEPTION_TAG_TYPES.DEVICE,
},
});
}
}, [adminUser, isDeviceRegistered, mutateAsync, setAdminUser, setUser]);
// Function to handle the complete (OneSignal and Expo) notification permission flow
const handleNotificationPermissionFlow = useCallback(async () => {
try {
// Check if the user has granted permission for push notification
const hasGrantedPermission =
await OneSignal.Notifications.getPermissionAsync();
setNotificationEnabled(hasGrantedPermission);
if (hasGrantedPermission) {
return false;
}
// Check if the user can request permission for push notification
const canRequestPermission =
await OneSignal.Notifications.canRequestPermission();
// If the user can request permission, then request for permission by showing the OneSignal prompt
if (canRequestPermission) {
return OneSignal.InAppMessages.addTrigger('user_logged_in', 'true');
}
} catch (error) {
captureException(getErrorMessage(error), {
extra: {
context: 'push-notification',
method: 'handleNotificationPermissionFlow',
},
tags: {
type: EXCEPTION_TAG_TYPES.DEVICE,
},
});
}
}, []);
// Function to handle the notification permission flow when the app state changes
const onAppStateChange = useCallback(async () => {
if (previousAppState.current === 'background' && appState === 'active') {
void handleNotificationPermissionFlow();
}
previousAppState.current = appState;
}, [appState, handleNotificationPermissionFlow]);
// Function to handle the permission change event for push notification when
// OneSignal.Notification.addEventListener('permissionChange') is triggered
const onPermissionChange = useCallback(
(enabled: boolean) => {
// If the user has granted permission for push notification, then save the push notification token to the server
if (enabled) {
void savePushNotificationToken();
}
setNotificationEnabled(enabled);
},
[savePushNotificationToken],
);
/**
* Add an event listener to listen for the permission change event
*/
useEffect(() => {
OneSignal.Notifications.addEventListener(
'permissionChange',
onPermissionChange,
);
return () => {
OneSignal.Notifications.removeEventListener(
'permissionChange',
onPermissionChange,
);
};
}, [onPermissionChange]);
// Handle the notification permission flow when the component mounts
useEffect(() => {
void handleNotificationPermissionFlow();
}, [handleNotificationPermissionFlow]);
// Add event listeners to listen for notification and notification response events
useEffect(() => {
notificationListener.current = addNotificationReceivedListener(notif => {
setNotification(notif);
});
responseListener.current = addNotificationResponseReceivedListener(
response => {
console.info('addNotificationResponseReceivedListener', response);
},
);
return () => {
if (notificationListener.current) {
removeNotificationSubscription(notificationListener.current);
}
if (responseListener.current) {
removeNotificationSubscription(responseListener.current);
}
};
}, []);
// Update the user reference when the user context changes
// We are using a ref to store the user context to avoid unnecessary re-renders and calls to the handleNotificationPermissionFlow function
useEffect(() => {
userRef.current = adminUser ?? user;
}, [adminUser, user]);
// Handle the notification permission flow when the app state changes
useEffect(() => {
void onAppStateChange();
}, [onAppStateChange]);
return (
<PushNotificationContext.Provider
value={{
notification,
notificationEnabled,
}}
>
{children}
</PushNotificationContext.Provider>
);
};
export { PushNotificationContext, PushNotificationProvider };
With OneSignal configured, I receive the notifications from Expo Notification SDK and OneSignal as expected but on tapping the notification, the following lines would never execute –
useEffect(() => {
notificationListener.current = addNotificationReceivedListener(notif => {
setNotification(notif);
});
responseListener.current = addNotificationResponseReceivedListener(
response => {
console.info('addNotificationResponseReceivedListener', response);
},
);
return () => {
if (notificationListener.current) {
removeNotificationSubscription(notificationListener.current);
}
if (responseListener.current) {
removeNotificationSubscription(responseListener.current);
}
};
}, []);
They are the listeners for Expo notifications so we could register the payload.
Now, I uninstalled OneSignal, removed the OneSignal config and changed my provider code to –
import { useMutation } from '@tanstack/react-query';
import {
setNotificationHandler,
addNotificationReceivedListener,
addNotificationResponseReceivedListener,
removeNotificationSubscription,
setNotificationChannelAsync,
getExpoPushTokenAsync,
Subscription,
ExpoPushToken,
Notification,
AndroidImportance,
getPermissionsAsync,
IosAuthorizationStatus,
requestPermissionsAsync,
} from 'expo-notifications';
import React, {
createContext,
FC,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { Platform } from 'react-native';
// import { OneSignal } from 'react-native-onesignal';
import { v4 as uuidv4 } from 'uuid';
import { UserResponse } from '@app-types/user';
import { DEVICE_ID, HTTP_ENDPOINTS } from '@constants';
import { useAppState } from '@hooks/app-state';
import { useAuth } from '@hooks/auth';
import { useSyncStorage } from '@hooks/sync-storage';
import {
captureException,
EXCEPTION_TAG_TYPES,
getEnvironmentConfig,
getErrorMessage,
httpClient,
} from '@utils';
import {
PushNotificationContextType,
PushNotificationProviderProps,
} from './push-notification.type';
// The below method is invoked when a user receives a push notification
setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: false,
shouldSetBadge: false,
}),
});
async function getExpoPushNotificationToken() {
let token: ExpoPushToken | null = null;
try {
if (Platform.OS === 'android') {
await setNotificationChannelAsync('default', {
name: 'default',
importance: AndroidImportance.MAX,
vibrationPattern: [0, 250, 250, 250],
lightColor: '#FF231F7C',
});
}
token = await getExpoPushTokenAsync({
projectId: getEnvironmentConfig().easProjectId,
});
} catch (error) {
console.error('Failed to set notification channel', getErrorMessage(error));
throw error;
}
return token;
}
const PushNotificationContext = createContext<PushNotificationContextType>({
notification: null,
notificationEnabled: false,
});
const PushNotificationProvider: FC<PushNotificationProviderProps> = ({
children,
}) => {
const [notification, setNotification] = useState<Notification | null>(null);
const notificationListener = useRef<Subscription>();
const responseListener = useRef<Subscription>();
const { get, set } = useSyncStorage();
const { setUser, setAdminUser, user, adminUser } = useAuth();
const { appState } = useAppState();
const userRef = useRef(adminUser ?? user);
const previousAppState = useRef(appState);
const [notificationEnabled, setNotificationEnabled] = useState(false);
// Function to generate a unique device ID
const generateDeviceId = async () => {
let deviceId = get<string>(DEVICE_ID);
if (!deviceId) {
// Generate a new unique ID using device information and a random string
deviceId = uuidv4();
// Store the device ID in AsyncStorage for future use
try {
await set(DEVICE_ID, deviceId);
} catch (error) {
throw new Error('Failed to store device ID in AsyncStorage');
}
}
return deviceId;
};
const { mutateAsync } = useMutation({
mutationFn: async (token: string) => {
const deviceId = await generateDeviceId();
return await httpClient.post(HTTP_ENDPOINTS.notificationTokens, {
notification_token: {
token,
platform: Platform.OS,
provider: 'expo',
device_id: deviceId,
},
});
},
});
// Function to check if the device is already registered for push notification
const isDeviceRegistered = useCallback(() => {
const deviceId = get<string>(DEVICE_ID);
const hasDeviceId = userRef.current?.notification_tokens?.find(
token => token.device_id === deviceId,
);
return !!deviceId && !!hasDeviceId;
}, [get]);
// Function to save the push notification token to the server
const savePushNotificationToken = useCallback(async () => {
try {
if (isDeviceRegistered()) {
return;
}
const token = await getExpoPushNotificationToken();
if (token?.data) {
// Generate a new device ID if the device is not already registered
// and save the push notification token to the server
await mutateAsync(token.data);
if (adminUser) {
// Fetch the admin user profile after saving the push notification token
const response = await httpClient.get<UserResponse>(
HTTP_ENDPOINTS.userProfile,
{
headers: {
'X-Use-Admin-Token': 'true',
},
},
);
setAdminUser(response.data.result);
} else {
// Fetch the user profile after saving the push notification token
const response = await httpClient.get<UserResponse>(
HTTP_ENDPOINTS.userProfile,
);
// Update the user context with the latest user profile
setUser(response.data.result);
}
}
} catch (error) {
console.error(
'Failed to initialise push notification!',
getErrorMessage(error),
);
captureException(getErrorMessage(error), {
extra: {
context: 'expo-push-notification',
method: 'savePushNotificationToken',
},
tags: {
type: EXCEPTION_TAG_TYPES.DEVICE,
},
});
}
}, [adminUser, isDeviceRegistered, mutateAsync, setAdminUser, setUser]);
// Function to handle the complete (OneSignal and Expo) notification permission flow
const handleNotificationPermissionFlow = useCallback(async () => {
try {
// Check if the user has granted permission for push notification
// const hasGrantedPermission =
// await OneSignal.Notifications.getPermissionAsync();
const permissionSettings = await getPermissionsAsync();
const hasGrantedPermission =
permissionSettings.granted ||
permissionSettings.ios?.status === IosAuthorizationStatus.PROVISIONAL;
setNotificationEnabled(hasGrantedPermission);
if (hasGrantedPermission) {
return false;
}
const { status } = await requestPermissionsAsync();
if (status === 'granted') {
setNotificationEnabled(true);
await savePushNotificationToken();
}
// Check if the user can request permission for push notification
// const canRequestPermission =
// await OneSignal.Notifications.canRequestPermission();
// If the user can request permission, then request for permission by showing the OneSignal prompt
// if (canRequestPermission) {
// return OneSignal.InAppMessages.addTrigger('user_logged_in', 'true');
// }
} catch (error) {
captureException(getErrorMessage(error), {
extra: {
context: 'push-notification',
method: 'handleNotificationPermissionFlow',
},
tags: {
type: EXCEPTION_TAG_TYPES.DEVICE,
},
});
}
}, [savePushNotificationToken]);
// Function to handle the notification permission flow when the app state changes
const onAppStateChange = useCallback(async () => {
if (previousAppState.current === 'background' && appState === 'active') {
void handleNotificationPermissionFlow();
}
previousAppState.current = appState;
}, [appState, handleNotificationPermissionFlow]);
// Function to handle the permission change event for push notification when
// OneSignal.Notification.addEventListener('permissionChange') is triggered
// const onPermissionChange = useCallback(
// (enabled: boolean) => {
// // If the user has granted permission for push notification, then save the push notification token to the server
// if (enabled) {
// void savePushNotificationToken();
// }
// setNotificationEnabled(enabled);
// },
// [savePushNotificationToken],
// );
/**
* Add an event listener to listen to OneSignal events
*/
// useEffect(() => {
// OneSignal.Notifications.addEventListener(
// 'permissionChange',
// onPermissionChange,
// );
// return () => {
// OneSignal.Notifications.removeEventListener(
// 'permissionChange',
// onPermissionChange,
// );
// };
// }, [onPermissionChange]);
// Handle the notification permission flow when the component mounts
useEffect(() => {
void handleNotificationPermissionFlow();
}, [handleNotificationPermissionFlow]);
// Add event listeners to listen for notification and notification response events
useEffect(() => {
notificationListener.current = addNotificationReceivedListener(response => {
console.info('addNotificationReceivedListener', response);
setNotification(response);
});
responseListener.current = addNotificationResponseReceivedListener(
response => {
console.info('addNotificationResponseReceivedListener', response);
},
);
return () => {
if (notificationListener.current) {
removeNotificationSubscription(notificationListener.current);
}
if (responseListener.current) {
removeNotificationSubscription(responseListener.current);
}
};
}, []);
// Update the user reference when the user context changes
// We are using a ref to store the user context to avoid unnecessary re-renders and calls to the handleNotificationPermissionFlow function
useEffect(() => {
userRef.current = adminUser ?? user;
}, [adminUser, user]);
// Handle the notification permission flow when the app state changes
useEffect(() => {
void onAppStateChange();
}, [onAppStateChange]);
return (
<PushNotificationContext.Provider
value={{
notification,
notificationEnabled,
}}
>
{children}
</PushNotificationContext.Provider>
);
};
export { PushNotificationContext, PushNotificationProvider };
And, now the listeners are working as expected and I receive the payload. Seems like the OneSignal package is blocking the payload from reaching the listeners.
- Install and configure Expo Notifications as per the instructions in the Expo documentation.
- Install and configure OneSignal on Expo.
- Send a push notification using Expo Notifications Tool. You can get the Expo Push Token using
getExpoPushTokenAsync. - Use the context provider shared above if you’d like to.
- The Expo notification listeners should receive the payload, but they do not.
- Now, uninstall and remove all the OneSignal code, and everything works as expected.
"react-native-onesignal": "^5.1.3",
"onesignal-expo-plugin": "^2.0.2",
"expo-notifications": "~0.27.7",
"expo": "~50.0.17"