Skip to content

Latest commit

 

History

History
141 lines (94 loc) · 8.07 KB

README.md

File metadata and controls

141 lines (94 loc) · 8.07 KB

MagicBell Mobile Inbox

This repo contains an open source mobile client for the MagicBell API, build 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.

TOC

Project Overview

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 ios or android folders. They are generated at build time, or by calling npx expo prebuild, and are based on a template, configuration in app.json and 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.

Prerequisites

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.

Starting A Local Development Build

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 start
You 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).

Building Release Builds

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:

  1. Open the project in Xcode via xed ios
  2. 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.
  3. Build an archived build using Archive in the Product menu. This process will take a minute but will at the end open the Organizer.
  4. 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.

CI on Xcode Cloud

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.

Troubleshooting

The React Native community offers many resources that will help you navigate the most common issues:

MagicBells own resources are also at your availability:

If you run into any other kind of problem, please open an issue.

License

This project is build by MagicBell, Inc. and it's contributors.

It is released under the MIT license.