Push Notification Using Firebase Cloud Messaging And React Native & Expo | Project And Tutorial | JS

Introduction

In this tutorial, you will learn how to implement push notifications in a React Native application using Firebase Cloud Messaging (FCM) with Expo. This guide is designed for developers who want to enhance their mobile applications by adding push notification functionality. Note that FCM does not directly support the Expo Go app, so we'll use a development build method.

Step 1: Set Up Firebase for Your Android Project

1. Create a Firebase Project

   • Go to the Firebase Console.
   • Click on "Add Project" and follow the prompts to create a new project.

2. Add an Android App to Your Firebase Project

   • Click on "Add app" and select the Android icon.
   • Enter your app's package name (you can find this in your app.json file).
   • Download the google-services.json file provided by Firebase and place it in your project's android/app directory.

3. Configure Firebase in Your React Native App

   • Install Firebase dependencies using npm or yarn:

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

   • Ensure you have the required permissions in your AndroidManifest.xml:

     <uses-permission android:name="android.permission.INTERNET"/>
     <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
     

Step 2: Create Development Build with Expo

1. Install Expo CLI

   • If you haven't already, install Expo CLI globally:

     npm install -g expo-cli
     

2. Create a New Expo Project

   • Use the following command to create a new Expo project:

     expo init YourProjectName
     

3. Eject to Bare Workflow

   • To use Firebase, you need to eject your Expo project to the bare workflow:

     expo eject
     

4. Install Required Packages for Development Build

   • Navigate to your project directory and run:

     npm install
     

Step 3: Implement Push Notifications

1. Request User Permissions

   • In your main component file (e.g., App.js), request permission to receive 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);
       }
     }
     
     useEffect(() => {
       requestUserPermission();
     }, []);
     

2. Get FCM Token

   • Retrieve the FCM token to send push notifications:

     useEffect(() => {
       const unsubscribe = messaging().onTokenRefresh(token => {
         console.log('New FCM Token:', token);
       });
     
       return unsubscribe;
     }, []);
     

3. Handling Foreground Notifications

   • Set up a listener to handle incoming notifications while the app is in the foreground:

     useEffect(() => {
       const unsubscribe = messaging().onMessage(async remoteMessage => {
         Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
       });
     
       return unsubscribe;
     }, []);
     

4. Handling Background and Quit State Notifications

   • To handle notifications when the app is in the background or quit state, set up the following in your index.js or App.js:

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

Conclusion

You have successfully integrated push notifications into your React Native application using Firebase Cloud Messaging and the Expo development build method. Key takeaways include setting up Firebase, creating a development build, and handling foreground and background notifications. For further enhancements, explore features like custom notification sounds and handling different notification types. Happy coding!