Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

FCM Messaging not displaying - i do get Firebase Token #8497

Unanswered
mortencallesen asked this question in Q&A
Discussion options

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?

You must be logged in to vote

Replies: 0 comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
1 participant

AltStyle によって変換されたページ (->オリジナル) /