FCM test notification does not appear on my Android Emulator

Question

I am trying to send a test notification from Firebase to Android Emulator using Firebase Cloud Messaging and React Native. I receive the FCM registration token in my VSC terminal, but when I try to send a test notification nothing appears in my terminal or in the Android Emulator. I have added this code to my build.gradle(android) file:

buildscript {
repositories {
...
google()  
}
dependencies {
...
classpath 'com.google.gms:google-services:4.3.8'
}
}
allprojects {
...
repositories {
...
google()  
...
}
dependencies{
....
 classpath('com.google.gms:google-services:4.4.1')
 classpath('com.google.firebase:firebase-crashlytics-gradle:2.7.0')
}
}

This is the code that I have added to my app build.gradle:

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'
...
dependencies {

implementation platform('com.google.firebase:firebase-bom:28.2.1')
...
}

And this code to my AndroidManifest.xml file:

<uses-permission android:name="android.permission.WAKE_LOCK" />
<permission
android:name="${applicationId}.permission.C2D_MESSAGE"
android:protectionLevel="signature" />
<uses-permission android:name="${applicationId}.permission.C2D_MESSAGE" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<application .......>
<meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_name"
android:value="YOUR NOTIFICATION CHANNEL NAME"/>
<meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_description"
android:value="YOUR NOTIFICATION CHANNEL DESCRIPTION"/>
<meta-data  android:name="com.dieam.reactnativepushnotification.notification_color"
android:resource="@android:color/white"/>
<receiver
android:name="com.google.android.gms.gcm.GcmReceiver"
android:exported="true"
android:permission="com.google.android.c2dm.permission.SEND" >
<intent-filter>
<action android:name="com.google.android.c2dm.intent.RECEIVE" />
<category android:name="${applicationId}" />
</intent-filter>
</receiver>
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
<intent-filter>
<action android:name="android.intent.action.BOOT_COMPLETED" />
</intent-filter>
</receiver>
<service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService"/>
<service
android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
android:exported="false" >
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT" />
</intent-filter>
</service>
... </application>

This is my configruation code:

import { Component } from "react"
import PushNotification from "react-native-push-notification"
import PushNotificationIOS from "@react-native-community/push-notification-ios"

export default class PushController extends Component {
  componentDidMount() {
    PushNotification.configure({
    
      onRegister: function (token) {
        console.log("TOKEN:", token) // I GET THE TOKEN SUCCESSFULLY
      },
      
      onNotification: function (notification) {
        console.log("NOTIFICATION:", notification) // CANNOT SEE THIS LOG

       
        notification.finish(PushNotificationIOS.FetchResult.NoData)
      },
      
      senderID: "44110657871",
     
      permissions: {
        alert: true,
        badge: true,
        sound: true,
      },
      popInitialNotification: true,
      requestPermissions: true,
    })
  }
  render() {
    return null
  }
}

And this is my code in PushNotifications.js:

import React, { Fragment } from "react"
import PushController from "./PushController"

import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  FlatList,
} from "react-native"
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from "react-native/Libraries/NewAppScreen"
// Dummy data for list, we'll replace this with data received from push
let pushData = [
  {
    title: "First push",
    message: "First push message",
  },
  {
    title: "Second push",
    message: "Second push message",
  },
]
_renderItem = ({ item }) => (
  <View key={item.title}>
    <Text style={styles.title}>{item.title}</Text>
    <Text style={styles.message}>{item.message}</Text>
  </View>
)
const PushNotifications = () => {
  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)
    }
  }

  return (
    <Fragment>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}
        >
          <Header />
          <View style={styles.listHeader}>
            <Text>Push Notifications</Text>
          </View>
          <View style={styles.body}>
            <FlatList
              data={pushData}
              renderItem={(item) => this._renderItem(item)}
              keyExtractor={(item) => item.title}
            />
            {/* <LearnMoreLinks /> */}
          </View>
        </ScrollView>
      </SafeAreaView>
      <PushController />
    </Fragment>
  )
}
const styles = 
...
export default PushNotifications

Please help me!

Answer 1

Create a new emulator in Android Studio > AVD Manager with Android SDK that has `google APIs installed

Also, make sure that SDK Manager > SDK Tools > Google Play Services is installed.