# React Native

## Android

{% hint style="info" %}
본 가이드는 React Native 0.71.7 기준으로 작성되었습니다.

SDK가 지원하는 최소 버전은 Android API 19(Kitkat) 이상입니다.
{% endhint %}

### 플러그인 다운로드 

1\) 플러그인을 다운로드 합니다.

[**▶다운로드**](https://developers.fingerpush.com/app-push/sdk-down#react-native)

2\) 프로젝트 폴더와 같은 경로에 압축을 해제합니다.

![](https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2F2OQC7bj5G4JUAzdMiJVz%2Fimage1.png?alt=media\&token=85a7c808-cf6a-481d-af1b-f4208d376992)

### 플러그인 적용하기 

명령어를 실행하여 플러그인을 설치합니다. 

{% hint style="danger" %} <mark style="color:red;">fingerpush\_reactnative\_module 폴더를 상대 경로 참조하여 설치합니다.</mark>
{% endhint %}

```
react-native install ../fingerpush_reactnative_module
```

{% hint style="info" %}
react-native 0.69 이상 버전에서는 install 명령어가 삭제됐습니다.

버전이 0.69 이상인 경우, yarn 패키지 매니저를 이용하여 설치합니다.
{% endhint %}

{% code title="버전이 0.69 이상인 경우" %}

```
yarn add ../fingerpush_reactnative_module/
```

{% endcode %}

### FCM APP 생성

1\) Android 패키지 이름 입력 후 앱을 등록합니다.

![](https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2FNB0WgNijnd5Jx07Iw8Rz%2FReactNative_Android2.png?alt=media\&token=4e442f43-dbd4-4bae-9f5d-e44580b7a6dc)

2\) 'google-services.json' 파일 다운로드 후 프로젝트 앱 모듈 루트 디렉토리로 이동 시킵니다.

![](https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2FXiLK8sqKwy4RCuq3K5Xy%2FReactNative_Android3.png?alt=media\&token=8f854f02-f5b4-4ef1-96c0-54facce4f1d0)

3\) 플러그인을 사용하기 위해 build.gradle 파일을 수정합니다.

a. 프로젝트 레벨의 build.gradle 에 'com.google.gms:google-services' 라이브러리를을 추가합니다.

{% code title="<project>/build.gradle" %}

```gradle
buildscript {
    ...
    
    dependencies {l
        ...
        classpath 'com.google.gms:google-services:4.3.15'
    }
}
```

{% endcode %}

b. 앱 레벨의 build.gradle에 firebase-messaging, firebase-core, material 라이브러리를 추가합니다.

{% code title="<project>/<app-module>/build.gradle" %}

```gradle
ㄴ...
dependencies {
    ...
    implementation 'com.google.firebase:firebase-messaging:23.0.0'
    implementation 'com.google.firebase:firebase-core:18.0.3'
    implementation 'com.google.android.material:material:1.3.0'
}
apply plugin: 'com.google.gms.google-services'
```

{% endcode %}

4\) 프로젝트 AndroidManifest.xml 파일을 아래 스크린샷과 같이 입력합니다.

{% code title="AndroidManifest.xml" %}

```xml
<application
    ...
    <!-- Android 13 or later requires below code -->
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
    ...
    android:allowBackup="false"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name">
    
    ...
    <service android:name="com.fingerpush.IntentService"
        android:exported="false">
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
    </service>
    
</application>
```

{% endcode %}

### 핑거푸시 사용자콘솔 APP 생성&#x20;

1\) 핑거푸시 사용자 콘솔에서 '앱 등록' 버튼을 누른 뒤 앱을 생성합니다.

<figure><img src="https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2Fj7NMYkJ5YyFTf7OgSAlf%2F%EA%B7%B8%EB%A6%BC43.png?alt=media&#x26;token=42b92a00-6a92-4afa-804a-8358cd5a66fd" alt=""><figcaption></figcaption></figure>

