Firebase를 사용한 React Native 알림 설정

이 기사는 React Native에서 Notifee 설정을 안내합니다.

설치 및 구성했다고 가정합니다.

✔️ @react-native-firebase
✔️ Firebase를 처리하는 Notifications.ts 파일 생성
✔️ 요청 및 부여된 사용자 권한
✔️ 채널 구독
✔️ Firebase에 알림 리스너 생성
✔️ 데이터가 포함된 알림을 백엔드에서 보낼 수 있습니다.

이제 알림 설정을 해보자

1- 실 추가 @notifee/react-native
2- cd ios/&& 포드 설치 --repo-update

이제 NotificationHandler.ts에서 handleClickedNotitfaction 함수를 생성해 보겠습니다.

export const handleClickedNotitfaction = (notification: FirebaseMessagingTypes.RemoteMessage): void => {
  if (notifcation && notification.data && notification.data.type) {
    switch (notification.data.type) {
      case 'Product':
        navigateToProduct({
          navigation: NavigationService,
          id: notification.data.product_id,
          title: notification.data.product_name,
        });
        break;
      case 'Category':
        navigateToCategory({
          navigation: NavigationService,
          id: notification.data.category_id,
          title: notification.data.category_name,
        });
        break;
      case 'Brand':
        navigateToBrand({ navigation: NavigationService, id: notification.data.brand_id, title: notification.data.brand_name });
        break;
      default:
        navigateToHome({ navigation: NavigationService });
    }
  }
};

그리고 index.ts 파일에서 onBackgroundEvent 함수를 설정합니다.

import { handleClickedNotitfaction } from './src/utils';
import notifee, { EventType } from '@notifee/react-native';

notifee.onBackgroundEvent(async ({ type, detail }) => {
  switch (type) {
    case EventType.DISMISSED:
      notifee.cancelNotification(detail.notification.id);
      break;
    case EventType.PRESS:
      handleClickedNotitfaction(detail.notification);
      break;
    default:
      break;
  }
});

App.tsx에서 onForegroundEvent 함수를 설정합니다.

import { handleClickedNotitfaction } from './utils';
import notifee, { EventType } from '@notifee/react-native';

  useEffect(() => {
    const unsubscribe = () => {
      return notifee.onForegroundEvent(({ type, detail }) => {
        switch (type) {
          case EventType.DISMISSED:
            notifee.cancelNotification(detail.notification.id);
            break;
          case EventType.PRESS:
            handleClickedNotitfaction(detail.notification);
            break;
          default:
            break;
        }
      });
    };

    unsubscribe();
  }, []);

그런 다음 firebase와 통합되는 onMessageHandler 함수를 만들 수 있습니다.

import notifee from '@notifee/react-native';

const onNotifeeMessageReceived = async (message) => {
  const channelId = await notifee.createChannel({
    id: 'default',
    name: 'Default Channel',
  });

  notifee.displayNotification({
    id: message.messageId,
    title: message.notification.title,
    body: message.notification.body,
    data: message.data,
    android: {
      channelId: channelId,
      pressAction: {
        id: 'default',
      },
    },
  });
};

이제 이 기능을 @react-native-firebase/messaging에 추가해야 합니다.

import messaging from '@react-native-firebase/messaging';

  useEffect(() => {
    const unsubscribe = messaging().onMessage(onNotifeeMessageReceived);

    return unsubscribe;
  }, []);

이제 @notifee/react-native를 성공적으로 설치하고 @react-native-firebase와 통합했습니다.

행복한 코딩 ❤