React Native, Expo 연동하기

플레어레인을 사용하여 React Native(리액트 네이티브), Expo 앱 푸시 알림을 쉽게 구현하는 방법에 대해 알아봅니다.
1. 사전 준비 
타 푸시 솔루션과 함께 사용할 수 있습니다!플레어레인 SDK 1.1.0 버전부터 플레어레인과 다른 푸시 솔루션을 병행 사용할 수 있습니다.
병행 사용을 위해서는 ﻿iOS: Swizzling 비활성화 가이드를 참고하여 몇 가지 작업을 추가해야합니다.
Expo 프로젝트는 Managed workflow 환경에서 벗어나(Ejected) Native Modules 설치가 가능한 환경이어야 합니다. 자세한 내용은 Expo의 아래 문서를 참고하세요.
Managed workflow vs Bare workflow﻿
﻿플레어레인 관리자 에서 회원가입 후 프로젝트 생성
﻿﻿Android: FCM 인증 정보 설정 ﻿iOS: APNS 인증 정보 설정 
﻿
2. SDK 설치 터미널에서 프로젝트 루트 디렉토리로 이동한 뒤, 다음 명령어를 입력합니다
Terminal
|
$ yarn add @flarelane/react-native-sdk
$ yarn add @flarelane/react-native-sdk
﻿
﻿
3. Android 13 지원유저로부터 푸시 알림 구독을 원활히 받아낼 수 있도록 아래 2가지 조건을 모두 만족하고 있는지 확인해주세요.
플레어레인 SDK 1.2.0 이상 사용
compileSdkVersion을 최소 33으로 지정
app/build.gradle
|
android {
    compileSdkVersion 33
    ...

    defaultConfig {
        ...
        targetSdkVersion 33
    }
}
android {
    compileSdkVersion 33
    ...

    defaultConfig {
        ...
        targetSdkVersion 33
    }
}
﻿
﻿
4. iOS 프로젝트 설정  터미널에서 cd ios 를 입력하여 ios 디렉토리로 이동합니다.

 Podfile 파일의 상단에 platform :ios, '11.0' 혹은 11.0 버전 이상을 입력합니다.

 pod install 을 입력하여 CocoaPods 설치를 완료합니다.

 <YOUR_PROJECT_NAME>.xcworkspace 파일을 열어 Xcode 프로젝트를 실행합니다.

 대상 PROJECT의 Deployment Target 을 11.0 혹은 그 이상으로 입력합니다.

 대상 TARGET의 Deployment Info을 11.0 혹은 그 이상으로 입력합니다.

 앱푸시 발송 권한을 추가합니다. Target 의 "Signing & Capabilites" 탭으로 들어와 좌상단의 "+ Capability" 를 클릭합니다.

"Push Notifications" 를 선택하여 추가합니다.
﻿
﻿
5. 초기화 코드 작성   index.js에서 초기화 코드를 입력합니다. 프로젝트 ID는 콘솔의 [프로젝트] 페이지에서 확인할 수 있습니다.
index.js
|
import FlareLane from '@flarelane/react-native-sdk';

// 다음 초기화 코드 입력
FlareLane.initialize('INPUT_YOUR_PROJECT_ID');

AppRegistry.registerComponent(appName, () => App);
import FlareLane from '@flarelane/react-native-sdk';

// 다음 초기화 코드 입력
FlareLane.initialize('INPUT_YOUR_PROJECT_ID');

AppRegistry.registerComponent(appName, () => App);
﻿
6. 테스트여기까지 모두 완료하셨으면 앱 빌드, 실행 후 푸시 알림 구독 시 자동으로 플레어레인 전체 기기 리스트에 추가됩니다.
실제 배포 전, 푸시를 실제 발송하여 기기에 잘 오는지, 푸시 클릭 시 통계에 잘 잡히는지 반드시 직접 확인하시기 바랍니다.
﻿
7. (선택) 추가 개발 연동푸시 알림 아이콘을 별도 설정하고 싶습니다.[Android] ﻿Android: 알림 아이콘 설정 을 참고하여 아이콘 애셋 세팅을 합니다.
[iOS] 기존 앱 아이콘을 기본으로 따릅니다.
푸시 알림에 이미지 첨부를 하고 싶습니다.[iOS] ﻿iOS: Rich Notification 을 참고하여 Notification Extension 세팅을 합니다.
[Android] 추가 작업이 필요하지 않습니다.
﻿