# AS-IS
## Step 1: Install a @react-native-firebase/app library and configure FCM and APNs
The [`@react-native-firebase/app`](https://rnfirebase.io) (React Native Firebase) library is an easy-to-use FCM library for simple integration. You can configure FCM and APNs for your React Native project by following the instructions in the [documentation](https://rnfirebase.io). See the React Native Firebase Documentation's [Notifications](https://rnfirebase.io/messaging/notifications) page.

> Note: As GCM server and client APIs are deprecated and will be removed as of April 11, 2019, we recommend that you use FCM and develop push notifications with the [`@react-native-firebase/app`](https://rnfirebase.io) library for your project.

---

# TO-BE
## Step 1: Install library and configure FCM and APNs

### FCM
The [`@react-native-firebase/app`](https://rnfirebase.io) library is an easy-to-use FCM library for simple integration. You can configure FCM for your React Native project by following the instructions in the [documentation](https://rnfirebase.io). See the React Native Firebase Documentation's [Notifications](https://rnfirebase.io/messaging/notifications) page.

$ npm install @react-native-firebase/app @react-native-firebase/messaging

> Note: As GCM server and client APIs are deprecated and will be removed as of April 11, 2019, we recommend that you use FCM and develop push notifications with the [`@react-native-firebase/app`](https://rnfirebase.io) library for your project.

### APNs
iOS 에서 푸시 알림 수신을 위해서 [`@react-native-community/push-notification-ios`](https://github.com/react-native-push-notification/ios) 라이브러리를 추가로 설치합니다. 설치 및 구성은 라이브러리 문서의 [Install](https://github.com/react-native-push-notification/ios#install) 섹션을 참고하세요.

$ npm install @react-native-community/push-notification-ios

---
---
---

# AS-IS
## Step 3: Receive FCM notification messages
Once the token is registered, you can make the client app instance to receive and handle [FCM notification messages](https://firebase.google.com/docs/cloud-messaging/concept-options) regardless of iOS and Android platforms. To learn more about the implementation, refer to the React Native Firebase Documentation's [Usage](https://rnfirebase.io/messaging/usage#usage) page.

With the instructions of the [Receiving Messages](https://rnfirebase.io/messaging/usage#receiving-messages) section, you can also find a way to receive FCM messages via the `onMessage()` listener, which monitors changes to the state (foreground/background, inactive) of your client app and helps you handle the FCM messages.

The sample code below shows how to parse received FCM messages by using the [library](https://rnfirebase.io/)'s module.

> Note: To display notifications in Android 8.0 (API level 26) and higher, you should provide a `Notification` instance with some required data, such as a channel ID. To display local notifications in iOS 9.0 and lower, we recommend using [`notifee`](https://notifee.app/).

import notifee, { AndroidImportance } from '@notifee/react-native';

const text = message.data.message;
const payload = JSON.parse(message.data.sendbird);

// This is required for compatibility with Android 8.0 (API level 26) and higher.
// Link: https://notifee.app/react-native/reference/createchannel
// Link: https://notifee.app/react-native/reference/androidchannel
const channelId = await notifee.createChannel({
    id: NOTIFICATION_CHANNEL_ID,
    name: NOTIFICATION_CHANNEL_NAME,
});

// Link: https://notifee.app/react-native/reference/displaynotification
await notifee.displayNotification({
    id: message.messageId,
    title: 'New message has arrived!',
    subtitle: `Number of unread messages: ${payload.unread_message_count}`,
    body: text,
    data: payload,
    // Link: https://notifee.app/react-native/reference/notificationandroid
    android: {
        channelId,
        smallIcon: NOTIFICATION_ICON_RESOURCE_ID,
        importance: AndroidImportance.HIGH,
    },
    // Link: https://notifee.app/react-native/reference/notificationios
    ios: {
        foregroundPresentationOptions: {
            alert: true,
            badge: true,
            sound: true,
        },
    },
});

---

# TO-BE
## Step 3: Receive notification messages
센드버드 서버에 토큰이 등록되면 Android 클라이언트는 FCM 을 통해, iOS 클라이언트는 APNs 를 통해 알림 메세지를 수신하게 됩니다.

APNs 의 경우 메세지 수신을 위해서 구성 이외에 별도로 구현해야 할 코드는 없지만,
FCM 의 경우 알림 메세지를 수신하고 처리하도록 구현을 해야합니다. [Receiving Messages](https://rnfirebase.io/messaging/usage#receiving-messages) 섹션을 통해서, 앱 상태(foreground/background/quit) 에 따른 FCM 수신방법을 자세히 확인할 수 있습니다.

아래의 샘플코드는 **FCM 메세지**를 background 및 quit 상태에서 수신하고 분석한 뒤, Local notification 으로 디스플레이 하는 방법을 보여줍니다.

> Note: To display notifications in Android 8.0 (API level 26) and higher, you should provide a `Notification` instance with some required data, such as a channel ID. To display local notifications, we recommend using [`notifee`](https://notifee.app/).

> JS/TS 동일

import messaging from '@react-native-firebase/messaging';
import notifee, { AndroidImportance } from '@notifee/react-native';

// Link: https://rnfirebase.io/messaging/usage#background--quit-state-messages
messaging().setBackgroundMessageHandler(async (message) => {
    const isSendbirdNotification = Boolean(message.data.sendbird);
    if(!isSendbirdNotification) return;

    const text = message.data.message;
    const payload = JSON.parse(message.data.sendbird);

    // This is required for compatibility with Android 8.0 (API level 26) and higher.
    // Link: https://notifee.app/react-native/reference/createchannel
    // Link: https://notifee.app/react-native/reference/androidchannel
    const channelId = await notifee.createChannel({
        id: 'NOTIFICATION_CHANNEL_ID',
        name: 'NOTIFICATION_CHANNEL_NAME',
        importance: AndroidImportance.HIGH
    });

    // Link: https://notifee.app/react-native/reference/displaynotification
    await notifee.displayNotification({
        id: message.messageId,
        title: 'New message has arrived!',
        subtitle: `Number of unread messages: ${payload.unread_message_count}`,
        body: payload.message,
        data: payload,
        // Link: https://notifee.app/react-native/reference/notificationandroid
        android: {
            channelId,
            smallIcon: NOTIFICATION_ICON_RESOURCE_ID,
            importance: AndroidImportance.HIGH,
        },
        // Link: https://notifee.app/react-native/reference/notificationios
        ios: {
            foregroundPresentationOptions: {
                alert: true,
                badge: true,
                sound: true,
            },
        },
    });
})

추가적으로 아래의 샘플 코드는 각 플랫폼에서 Local notification 을 열었을 때 처리하는 방법을 간략히 보여줍니다.
자세한 내용은 각 라이브러리의 이벤트 섹션([notifee](https://notifee.app/react-native/docs/events), [push-notification-ios](https://github.com/react-native-push-notification/ios#addeventlistener)) 을 참고하세요.

> Typescript

import Notifee, { Event, EventType } from '@notifee/react-native';
import PushNotificationIOS, { PushNotification } from '@react-native-community/push-notification-ios';

// Handle data from '@react-native-community/push-notification-ios'
const onNotificationIOS = (notification: PushNotification) => {
    const data = notification?.getData();
    if (data && data.userInteraction === 1 && Boolean(data.sendbird)) {
        // navigate to channel
        // const channelUrl = data.sendbird.channel.channel_url;
    }
}

// Handle data from '@notifee/react-native'
const onNotificationAndroid = async (event: Event) => {
    if(event.type === EventType.PRESS && Boolean(event.detail.notification?.data?.sendbird)) {
        // navigate to channel
        // const channelUrl = event.detail.notification.data.sendbird.channel.channel_url;
    }
}

const App = () => {
    useEffect(() => {
        PushNotificationIOS.getInitialNotification().then(onNotificationIOS);
        PushNotificationIOS.addEventListener('localNotification', onNotificationIOS);
        const unsubscribe = Notifee.onForegroundEvent(onNotificationAndroid);
        return () => {
            PushNotificationIOS.removeEventListener('localNotification');
            unsubscribe();
        }
    },[])
    
    // ...
    // Your app
}

Notifee.onBackgroundEvent(onNotificationAndroid)

> Javascript

import Notifee, { EventType } from '@notifee/react-native';
import PushNotificationIOS from '@react-native-community/push-notification-ios';

// Handle data from '@react-native-community/push-notification-ios'
const onNotificationIOS = (notification) => {
    const data = notification?.getData();
    if (data && data.userInteraction === 1 && Boolean(data.sendbird)) {
        // navigate to channel
        // const channelUrl = data.sendbird.channel.channel_url;
    }
}

// Handle data from '@notifee/react-native'
const onNotificationAndroid = async (event) => {
    if(event.type === EventType.PRESS && Boolean(event.detail.notification?.data?.sendbird)) {
        // navigate to channel
        // const channelUrl = event.detail.notification.data.sendbird.channel.channel_url;
    }
}

const App = () => {
    useEffect(() => {
        PushNotificationIOS.getInitialNotification().then(onNotificationIOS);
        PushNotificationIOS.addEventListener('localNotification', onNotificationIOS);
        const unsubscribe = Notifee.onForegroundEvent(onNotificationAndroid);
        return () => {
            PushNotificationIOS.removeEventListener('localNotification');
            unsubscribe();
        }
    },[])
    
    // ...
    // Your app
}

Notifee.onBackgroundEvent(onNotificationAndroid)