A feature that integrates with OneSignal to display clickable pop-up messages on a device. It usually takes between 3.6 and 4.4 hours and costs $300 to add Push Notifications to an application.
This feature is used to display pop-up messages on a user's device. These messages are touchable and when pressed takes a user to desired screen or further event in the application. This feature supports push notifications. To use a push notifcation, integrate the app with OneSignal and then configure the sequence of notifications to send them separately using OneSignal's service.
Here are some common Push Notifications user stories in a custom app build:
As an app user, I would like to enable or disable receiving push notifications.
Push Notifications
Introduction
This modules uses the OneSignal service to provide push notifications capabilities to your Android or iOS app.
It includes the OneSignal SDK for React Native: react-native-onesignal.
Setup
Requirements overview:
- OneSignal account
- iOS Push Certificate - for iOS
- Firebase project - for Android
Setup steps:
- Create a OneSignal account and create a new One Signal application.
- Follow and complete the Step 4 of the OneSignal documentation. Don't forget to commit and push the changes.
- Generate an iOS Push Certificate.
- Generate a Firebase Server Key.
- Issue a new test push notification, with immediate delivery, from the OneSignal Dashboard. Verify it works on your running Android simulator or on a real iOS Device (iOS push notifications can't be tested in a simulator). You will have to provide the ONE_SIGNAL_APP_ID env var in your .env file with the App ID key obtained from Keys & IDs if you're testing locally in the Android simulator.
- Add the ONE_SIGNAL_APP_ID env var value in your App's Crowdbotics Dashboard.
- Deploy your app.
import OneSignal from 'react-native-onesignal';
import { Platform, Alert } from "react-native";
import { useState, useEffect } from "react";
import { ONE_SIGNAL_APP_ID } from "@env";
const useOneSignal = () => {
const [isSubscribed, setIsSubscribed] = useState(false);
useEffect(() => {
async function getDeviceState() {
const deviceState = await OneSignal.getDeviceState();
setIsSubscribed(deviceState.isSubscribed);
}
/* O N E S I G N A L S E T U P */
OneSignal.setAppId(ONE_SIGNAL_APP_ID);
OneSignal.setLogLevel(6, 0);
OneSignal.setRequiresUserPrivacyConsent(false);
if (Platform.OS === "ios") {
OneSignal.promptForPushNotificationsWithUserResponse(response => {
console.log("Prompt response:", response);
});
}
/* O N E S I G N A L H A N D L E R S */
OneSignal.setNotificationWillShowInForegroundHandler(notifReceivedEvent => {
console.log(
"OneSignal: notification will show in foreground:",
notifReceivedEvent
);
let notif = notifReceivedEvent.getNotification();
const button1 = {
text: "Cancel",
onPress: () => { notifReceivedEvent.complete(); },
style: "cancel"
};
const button2 = {
text: "Complete",
onPress: () => {
notifReceivedEvent.complete(notif);
}
};
Alert.alert(
"Complete notification?",
"Test",
[button1, button2],
{ cancelable: true }
);
});
OneSignal.setNotificationOpenedHandler(notification => {
console.log("OneSignal: notification opened:", notification);
});
OneSignal.setInAppMessageClickHandler(event => {
console.log("OneSignal IAM clicked:", event);
});
OneSignal.addEmailSubscriptionObserver((event) => {
console.log("OneSignal: email subscription changed: ", event);
});
OneSignal.addSubscriptionObserver(event => {
console.log("OneSignal: subscription changed:", event);
setIsSubscribed(event.to.isSubscribed);
});
OneSignal.addPermissionObserver(event => {
console.log("OneSignal: permission changed:", event);
});
getDeviceState();
});
return isSubscribed;
}
export default {
title: "Push Notifications",
hook: useOneSignal
};