Build Push Notifications Component for Your App

Learn how to add Push Notifications functionality to your custom React Native and Django app with Crowdbotics.

What is the Push Notifications component and how much does it cost?

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.

How does the Push Notifications component work?

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.

What is the Push Notifications component used for?

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 component README file

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:

  1. Create a OneSignal account and create a new One Signal application.
  2. Follow and complete the Step 4 of the OneSignal documentation. Don't forget to commit and push the changes.
  3. Generate an iOS Push Certificate.
  4. Generate a Firebase Server Key.
  5. 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.
  6. Add the ONE_SIGNAL_APP_ID env var value in your App's Crowdbotics Dashboard.
  7. Deploy your app.

This component does not yet have a README file. However, another Crowdbotics user may have created this component and shared it as a free community component.

Browse our community components for the Push Notifications component.

Full Push Notifications component code

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
};

This component is not yet available as a verified component in the Crowdbotics platform. However, another Crowdbotics user may have created it and shared it as a free community component.

Browse our community components for the Push Notifications component.

Recommended components for you

All component categories

Add this feature to your project

Snap Push Notifications into your app along with our full library of prebuilt components.

Import layouts directly from Figma and visually build backend data models.

Two-way GitHub sync and automated deployments to Heroku will have your app up and running in minutes.

Add Push Notifications to My App

Build with more components from Crowdbotics

Crowdbotics can build your custom app with Push Notifications functionality and hundreds of other components.

Go from specs to code 4X faster than conventional development.

Our expert PMs and developers are standing by to provide a detailed quote and build timeline.

Start Building