React Native with Push Notifications and Firebase – Part 3 of 5 How to create, setup and configure a React Native project with Push Notifications support using Firebase SDK and API - Part 3 of 5: Create the Firebase project(s) and configure the Service APIs for Android and iOS

React Native with Push Notifications and Firebase - Part 2 of 5

In this five-part tutorial we’ll see how we can create a sample React Native app (you might call it a “Hello World” or “boilerplate”) that will be capable of receiving Push Notifications using Firebase. Such guide could be a great headstart for React Native beginners, yet also for those intermediate or experienced developers who want to know more about push notifications: how they work, what are their best usage scenarios and how much they can be an improvement for almost any mobile app.

For the sake of simplicity this tutorial has been splitted into multiple parts, each one dedicated to a specific sub-topic:

  • Part 1 of 5: Understanding Push Notifications, in which we’ll try to understand what push notifications actually are and the impact they could have (when used properly) on a typical client-server app.
  • Part 2 of 5: Setup React Native and Firebase, where we’ll deal with the installation and configuration of our whole development stack: React Native, the Firebase SDK and the Visual Studio Code environment, together with the required settings to get our app ready to work with Android and iOS.
  • Part 3 of 5: Configure the Firebase Service, in which we’ll create the Firebase Project and configure the Firebase Push Notification Services to ensure that our React Native app will be able to receive push notifications through the Firebase API on any Android and iOS device.
  • Part 4 of 5: Design and Test the React Native UI, where we’ll test our front-end skills by laying out a React-Native UI in order to make our app actually able to receive push notifications and send HTTP requests to the server to remotely keep track of our actions – and possibly fire subsequent push notifications to other clients.
  • Part 5 of 5: Server-Side Handler, in which we’ll use ASP.NET Core to create a sample, lightweight web server that will be able to receive HTTP requests issued by the clients and/or feed them with push notifications through the Firebase API.

In this third post we’ll see how we can configure the Firebase Service for Android and iOS environments.

Create the Firebase project

Now that our app is up and running, we just need to configure the Firebase Service to ensure that our React Native application will be able to receive push notifications through the Firebase API.

  • Create a Google account (if you don’t have one already).
  • Navigate to the Google Firebase website.
  • Click to the Get Started button.
  • Add a new Firebase project.

React Native with Push Notifications and Firebase - Part 3 of 5

Configuring the Firebase Service

Once the project is ready, you’ll be asked to add one or more app on it. More specifically, we need to add two apps: one for Android and one for iOS.

Firebase Android App

Add a new Android app by clicking on the android logo and fill in the relevant values.

React Native with Push Notifications and Firebase - Part 3 of 5

IMPORTANT: be sure to properly set your android package name, which must be identical to the applicationID value present in your project’s /android/app/build.gradle file (around line 131 or so).

Once done, you’ll be given the chance to download a google-services.json file containing the required configuration to run Firebase on the Android version of your React Native app: download and save it within the /android/app/ folder of your React Native app, just as explained and illustrated on the web page itself:

React Native with Push Notifications and Firebase - Part 3 of 5

Download the google-services.json file and placing it in the appropriate folder, then get ready to go ahead.

Steps 3 and 4 can be skipped, as we already performed their relevant tasks in the part 2 of this guide: for this reason, just click the Next button a couple times

press the Next button a couple times to enter into the Run your app to verify installation phase. This is basically a ping test that Firebase will do to verify that your app can connect to its API, thus ensuring that the SDK has been installed correctly.

As soon as the test runs, you will see a grey message saying that Firebase is trying to check for your app presence. Leave the web page open, switch to Visual Studio Code and run your React Native app in debug mode.

IMPORTANT: do not forget to add a React-Native Configuration in your app (using Add -> New Configuration from the VS Code menu) if you didn’t do that already, as explained in this post.

If you did everything correctly, the app should run with no issues and show the “Welcome to React” sample view on your emulator (or test phone) screen:

React Native with Push Notifications and Firebase - Part 3 of 5

Right after that, switch back to the Firebase testing page and ensure that the app has been detected there as well.

If everything is OK you should be able to see the following green message:

React Native with Push Notifications and Firebase - Part 3 of 5

Our Firebase Android App is complete. Now we need to do the same with the iOS App.

Firebase iOS App

Creating the iOS app is rather similar to the Android process we’ve just dealt with.

Go back to the project dashboard, then click the Add app button to add a new iOS app: click on the iOS logo when asked to choose a platform and then fill in the relevant values to the Add Firebase to your iOS app form, just like we did with the Android app.

React Native with Push Notifications and Firebase - Part 3 of 5
IMPORTANT: Be sure to specify the correct iOS bundle ID – you won’t be able to change that later on. If you have XCode, you can find it by opening the iOS native app and go to the General > Identifier tab. If you don’t have XCode, you can use the Android applicationID from the previous app replacing the underscores “_” with dashes “-“.

Once you’ve done, click Register App and then Next to continue to the step 2, wher e you’ll be given the chance to download a GoogleService-info.plist file containing the required configuration to run Firebase on the iOS version of your React Native app: download and save it within the /ios/<app_name>/ folder of your React Native app, the same folder where the Info.plist file is.

If you use XCode, you can take the picture shown on the Firebase web page as a useful reference:

React Native with Push Notifications and Firebase - Part 3 of 5

Again, the next two steps (3 and 4) can be skipped, as we already performed the mentioned tasks in the part 2 of this guide: for this reason, just click the Next button a couple times to enter into the Run your app to verify installation phase. This is basically a ping test that Firebase will do to verify that your app can connect to its API, thus ensuring that the SDK has been installed correctly.

As soon as the test runs, you will see a grey message saying that Firebase is trying to check for your app presence. Leave the web page open, switch to your Mac and run your React Native app in debug mode using the following React Native CLI console command from the app’s root folder:

> react-native run-ios

Alternatively, if you want to force a specific iOS simulator, you can also use the –simulator flag in the following way:

> react-native run-ios –simulator “iPhone 7”

SIDE NOTE: Since I don’t own a Mac, I personally always use a VMWare virtual machine with IOS Sierra to perform such task: it works fine, and if you configure the VM with 8GB or more it can even be used to debug the React Native app on iOS. Sadly, though, you’ll still need a physical iOS device (such as an iPhone) to actually test the push notifications, as they won’t work in the simulators shipped with XCode.  Anyway, if you need advices on how to pull off the iOS VM up and running, feel free to ask me using the comments section below this post!

Conclusion

That’s it! If everything went good, it means we’ve successfully created our Firebase project, the Android and iOS Firebase app, and tested our connection between them and our React Native app… meaning that we can already receive push notifications on our device(s)!

Now we need to deal with our React-Native UI in order to make our app actually able to receive push notifications.

Part 4 of 5: Implement the React Native UI

 

About Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies. Microsoft MVP for Development Technologies since 2018.

View all posts by Ryan

4 Comments on “React Native with Push Notifications and Firebase – Part 3 of 5 How to create, setup and configure a React Native project with Push Notifications support using Firebase SDK and API - Part 3 of 5: Create the Firebase project(s) and configure the Service APIs for Android and iOS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.