This repo contains an open source mobile client for the MagicBell API, built in React Native. You can use it as an example project on how to setup a React Native app that integrates with MagicBell notifications and push notifications via APNs and FCM.
To explore the full feature set of MagicBell, and to dive deeper into the API please refer to the documentation.
This React Native app is set up using Expo, but does not require an Expo account to be build.
Some of the Expo benefits we tap into are:
- Continuous Native Generation: You will notice no
iosorandroidfolders. They are generated at build time, or by callingnpx expo prebuild, and are based on a template, configuration inapp.jsonand config plugins in NPM packages. expo-notifications: This is a mature and well maintained library for adding push notification support to a React Native app. Its core functionality is around capturing device tokens and handling the user intend of opening a push notification. It's our current recommendation, but you are free to choose any other library that implements those features, or even build them yourself in native land.
All other Expo dependencies are not directly related to the notifications use case, but we use them to build a nice demo, and to further extend the app beyond its example characteristics towards a useful utility for working with MagicBell.
Note: Even though Expo offers web as a target platform, this project currently only focuses on iOS and Android.
In order to build the app you will need to have the native tool chains for the platforms you target for: Xcode for iOS and Android Studio for Android.
You will also need NodeJS and Yarn for obvious reasons.
More details on how to set up a React Native dev environment can be found on reactnative.dev.
Install the dependencies by running yarn.
You can simply get started by running the main dev command, yarn start. This will start Metro Bundler and bring up the Expo dev dashboard.
# Start Metro
yarn startYou will be greeted with the Expo dashboard
yarn run v1.22.22 $ expo start -d Starting project at /mobile-inbox Starting Metro Bundler ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ █ ▄▄▄▄▄ █▄▀▀▄▄██▄ █▀▄█▄██ ▀█▀█ ▄▄▄▄▄ █ █ █ █ ███▄█ ██▄ ▀ ▄█ ▄▀█ █▀▀█ █ █ █ █ █▄▄▄█ ██▄▀▄▀█▄ ▀▀▄▄▄▄▀ ▄ █ █ █▄▄▄█ █ █▄▄▄▄▄▄▄█ █ ▀▄▀▄▀ █ █▄█▄█▄▀▄█ █▄▄▄▄▄▄▄█ █▄▄▀▄▄▀▄██ ▄▄▀ ██ ▀▀██ ▄█ ▀▄▀▄█▀███▄█ █ █ ▀▄▄▄ █▀█ ▀ █▄ ▀▀▀▄▄ ▄ █▀▄▄ █ █▀▀█▄█ █ ▀ █▄▄▄ ▄▄▄ ▀ ██▄▄▀█▀ ██▀ ▄▄█▀▄██▄█ █▄█▄ ▀▀▄███▄ ▄▄█▄ █▄▄ ▄ ███ ▄ █▀▀▀▀ █ █▀ █▀▄ ▄▄▀ ▀▀▀ ▀ ▀▄ ██▀▄█▄▀ ▄ ▄▀█▄ ▄█ █ █▀▄ ▄▀▀ ▄▀█▀▄▄██ ▀▄▀ █ ▀▄▀▀█▀▄ █▀ █ █▀▄▄ ▀█▄▀▄ ▀█▄▄ ▀ ▄ █▄ ▀▀▀ ▄▄▄ ▀▄██ █▀█▀▀█▀▄ █▀▄█▄█ ▄▀ ▀ ██▄██▀▄██ ▀█▀▀█ █ █ ▀▀█▄▄▄█▄ ██▀▄▄▀█▀ ▄▄█▀ ▀▀ ▀▄█▀ ▀███ █ ▄ ▀ ▀▄▄█▄▀█▀▀ ▄▀▄▀ ▀▄▄█▄██▄██▀▀▀ █ █ █▄█▄███▄▄▀▀█ ▄██▄█▀▄▀██▀▄█ ██ ▄▄▄ ▄▄██ █ ▄▄▄▄▄ ██▄█▀▄ ▄ ██ █▄▀ ▄ ▀█ █▄█ ▄▄█ █ █ █ █ █ ▄ ▄▀ █ ▀▄▄ ▀█▄ ▄▀ ▄ ▄▄ █ █ █ █▄▄▄█ █▀▀▀ ▀ █▄▄▀ ▀ █▀ ██ █▄▀▀▄ ▀▀▀ █ █▄▄▄▄▄▄▄█▄██▄▄▄█▄▄█▄▄▄▄█▄▄███▄▄▄▄▄███▄█ › Metro waiting on x-magicbell-review://expo-development-client/?url=http%3A%2F%2F192.168.178.22%3A8081 › Scan the QR code above to open the project in a development build. Learn more › Web is waiting on http://localhost:8081 › Using development build › Press s │ switch to Expo Go › Press a │ open Android › Press i │ open iOS simulator › Press w │ open web › Press j │ open debugger › Press r │ reload app › Press m │ toggle menu › shift+m │ more tools › Press o │ open project code in your editor › Press ? │ show all commands Logs for your project will appear below. Press Ctrl+C to exit.
At this point you can use the keyboard shortcuts on the dashboard to build and open apps for iOS via i or Android via a. This will run pre-build, build and open the app in the corresponding emulator or simulator.
If you want to launch the app on a specific simulator or even device, you can use the shift+i/shift+a shortcuts, or start another build process from the terminal while keeping Metro in the background by running yarn ios or yarn android (both of which support additional parameters that can be inspected by passing -h).
To send notifications with FCM, you will need to configure Mobile Inbox:
You will need a Firebase account and a Firebase Android app.
-
You can create the Firebase Android app by using the
Add appbutton on your Firebase console and selecting Android. -
Download the
google-service.jsonfile. If you're creating a new app, then, after adding your Android package name, you should see a button labelledDownload google-service.json, which allows you to download thegoogle-service.jsonfile. If you have a pre-registered app, you can access the Project Settings of the app and, in the General tab, locate the button to downloadgoogle-service.jsonin the "Your apps" section. -
Replace the
google-service.jsonfile in the root of this project with the downloaded file. -
Do a clean build and launch the Android app:
yarn android:clean- For authentication, you will need a MagicBell user JWT. You can generate it using your MagicBell API Key and the external ID of the user you want to send notifications to.
To test if you are receiving notifications correctly, you can use the FCM Test.
-
You will need an Admin SDK private key. You can obtain it from your Firebase console. Click on the gear icon in the left sidebar, then navigate to the Service Accounts tab and click
Generate new private key, which saves a JSON file to your machine. -
Upload the private key JSON file to the MagicBell FCM Test page.
-
Copy the generated Device Token from the console running the Expo app. The token will look like:
posting token c2RAxxT6Qae-USMxxxQQhF:APA91bFxxmo7G_xBwBhiFl[...]FTrVU183-pxx4
- Enter the device token on the MagicBell FCM Test page and click
Send Notification.
To send APNs Notifications, you need to start by configuring the Mobile Inbox Expo app.
-
Update
appleTeamIdand thebundleIdentifierin theapp.jsonfile. Update the Team ID to the value configured with your project. -
Do a clean build of the iOS App:
yarn ios:cleanYou can test the APNs Notification, using the MagicBell APNs Test Page and authenticating as a MagicBell user on the Mobile Inbox app.
-
Go to the MagicBell APNs Test Page and enter your App ID, Certificate, Key ID, Team ID, and Badge to configure APNs.
-
Generate a userJWT with your MagicBell API Key and the external ID of the user.
-
Enter the User JWT and the v2 API URL,
"https://api.magicbell.com/v2", and Sign In. -
Copy the generated Device Token from the console running the Expo app. The token will look like:
posting token 801bd597ba34abf2[...]1017df7a47fd6b14cbbf
- Enter the Device Token on the MagicBell APNs Test Page, select
developmentas the Installation ID and clickSend Notification.
Releases can be build from the native platform projects using Xcode or Android Studio. The first step is to run the native generation using npx expo prebuild. From there on follow the platform specific steps to build and submit. While Expo provides a full guide to follow, the basic steps for iOS are laid out next:
- Open the project in Xcode via
xed ios - Make sure to connect your Apple ID in the Xcode settings under Account. That Apple ID should be a member of a development team, eligible to sign the app.
- Build an archived build using Archive in the Product menu. This process will take a minute but will at the end open the Organizer.
- From the Organizer you can select "Distribute App" and select your distribution target, and proceed to the form.
After this the app will be packaged and distributed to TestFlight, from where it will be available to your testers.
The project is also set up with Xcode Cloud to trigger TestFlight builds on changes to main.
The workflows can be managed in AppStore Connect, by following this link.
The React Native community offers many resources that will help you navigate the most common issues:
MagicBells own resources are also at your availability:
- The MagicBell documentation is a good place to start
- The MagicBell community is often the fastest way to get help
If you run into any other kind of problem, please open an issue.
This project is build by MagicBell, Inc. and it's contributors.
It is released under the MIT license.