2\) '앱 설정' 메뉴로 이동하면 App Key, App Secret을 확인할 수 있습니다.

<figure><img src="https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2FNF90iIPRAJkS1Ey3Am9z%2F%EA%B7%B8%EB%A6%BC35.png?alt=media&#x26;token=88918c90-5671-4219-be20-1915ceeaf982" alt=""><figcaption></figcaption></figure>

3\) 핑거푸시의 App Key, App Secret를 프로젝트의 시작 위치에 아래 사용한 함수와 같이 입력 후 저장합니다.

![](https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2FT3kphqhrLPjGoWvewZaa%2Fimage5-1024x607.png?alt=media\&token=da506d8f-eb3c-4951-b037-8d922387de67)

4\) 핑거푸시 사용자 콘솔의 앱 설정 화면에 FCM에서 발급된 '서버 키' 를 입력합니다.

<figure><img src="https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2F8KSQ0M3Lp8XCus25uFIx%2F%EA%B7%B8%EB%A6%BC34.png?alt=media&#x26;token=48dd7976-b09a-43d8-8bd0-2dd008b372ed" alt=""><figcaption></figcaption></figure>

## 권한 요청

안드로이드 13 이상 기기는 POST\_NOTIFICATIONS 권한을 필요로 합니다. (targetSdk 도 33 이상으로 설정 필요.)

프로젝트 MainActivity.java에 아래 코드를 입력합니다.

<pre class="language-java"><code class="lang-java"><strong>...
</strong><strong>import android.Manifest;
</strong>import android.os.Build;
import android.os.Bundle;

public class MainActivity extends ReactActivity {
  ...
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
      requestPermissions(new String[]{Manifest.permission.POST_NOTIFICATIONS}, 1000);
    }
  }
  ...
}
</code></pre>

### Android API Reference

Android API 는 아래 링크에서 확인 할 수 있습니다.

{% content-ref url="../api-reference/android" %}
[android](https://developers.fingerpush.com/app-push/api-reference/android)
{% endcontent-ref %}

## iOS

{% hint style="info" %}
본 가이드는 React Native 0.77 기준으로 작성되었습니다.

최소 버전 iOS 10 이상&#x20;
{% endhint %}

### 플러그인 다운로드

1\) 플러그인을 다운로드합니다.

[**▶다운로드**](https://developers.fingerpush.com/app-push/sdk-down#react-native)

2\) 프로젝트 폴더와 같은 경로에 압축을 해제합니다.

![](https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2F2OQC7bj5G4JUAzdMiJVz%2Fimage1.png?alt=media\&token=85a7c808-cf6a-481d-af1b-f4208d376992)

### 플러그인 적용하기&#x20;

1\) 명령어를 실행하여 플러그인을 설치합니다.&#x20;

{% hint style="danger" %} <mark style="color:red;">fingerpush\_reactnative\_module 폴더를 상대 경로 참조하여 설치합니다.</mark>
{% endhint %}

```
yarn add ../fingerpush_reactnative_module/
```

2\) 프로젝트 내 iOS 폴더에서 'pod install' 을 호출합니다.

```
cd ios
pod install
```

### AppDelegate.swift 파일 교체

1\) '생성한 프로젝트의 AppDelegate.swift' 파일을 \
압축파일 내 'example/ios/FingerpushExample/AppDelegate.swift' 로 교체합니다.

<figure><img src="https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2F1Bs9QtoTaYD2fdY2RxLh%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-02-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.35.58.png?alt=media&#x26;token=bf9f90e2-5889-40cf-a776-63371451328b" alt=""><figcaption></figcaption></figure>

### "ProjectName-Bridging-Header.h" 추가하기

1\) [iOS SDK 매뉴얼 > “ProjectName-Bridging-Header.h” 추가하기](https://developers.fingerpush.com/app-push/ios#projectname-bridging-header.h)를 참고하여 파일을 추가합니다.\
\
2\) 'ProjectName-Bridging-Header.h'에 #import \<fingerpush/Fingerpush.h>를 추가합니다.\
(압축파일 내 'example/ios/FingerPushExample-Bridging-Header.h' 참고)

