FCM Messaging not displaying - i do get Firebase Token

[mortencallesen]

This is my package.json:

"dependencies": { "@expo/vector-icons": "^14.0.2", "@react-native-firebase/app": "^22.0.0", "@react-native-firebase/auth": "^22.0.0", "@react-native-firebase/crashlytics": "^22.0.0", "@react-native-firebase/messaging": "^22.0.0", "@react-navigation/bottom-tabs": "^7.2.0", "@react-navigation/native": "^7.0.14", "expo": "~52.0.46", "expo-blur": "~14.0.3", "expo-constants": "~17.0.8", "expo-font": "~13.0.4", "expo-haptics": "~14.0.1", "expo-linking": "~7.0.5", "expo-router": "~4.0.20", "expo-splash-screen": "~0.29.24", "expo-status-bar": "~2.0.1", "expo-symbols": "~0.2.2", "expo-system-ui": "~4.0.9", "expo-web-browser": "~14.0.2", "react": "18.3.1", "react-dom": "18.3.1", "react-native": "0.76.9", "react-native-gesture-handler": "~2.20.2", "react-native-reanimated": "~3.16.1", "react-native-safe-area-context": "4.12.0", "react-native-screens": "~4.4.0", "react-native-web": "~0.19.13", "react-native-webview": "13.12.5" },

Here is my tsx where i get the token:
`import {DarkTheme, DefaultTheme, ThemeProvider} from "@react-navigation/native";
import {useFonts} from "expo-font";
import {Stack} from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import {StatusBar} from "expo-status-bar";
import {useEffect} from "react";
import "react-native-reanimated";
import React from "react";
import {Alert, Platform} from "react-native";
import {getApp} from "@react-native-firebase/app";
import {getMessaging} from "@react-native-firebase/messaging";
import {useColorScheme} from "@/hooks/useColorScheme";
import {PermissionsAndroid} from "react-native";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

// Get the messaging instance
const messagingInstance = getMessaging(getApp());

// Set the background message handler - CORRECT WAY
messagingInstance.setBackgroundMessageHandler(async (remoteMessage) => {
console.log("Message handled in the background!", remoteMessage);
console.log("Message Data:", remoteMessage.data);
console.log("Message Notification:", remoteMessage.notification);
// You can perform any necessary actions here, such as updating local storage
});

async function requestUserPermission() {
const authStatus = await messagingInstance.requestPermission();
const enabled =
authStatus === messagingInstance.AuthorizationStatus.AUTHORIZED ||
authStatus === messagingInstance.AuthorizationStatus.PROVISIONAL;

if (enabled) {
console.log("Authorization status:", authStatus);
getFcmToken();
}
}

const getFcmToken = async () => {
let fcmToken = await messagingInstance.getToken();
if (fcmToken) {
console.log("Your Firebase Token is:", fcmToken);
// You can now send this token to your server to send push notifications to this device
} else {
console.log("Failed", "No token received");
}
};

const requestUserPermissions = async () => {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("You can use the notification");
} else {
console.log("Notification permission denied");
}
};

const checkApplicationPermission = () => {
if (Platform.OS === "ios") {
requestUserPermission();
} else {
requestUserPermissions();
getFcmToken();
}
};

// Create the notification channel - CORRECT WAY
const createNotificationChannel = async () => {
if (Platform.OS === "android") {
try {
await messagingInstance.createChannel({
// Corrected line: messaging.createChannel
id: "default-channel",
name: "Default Channel",
importance: 4, // max importance
vibration: true,
});
console.log("Channel created");
} catch (e) {
console.log("Channel creation failed", e);
}
}
};

export default function RootLayout() {
const colorScheme = useColorScheme();
const [loaded] = useFonts({
SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
});

useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
}
}, [loaded]);

useEffect(() => {
checkApplicationPermission();
createNotificationChannel();

// Listen for foreground messages
const unsubscribe = messagingInstance.onMessage(async (remoteMessage) => {
  console.log("A new FCM message arrived!", remoteMessage);
  console.log("Message Data:", remoteMessage.data);
  console.log("Message Notification:", remoteMessage.notification);
  // Display the message using Alert
  Alert.alert(
    remoteMessage.notification?.title || "New Message",
    remoteMessage.notification?.body || JSON.stringify(remoteMessage.data)
  );
});

// Handle the notification that launched the app
messagingInstance.getInitialNotification().then((remoteMessage) => {
  if (remoteMessage) {
    console.log(
      "Notification caused app to open from quit state:",
      remoteMessage
    );
  }
});

return () => {
  unsubscribe();
};

}, []);

if (!loaded) {
return null;
}

return (
<ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>

<Stack.Screen name="(tabs)" options={{headerShown: false}} />
<Stack.Screen name="+not-found" />



);
}

When i run: npx expo run:android,
the emulator starts fine, and logs "Your Firebase Token is :xxxx" to the console.

When i take this token and use it on firebase console to send a test message - nothing happens on the device.

Is there an obvious thing i might have forgotten here?