> For the complete documentation index, see [llms.txt](https://developers.fingerpush.com/app-push/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.fingerpush.com/app-push/sdk-manual/react-native.md).

# React Native

## Android

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

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

### 플러그인 다운로드 

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

[**▶다운로드**](/app-push/sdk-manual/sdk-down.md#react-native)

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

![](/files/P5sjzSnxo2MGAFB9qGQ2)

### 플러그인 적용하기 

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

{% 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 패키지 이름 입력 후 앱을 등록합니다.

![](/files/Mb3breTqSU35e7uIeQ3H)

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

![](/files/qpNrCWaHlY1USIewHGsg)

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="/files/2tjl5Yj4dxJ27bmkvpF1" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/rvN4XjAmm8xiMTrr7d4p" alt=""><figcaption></figcaption></figure>

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

![](/files/oL77bi0TR9oGQpGTHvnL)

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

<figure><img src="/files/ohYFnNYHF7OmhCmnXaHW" 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="/pages/fx2bsLtt8TXjECxe6mfO" %}
[Android API Reference](/app-push/api-reference/android.md)
{% endcontent-ref %}

## iOS

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

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

### 플러그인 다운로드

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

[**▶다운로드**](/app-push/sdk-manual/sdk-down.md#react-native)

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

![](/files/P5sjzSnxo2MGAFB9qGQ2)

### 플러그인 적용하기&#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="/files/uEaxLn8YVQyesuBGYuQF" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/0jgEBHMHgIqiNyZ5lK1p" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/2tjl5Yj4dxJ27bmkvpF1" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/rvN4XjAmm8xiMTrr7d4p" alt=""><figcaption></figcaption></figure>

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

![](/files/iOmUIC8cxDTF7JgspY5O)

### 푸시 기능 추가

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

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

![](/files/fjwiCINTzs8qqMYNJZEW)

### iOS API  Reference&#x20;

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

{% content-ref url="/pages/waHVao92YorJZvOfCgIz" %}
[iOS API Reference](/app-push/api-reference/ios.md)
{% endcontent-ref %}

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

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

<figure><img src="/files/WNHvsTgN1FyAnrYEFBtD" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/b73Y9OGY0ILQd3MxNWxm" alt=""><figcaption></figcaption></figure>

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

![](/files/0UdKHnc5ukmATMGvkwKF)

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

<figure><img src="/files/gU2SasXmzwjDbk0LmRfi" alt=""><figcaption></figcaption></figure>