Quickly adding push notifications with Belt

Push notifications are a crucial feature for engaging users and keeping them informed about important updates. Setting up push notifications in a React Native app can be a complex process, but with Belt, you can streamline this setup significantly. In this blog post, we’ll walk you through the steps to quickly add push notifications support to your app using belt add notifications command.

What is Belt?

Belt is an opinionated CLI tool developed by thoughtbot for starting and configuring React Native apps. It automates the setup of various tools and libraries, ensuring best practices and reducing the time spent on boilerplate code.

Prerequisites

Before we begin, make sure you have the following:

• Node.js installed on your machine.
• A React-Native project generated with Belt.

Guide

Generate Belt app

If you haven’t already generated your app using Belt, you can do so by running:

# With NPM
npx create-belt-app MyApp

# With Yarn
npx create-belt-app MyApp --yarn

# With pnpm (experimental)
npx create-belt-app MyApp --pnpm

# With Bun (experimental)
npx create-belt-app MyApp --bun

Add Push Notifications Support

Navigate to your project directory and run the following command to add push notifications support:

# With NPM
npx belt add notifications

# With Yarn
yarn belt add notifications

# With PNPM
pnpm belt add notifications

Belt will guide you through the setup process with interactive prompts. If you prefer a non-interactive setup, you can pass the --no-interactive flag, the default option of every prompt will be used instead.

Here is what gets setup by this command:

• Necessary dependencies are installed (@react-native-firebase/app, @react-native-firebase/messaging, and expo-build-properties).
• Notification handler templates are copied and hooks are injected into App.tsx to manage the setup and handling of notifications within the app.
• Android package name and iOS bundle identifier are defined by prompt or default values. These are added to the app.json configuration file alongside the necessary plugins list.
• Changes are committed under the message "Add push notifications support."

Set Up a Firebase Project

To use push notifications, if you haven’t already, you need to set up a Firebase project and create the necessary configurations for Android and iOS:

1. Go to the Firebase Console and create a project.
2. Once your project is created, click on the Android icon to add an Android app* to your project.
3. Similarly, click on the iOS icon to add an iOS app* to your project.

* Make sure the package name is the same as defined when you ran the add notifications command

Final Steps

1. Download the google-services.json and GoogleService-Info.plist from the recently created apps in the Firebase Console and copy them in your Belt project’s config folder.
2. Run the following command to rebuild the app:

npx expo prebuild --clean

1. Navigate to the project folder and run the following command to run the app:

# With NPM
npm run android

For more details, refer to the official React Native Firebase documentation.

Testing Push Notifications

Testing Push Notifications in a simulated environment is only possible using an Android Emulator/Device or iOS Physical Device, iOS Simulators won’t monitor for notification events.

To trigger notifications from the Firebase dashboard, you can send test messages with the following steps:

1. Navigate to Cloud Messaging:
   • In the left-hand menu, click on “Messaging”.
2. Send a Test Message:
   • Click on the “Create your first campaign” button.
   • Select “Firebase Notification messages”
   • Fill in the notification details such as the title, text, and an optional image url.
   • Click on “Send test message” and enter the FCM registration token of your device, which you can obtain by calling the messaging().getToken() function in your app.
   • Click “Test” to send the notification.

If your app is closed or in the background you should be able to see a new notification pop up in the notification’s tray.

Conclusion

By following these steps, you can quickly add push notifications support to your React Native app using Belt. This streamlined process saves you time and ensures that your app is set up with best practices in mind.

If you want to understand more details about how Push Notifications work in depth, types of messages, behavior, actions and more, checkout this blog post on React Native Push Notifications with Firebase Cloud Messaging.

For more information about Belt and its features, check out the Belt GitHub repository.