• Home
• Posts

React Native Push Notifications with Airship - Part 1 - Setup

February 7, 2022 · 4 min read

• React Native

Push notifications are great!

They are great for businesses as they help grow customer relationships and engagement by creating and delivering fast, highly relevant and personalised experiences to users.

They are great for users because they let you stay up to date with the latest information, updates, or deals from your favourite products and services. Want to know when your Deliveroo chicken burrito bowl is coming? No problem! Want to get notified when your favourite Youtube creator releases a new video? Here you go! Want to receive a discount voucher for Nike's latest collection? You go it!

What's not so great, is having to set up a push notifications infrastructure from scratch and manage everything on you own. A much wiser option is to select an already established push notifications service that will do all the heavy lifting for you.

Enter Airship!

What is Airship?

Airship which is a pioneer in this space is a platform for customer engagement, analytics and data solutions and offers notification and messaging solutions across many different channels - apps, web browsers, email, SMS, etc.

Why choose Airship? Here are some of my own personal considerations:

• Really easy to get started - Airship offers a 1st Flight app which can be installed to send some test notifications.
• Developer friendly SDK for multiple platforms, and most importantly in our case React Native. It supports powerful out of the box features such as Message Center which is a place in the app where you can display persistent rich messages, including HTML and videos.
• Handles receiving push notifications when the app is in foreground, background, is killed or the device is locked. This can be a major pain point when setting up your own service!!!
• Feature-rich dashboard which can be used for managing projects, testing, creating message templates, scheduling messages, segmenting audiences, developing engagement journeys, reporting and much more.
• Versatile API that supports most dashboard features. We can use that to segment users and send regular and silent push notifications programatically.

While Airship is aimed primarily at large enterprises, it can be a good option for a small businesses or independent developers. It's free up to an audience of 1000 which might be sufficient depending on your needs.

If you don't find Airship to be a good fit for you, here are some notable alternatives - react-native-push-notification (open source), Expo (works only with Expo apps), Firebase Cloud Messaging (somewhat limited feature set), OneSignal.

This is going to be a 3 part series where we explore the initial setup process required to start sending push notifications via the dashboard in part 1, then we are going to spin up a local Node.js server and see how we can send push notifications programatically in part 2, and finally we are going to cover some more advanced Airship SDK features such as audience segmentation and persisted rich media messages in part 3.

Installation

Let's create a new React Native app and install the Airship library.

command-line
npx react-native init pushNotificationsAirship
cd pushNotificationsAirship

npm i urbanairship-react-native
npx pod-install

I've changed the iOS bundle identifier / Android package name to com.bitbybit.pushnotificationsairship to make things more neat. That's out of scope for this post but you can check out this very helpful Medium article on how to do that.

iOS Setup

Prerequisites

You need to be enrolled in Apple's Developer Program which costs around £80. There are no workarounds for that unfortunately.

We need to register an App ID or you can use an existing one. Log in to your Apple Developer Account and select Certificates, IDs & Profiles -> Identifiers -> +. Then choose App IDs and Continue.

Android Setup

Create and Configure an Airship Project

Register with Airship and create a new project. We'll need to configure it for both iOS and Android devices.