React Native (0.63) Push

6 min readMar 5, 2021

react-native-firebase v5 을 사용할 수록 오래된 버전이여서 알림관련 버그가 계속 발생했습니다..ㅠㅠ 고민 끝에 react-native-push-notification 으로 변경했고 변경 과정중에 알게된 정보를 정리했습니다. doc에 설치방법이 잘나와 있어서 설치방법은 제외하고 어떻게 사용하면 되는지 위주로 정리하였습니다.

2022.11.8일 메모

android에서 react-native-push-notification 의 오랫동안 업데이트가 없어서 버그가 있는듯 합니다. notifree(react-native-firebase/notification)가 다시 무료가 되었습니다. notifree나 react-native-notifications을 권장합니다.

1. react-native-push-notification 설치하기

react-native-push-notification 를 설치할 때 iOS는 추가로 iOS Notification을 설치해줘야 한다.

2. 소스에 설정하기

PushNotification.configure({}) 설정을 Component에서 하면 알림 핸들러가 작동하지 않을 수 있다. 그래서 보통은 index.js 파일에 추가한다.

iOS 처리 흐름

configure 속성 requestPermission : false 설정한다. 왜나하면 true로 설정할 경우 앱을 켜자마자 권한을 요청함으로 원하는 타이밍에 알림 권한을 요청하기 위함이다
로그인 완료 후 알림권한 요청 (알림권한 요청에는 react-native-permission을 사용했다. )
사용자가 알림권한을 허락한다면 configure 속성 onRegister 속성에 APNS 토큰이 반환된다. 반환된 토큰은 AsyncStoreage 나 필요에 따라 서버에 저장한다.
FCM 토큰이 필요한 경우 구글API를 통해서 APNS → FCM으로 토큰을 변환해야한다.

APNS 토큰 → FCM 토큰으로 변환 방법

axios({
    url : 'https://iid.googleapis.com/iid/v1:batchImport',
    method : 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'key=${파이어베이스 설정에 클라우드 메시징에 있는 서버 키}'
    },
    data : {
        "application" : ${ 앱 패키지 ID },
        "sandbox"     : true, //개발서버이면 true, 운영이면  false를 설정한다.
        "apns_tokens" :[
            apnsTokens.token
        ]
    }
}).then((res)=> {
    return res.data.results[0].registration_token; //FCM토큰이 반환됨
}).catch((error) => {
    console.log("APNS -> FCM 토큰 변경 에러");
})

Android 처리 흐름

configure 속성 requestPermission : true 설정한다. 안드로이드의 경우 false로 하면 configure 속성 onRegister 을 통해서 푸시토큰 획득되지 않는다. 그래서 iOS와는 다르게 requestPermission : true로 한 다음 푸시토큰을 획득한다. 푸시토큰을 획득한 다음 알림 설정 여부는 필요에 따라 처리한다.
configure 속성 onRegister 속성에 토큰이 반환되고 반환된 토큰은 AsyncStoreage 나 필요에 따라 서버에 저장한다.

App.js

import PushNotificationIOS from "@react-native-community/push-notification-ios";
import PushNotification from "react-native-push-notification";
import { navigationRef } from './RootNavigation';PushNotification.configure({  
        // (optional) Called when Token is generated (iOS and Android)
        onRegister: async function  (token)  { 
            //토큰은 필요에 따라 AsyncStorage에 저장하거나 필요에 따라 서버에 저장한다.
            pushConfig.setPushToken(token) 
        },
        // (required) Called when a remote is received or opened, or local notification is opened
        onNotification: function (notification) {
          if(notification.userInteraction){
						navigationRef.current.navigate("Home")
					}
          notification.finish(PushNotificationIOS.FetchResult.NoData);
        },
        // (optional) Called when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. (iOS)
        onRegistrationError: function(err) {
          console.error(err.message, err);
        },
        requestPermissions: Platform.OS === 'ios' ? false : true,
      });
});

알림 선택 시 화면이동 하기

onNotification 핸들러를 통해서 알림을 선택하거나 수신한 경우 알림정보를 확인 할 수 있다.
notification.userInteraction 속성이 true 면 유저가 알림을 선택했음을 알 수 있다.
App.js에서는 useNavigation을 사용할 수 없다. 대신 navigationRef를 만들면 화면이동이 가능하다.
navigationRef.current.navigate(“Home”) 을 사용해서 원하는 화면을 이동한다.

RootNavigation.js

import * as React from 'react';export const navigationRef = React.createRef();export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}