React Native Android系统通知展示及Firebase通知库冲突问题咨询

Hey there! Let's tackle this problem step by step. You don't actually need react-native-push-notifications to show system notifications on Android when you're already using react-native-firebase—the library has built-in modules to handle this, which will also resolve the Google Services version conflict you're facing.

Instead of adding a separate library, leverage @react-native-firebase/messaging (for receiving push events) and @react-native-firebase/notifications (for displaying local system notifications). This keeps your dependencies aligned and avoids version clashes.

First, confirm you have both modules installed:

npm install @react-native-firebase/messaging @react-native-firebase/notifications
# or
yarn add @react-native-firebase/messaging @react-native-firebase/notifications

Android requires notification channels for API level 26+. Create a channel when your app starts:

import { Notifications } from '@react-native-firebase/notifications';

async function createDefaultNotificationChannel() {
  const channel = new Notifications.Android.Channel(
    'default_notification_channel', // Unique channel ID
    'Default Notifications', // Channel name
    Notifications.Android.Importance.Default // Priority level
  ).setDescription('All app notifications will appear here');

  // Register the channel with Android
  await Notifications().android.createChannel(channel);
}

Call this function in your app's root component (e.g., inside useEffect for functional components):

useEffect(() => {
  createDefaultNotificationChannel();
}, []);

When your app is in the foreground, Firebase won't automatically show a system notification—you need to handle it manually with the onMessage listener:

import messaging from '@react-native-firebase/messaging';
import { Notifications } from '@react-native-firebase/notifications';

// Listen for foreground push messages
const unsubscribe = messaging().onMessage(async remoteMessage => {
  // Build the notification
  const notification = new Notifications.Notification()
    .setNotificationId(remoteMessage.messageId)
    .setTitle(remoteMessage.notification.title)
    .setBody(remoteMessage.notification.body)
    .setSound('default') // Play default notification sound
    .android.setChannelId('default_notification_channel') // Link to your channel
    .android.setSmallIcon('ic_notification') // Your notification icon name
    .android.setPriority(Notifications.Android.Priority.High); // Ensure it pops up

  // Display the notification
  await Notifications().displayNotification(notification);
});

// Clean up the listener when component unmounts
useEffect(() => {
  return unsubscribe;
}, []);

1. Add your notification icon (a transparent PNG) to Android's mipmap folders (android/app/src/main/res/mipmap-*). Name it something like ic_notification.png.
2. Update your AndroidManifest.xml to set this as the default notification icon:

<meta-data
  android:name="com.google.firebase.messaging.default_notification_icon"
  android:resource="@mipmap/ic_notification" />
<meta-data
  android:name="com.google.firebase.messaging.default_notification_channel_id"
  android:value="default_notification_channel" />

3. For Android 13+, add the notification permission to AndroidManifest.xml:

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

And request the permission from the user:

async function requestNotificationPermission() {
  const authStatus = await messaging().requestPermission();
  const hasPermission = authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
                        authStatus === messaging.AuthorizationStatus.PROVISIONAL;
  
  if (hasPermission) {
    console.log('Notification permission granted');
  }
}

Since you tried react-native-push-notifications and hit version conflicts, the simplest fix is to remove that library entirely:

npm uninstall react-native-push-notifications
# or
yarn remove react-native-push-notifications

Then clean your Android build cache to eliminate leftover dependencies:

cd android && ./gradlew clean

react-native-firebase manages Google Services versions automatically, so this will resolve the conflict.

To navigate to a specific screen when the user taps a notification:

// Handle clicks when app is in foreground/background
messaging().onNotificationOpenedApp(remoteMessage => {
  console.log('Notification tapped:', remoteMessage);
  // Use your navigation library to go to a screen (e.g., React Navigation)
  // navigation.navigate('NotificationDetail', { data: remoteMessage.data });
});

// Handle clicks when app is fully closed
async function checkInitialNotification() {
  const initialNotification = await messaging().getInitialNotification();
  if (initialNotification) {
    console.log('Notification tapped from closed app:', initialNotification);
    // Navigate to your target screen here
  }
}

// Call this in your root component's useEffect
useEffect(() => {
  checkInitialNotification();
}, []);

内容的提问来源于stack exchange，提问作者Victor Ferreira