website logo
⌘K
🚀시작하기
📈마케터용 가이드
🛠️개발자용 가이드
플레어레인 홈페이지
플레어레인 콘솔
Docs in English
Docs powered by archbee 

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



3. Android 13 지원

유저로부터 푸시 알림 구독을 원활히 받아낼 수 있도록 아래 2가지 조건을 모두 만족하고 있는지 확인해주세요.

  • 플레어레인 SDK 1.2.0 이상 사용
  • compileSdkVersion을 최소 33으로 지정
app/build.gradle
|
android {
    compileSdkVersion 33
    ...

    defaultConfig {
        ...
        targetSdkVersion 33
    }
}



4. iOS 프로젝트 설정

  1. 터미널에서 cd ios 를 입력하여 ios 디렉토리로 이동합니다.
  2. Podfile 파일의 상단에 platform :ios, '11.0' 혹은 11.0 버전 이상을 입력합니다.
  3. pod install 을 입력하여 CocoaPods 설치를 완료합니다.
  4. <YOUR_PROJECT_NAME>.xcworkspace 파일을 열어 Xcode 프로젝트를 실행합니다.
  5. 대상 PROJECT의 Deployment Target 을 11.0 혹은 그 이상으로 입력합니다.
  6. 대상 TARGET의 Deployment Info을 11.0 혹은 그 이상으로 입력합니다.
  7. 앱푸시 발송 권한을 추가합니다. Target 의 "Signing & Capabilites" 탭으로 들어와 좌상단의 "+ Capability" 를 클릭합니다.
  8. "Push Notifications" 를 선택하여 추가합니다.
Document image



5. 초기화 코드 작성

index.js에서 초기화 코드를 입력합니다. 프로젝트 ID는 콘솔의 [프로젝트] 페이지에서 확인할 수 있습니다.

index.js
|
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] 추가 작업이 필요하지 않습니다.



Did this page help you?
Yes
No
PREVIOUS
iOS 연동하기
NEXT
Flutter 연동하기
Docs powered by archbee 
TABLE OF CONTENTS
1. 사전 준비
타 푸시 솔루션과 함께 사용할 수 있습니다!
2. SDK 설치
3. Android 13 지원
4. iOS 프로젝트 설정
5. 초기화 코드 작성
6. 테스트
7. (선택) 추가 개발 연동
푸시 알림 아이콘을 별도 설정하고 싶습니다.
푸시 알림에 이미지 첨부를 하고 싶습니다.