Firebase HTTP V1 Push Notifications with React Native Expo | Foreground & Background | Tutorial

Introduction

In this tutorial, you will learn how to implement Firebase HTTP V1 push notifications in your React Native Expo app. This guide covers setting up the project, configuring Firebase, and handling both foreground and background notifications. By following these steps, you'll enhance your app's user experience with timely notifications.

Step 1: Initialize Your React Native Expo Project

• Open your terminal.
• Create a new Expo project:

  expo init YourProjectName
  

• Navigate to your project directory:

  cd YourProjectName
  

Step 2: Install Required Packages

• Install the Firebase and Expo push notifications libraries:

  npm install firebase @react-native-firebase/app @react-native-firebase/messaging
  

Step 3: Set Up Firebase Project

• Go to the Firebase Console.
• Create a new project.

Add your Android app

• Enter your app's package name.
• Register the app and download the google-services.json file.
• Move the google-services.json file to your project’s root directory.

Step 4: Configure Firebase in Your App

Open your app.json file

• Add the following configuration:

  {
    "expo": {
      "android": {
        "package": "com.your.package.name"
      }
    }
  }
  

Step 5: Generate SHA1 Key

• Use the following command to generate your SHA1 key:

  keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
  

• Copy the SHA1 key and add it to your Firebase project settings.

Step 6: Request User Permission for Notifications

• In your main application file, request permission for notifications:

  import messaging from '@react-native-firebase/messaging';
  
  async function requestUserPermission() {
      const authStatus = await messaging().requestPermission();
      const enabled = authStatus === messaging.AuthorizationStatus.AUTHORIZED || 
                      authStatus === messaging.AuthorizationStatus.PROVISIONAL;
  
      if (enabled) {
          console.log('Authorization status:', authStatus);
      }
  }
  

Step 7: Handling Foreground Notifications

• Implement a listener for foreground notifications:

  messaging().onMessage(async remoteMessage => {
      console.log('A new FCM message arrived!', remoteMessage);
  });
  

Step 8: Handling Background Notifications

• Configure background message handling:

  messaging().setBackgroundMessageHandler(async remoteMessage => {
      console.log('Message handled in the background!', remoteMessage);
  });
  

Step 9: Create and Send Test Notifications

Use Firebase Console to create a notification campaign

• Select your app.
• Go to Cloud Messaging.
• Click on "Send a message."
• Fill in the required fields and send the notification.

Step 10: Build Your APK for Testing

• To test your notifications on a physical device, build your APK:

  expo build:android
  

• Follow the prompts to generate your APK file.

Conclusion

You have successfully set up Firebase HTTP V1 push notifications in your React Native Expo app. This includes configuring Firebase, handling notifications in both foreground and background states, and testing your implementation. For further enhancement, consider exploring more advanced notification features and integrating them into your app's user experience. Happy coding!