How to Add Push Notification in React Native with Firebase

You know how sometimes we learn how applications are behaving on our smartphones. We receive pop-ups or push notifications from these applications. They may be inconvenient, but they are beneficial in some way. In this blog, we’ll go through the Firebase push notification in React Native in greater detail. And how, with the help of a React Native developer, we can build it quickly.

What is React Native?

React Native is a JavaScript framework that allows you to create natively rendered mobile apps. React, Facebook’s JavaScript toolkit for creating user interfaces for mobile platforms. React Native makes it simple to build for both Android and iOS simultaneously.

What is Firebase?

Firebase serves as a Backend-as-a-Service (BaaS) platform. It has since evolved into a Google Cloud Platform-based next-generation app development platform. It is becoming increasingly popular because of its ease of integration and scope of features. FCM (Firebase Cloud Messaging) is a messaging solution used on multiple platforms simultaneously. It works with iOS, Android, web, Unity, and C++. FCM also is used to deliver users notifications and data messages.

Firebase has several simple integrations available.

  • Email authentication
  • Social media logins
  • Real-time database
  • Push notification
  • Integration of Firebase with React Native
  • Integrating React Native with Firebase

    React Native is a Facebook-maintained technology used to create front-end applications for different platforms. Google’s Firebase is a backend-as-a-service solution. These two components can be employed to develop a cross-platform application.

    Let’s closely look at how to use Firebase to set up push notifications.

    Develop a new React Native application

    So, the first step is to follow some simple procedures to create a React Native application. You can also take the professional help of React Native app developers. Once your application is ready, you can run it on a device or simulator. You can adjust your criteria as soon as you receive a push message.

    Create a new Firebase application

    Now it’s time to connect this app to Firebase.

  • To start, enter your Firebase account and use the Add project card to create a new project.
  • Click Continue after you’ve entered your project’s name.
  • You can enable or disable Google Analytics, then click Continue.
  • When your project is complete click, continue to return to the project dashboard.
  • Create an Android application on this dashboard by selecting the Android icon from your project dashboard. You can create a new Android application or use an existing one according to your preference.

    Install the push notification plugin

    You can use two substantial dependencies/plugins to implement push notifications.

  • React Native push notification
  • React Native Firebase
  • React Native Firebase is a vast plugin that allows you to use practically all of Firebase’s features with react-native. React Native push notification plugin, created exclusively for push notifications, will be used. To add a push notification dependency to your React application, you can utilize a variety of packages. React-native-firebase is a popular package that allows you to use all Firebase’s features in your React apps.

    Build the Android application

    It’s relatively simple to create apps for Android. We need to develop the app on a physical device to test the push notifications.

  • To enable push notifications on Android, we must first download the Google-services.json configuration file.
  • This file is generated by Firebase and saved to the android/app/ folder.
  • In addition, It is also necessary to enable the Google-services plugin.
  • To do so, add the Google-services plugin to android/build.gradle as a dependency.
  • Messages from Firebase console received

    After setting up everything needed for push notifications to operate on both platforms, the only thing left is to build our React Native code to receive messages from Firebase, which will be shown as notifications later. We’ll send the messages directly from the Firebase console for this blog article. It lets us customize the notification title and text and do other handy functions.

    Before we exchange any messages, we should be aware that iOS does not allow notifications to be displayed unless the user has given specific permission. As a result, we’ll use the already installed library to ask the user for permission.

    And your push notifications are enabled.

    Handle a variety of Push Notifications

    Let’s look at how we can get data from these notifications and add it to our list.

    App for the foreground

    In the debugger, we can inspect the push data format. For example, here is a notice from a foreground app. Data from push notifications are available in the foreground as soon as they arrive. Data will come back to the app if you tap the notice again, which results in duplication.

    App for close-up and background

    The data received when the program is closed or in the background is in a slightly different format. We don’t get the notification’s title or message, but we get all of the custom key-value pairs sent. And, we have no idea what state the app is in when the data is received.


    Sending and receiving push notifications in React Native and Firebase needs a significant amount of setup though most of it is simple. As a result, we now have a fantastic approach to managing push notifications, complete with different settings and ways to manipulate them as we see fit. For more consideration, consult React Native development services or companies.


    What are the two methods for dealing with data in React?

    Props and sorts are the two methods for dealing with data in React Native. They manage data for the components.

    What is the storage capacity of Firebase?

    Up to 10 GB of storage for your Hosting content is provided free of charge. You won’t be able to deploy new material to your sites if you aren’t on the Blaze plan and surpass the 10 GB limit of no-cost Hosting storage.

    What can you do use Firebase?

    Google Firebase is a Google-backed app development platform that allows developers to create apps for iOS, Android, and the web. Firebase delivers analytics tracking, reporting, app issue fixes, and marketing product experimentation capabilities.