<figure><img src="https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2FwR5h9cq1zgiQDaqwRQFs%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-02-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.48.12.png?alt=media&#x26;token=4a678521-58be-43a4-8245-f75a3a0dc851" alt=""><figcaption></figcaption></figure>

### 핑거푸시 사용자 콘솔APP 생성&#x20;

1\) 핑거푸시 사용자 콘솔에서 '앱 등록' 버튼을 누른 뒤 앱을 생성합니다.

<figure><img src="https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2Fj7NMYkJ5YyFTf7OgSAlf%2F%EA%B7%B8%EB%A6%BC43.png?alt=media&#x26;token=42b92a00-6a92-4afa-804a-8358cd5a66fd" alt=""><figcaption></figcaption></figure>

2\) '앱 설정' 메뉴로 이동하면 App Key, App Secret을 확인할 수 있습니다.

<figure><img src="https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2FNF90iIPRAJkS1Ey3Am9z%2F%EA%B7%B8%EB%A6%BC35.png?alt=media&#x26;token=88918c90-5671-4219-be20-1915ceeaf982" alt=""><figcaption></figcaption></figure>

3\) 핑거푸시의 App Key, App Secret를 프로젝트의 시작 위치에 아래 사용한 함수와 같이 입력 후 저장합니다.

![](https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2Fh8TaQioYU6aEyT6pikdY%2Fimage5.png?alt=media\&token=ac6719c9-e446-42b4-8347-eb3a3e8d6055)

### 푸시 기능 추가

1\) Signing & Capabilities에서 Bundle Identifier와 Provisioning Profile을 수정합니다.

2\) Capability 추가 선택 -> Background Modes의 Remote notifications, Push Notifications 추가합니다.

![](https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2FCfwX0WX6JvWzTVevYdXp%2FReactNative_iOS_4.png?alt=media\&token=87255de3-2085-4f39-b6af-1d1f5bc9417a)

### iOS API  Reference&#x20;

iOS API 는 아래 링크에서 확인 할 수 있습니다.

{% content-ref url="../api-reference/ios" %}
[ios](https://developers.fingerpush.com/app-push/api-reference/ios)
{% endcontent-ref %}

## 예제 파일 적용 및 푸시 메시지 확인

1\) 프로젝트 폴더 내의 App.tsx 파일을 예제 파일과 같이 변경합니다.

<figure><img src="https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2FsS9V0AeEigE5Nv2Pk8hN%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-10-01%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.04.06.png?alt=media&#x26;token=17313e64-73ed-4e93-bd6f-6199e8b9bf1d" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
예제 파일은 압축파일 내 'example > App.tsx' 에서 확인하실 수 있습니다.
{% endhint %}

<figure><img src="https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2F6jS1XMA8XH1xqUFP25oe%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-10-01%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.30.04.png?alt=media&#x26;token=a9ce84bc-70d8-466b-89f8-fdfcc7900b57" alt=""><figcaption></figcaption></figure>

2\) setDevice 함수를 통해 앱을 핑거푸시 서버에 등록합니다.

![](https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2FBZCq45aqJm5cRw7PDA9t%2FReactNative_iOS_10.png?alt=media\&token=e3a58aac-0429-462b-ae70-1cb38c6b9d48)

3\)디바이스가 정상적으로 등록됐다면 핑거푸시 사이트에서 확인 가능하고, 푸시 메시지를 수신할 수 있습니다.

<figure><img src="https://1606198054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff5XCUiUhwc0T57hW21TH%2Fuploads%2FpxhZEY2jXJsxkunW4BJN%2F%EA%B7%B8%EB%A6%BC42.png?alt=media&#x26;token=ce449dbe-4631-41ae-8eb7-c16ed3b162bb" alt=""><figcaption></figcaption></figure>