یک راهنمای سریع برای فشار دادن اعلان ها با نمایش های نمایشی و Firebase

npx expo install expo-notifications @react-native-firebase/app @react-native-firebase/messaging

app.json

{
  "expo": {
    "ios": {
      "googleServicesFile": "./assets/GoogleService-Info.plist"
    }
    "android": {
      "googleServicesFile": "./assets/google-services.json"
    }
  }
  "plugins": [
    [
      "expo-notifications",
      {
        "icon": "./assets/icon.png",
        "color": "#002d2d",
        "defaultChannel": "default",
        "enableBackgroundRemoteNotifications": true
      }
    ],
    "@react-native-firebase/app",
    "@react-native-firebase/messaging",
  ]
}

 npx expo prebuild

android/app/src/main/AndroidManifest.xml

- 
+ 

- 
+ 

- 
+ 

 npm run android

import { getMessaging } from "@react-native-firebase/messaging";
import { PermissionsAndroid } from "react-native";

// Get a Firebase Messaging service instance
const messaging = getMessaging();

//IOS Permission
await messaging.requestPermission();
//Android Permission
await PermissionsAndroid.request(
  PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS
);

// Subscribe to receive events from Firebase messaging service
await messaging.registerDeviceForRemoteMessages();
// Get device a FCM token for the device
const pushToken = await messaging.getToken();
// You probably would like save the token in a database
console.log("Firebase Token:", pushToken);

import { getMessaging } from "@react-native-firebase/messaging";
import * as Notifications from "expo-notifications";

// Configure push notification behavior when app is in foreground
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
    shouldShowBanner: true,
    shouldShowList: true,
  }),
});

// Trigger notification at same moment
async function schedulePushNotification({
  title = "New menage",
  body = "You have a new message!",
  data = {},
}) {
  await Notifications.scheduleNotificationAsync({
    content: {
      title,
      body,
      data,
    },
    trigger: null,
  });
}

// Get a Firebase Messaging service instance
const messaging = getMessaging();

useEffect(() => {
  // Handle foreground messages and returns the cleanup function
  const unsubscribeForeground = messaging.onMessage(async (remoteMessage) => {
    schedulePushNotification({
      title: remoteMessage?.notification?.title,
      body: remoteMessage?.notification?.body,
      data: remoteMessage?.data || {},
    });
  });

  return () => {
    // Clean the resources used for the listener
    unsubscribeForeground();
  };
}, []);

useEffect(() => {
  // Handle app opening from a background messages and returns the cleanup function
  const unsubscribeBackground = messaging.onNotificationOpenedApp(
    // Handle navigation or app state changes
    (remoteMessage) => {
      console.log("Background message opened:", remoteMessage);
    }
  );

  return () => {
    // Clean the resources used for the listener
    unsubscribeBackground();
  };
}, []);

import { getMessaging } from "@react-native-firebase/messaging";
import * as Notifications from "expo-notifications";
import { useEffect } from "react";
import { PermissionsAndroid, Platform } from "react-native";
import { getUniqueIdSync } from "react-native-device-info";

import { postPushNotification } from "../services/services";

// Configure push notification behavior when app is in foreground
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
    shouldShowBanner: true,
    shouldShowList: true,
  }),
});

// Trigger notification
async function schedulePushNotification({
  title = "Nova mensagem",
  body = "Você tem uma nova mensagem!",
  data = {},
}) {
  await Notifications.scheduleNotificationAsync({
    content: {
      title,
      body,
      data,
    },
    trigger: null,
  });
}

// Configure push notification
export function useConfigPushNotification() {
  // Firebase messaging service instance
  const messaging = getMessaging();
  const deviceId = getUniqueIdSync();
  const platform = Platform.OS;

  /**
   * Handle permissions, register device in Firebase and save token in back end
   * @param {string} bearerToken
   */
  async function register(bearerToken) {
    // IOS permission
    await messaging.requestPermission();
    // Android permission
    await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS
    );

    // Register device
    await messaging.registerDeviceForRemoteMessages();
    const pushToken = await messaging.getToken();

    // Save token in back end
    try {
      await postPushNotification(bearerToken, platform, pushToken, deviceId);
    } catch (err) {
      console.log(err?.response);
    }
  }

  useEffect(() => {
    // Handle foreground messages and returns the cleanup function
    const unsubscribeForeground = messaging.onMessage(async (remoteMessage) => {
      schedulePushNotification({
        title: remoteMessage?.notification?.title,
        body: remoteMessage?.notification?.body,
        data: remoteMessage?.data || {},
      });
    });

    // Handle app opening from a background messages and returns the cleanup function
    const unsubscribeBackground = messaging.onNotificationOpenedApp(
      // Background message pop up is handled automatically
      // Handle navigation or app state changes
      (remoteMessage) => {
        console.log("Background message opened:", remoteMessage);
      }
    );

    return () => {
      unsubscribeForeground();
      unsubscribeBackground();
    };
  }, []);

  return { register };
}

const { register } = useConfigPushNotification();

// Config Push Notifications
try {
  await register("bearer_token");
} catch (err) {
  console.log(err);
}