# 설치

## 요구사항

* React Native version 0.71.8 이상

## 설치하기

Wepin React Native SDK 를 설치하는 방법을 설명합니다.

### Wepin 설치하기

Wepin React Native SDK는 npm 패키지로 설치 가능합니다.  

{% tabs %}
{% tab title="npm" %}

```bash
npm install @wepin/react-native-sdk
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn add @wepin/react-native-sdk
```

{% endtab %}
{% endtabs %}

### peerDependencies

```bash
npm install react-native-device-info
npm install react-native-inappbrowser-reborn
npm install react-native-webview
npm install react-native-encrypted-storage
npm install react-native-permissions
npm install @react-native-clipboard/clipboard

# for ios
cd ios
pod install
```

or

```bash
yarn add react-native-device-info
yarn add react-native-inappbrowser-reborn
yarn add react-native-webview
yarn add react-native-encrypted-storage
yarn add react-native-permissions
yarn add @react-native-clipboard/clipboard

# for ios
cd ios 
pod install
```

### 추가   설치 (version '0.0.7-alpha' and above)

프로바이더 기능을 React Native 환경에서 사용하기 위해서, 아래와 같이 추가 package를 install 하고 초기화 해야 합니다.

```sh
npm install --save-dev rn-nodeify
```

or

```sh
yarn add --dev rn-nodeify
```

추가로 아래와 같이`package.json` 파일의 `postinstall` 스크립트에 <mark style="color:blue;">`rn-nodeify`</mark> 커맨드를 추가해야 합니다.&#x20;

```json
{
  "scripts": {
        ...,
  	"postinstall": "rn-nodeify --install fs,crypto,https,http,stream,path,zlib,assert --hack",
  	...
  }
 }
```

`postinstall` 스크립트를 실행한 이후에, 생성된 <mark style="color:blue;">`shim.js`</mark> 파일을 어플리케이션의 루트 파일에 import 해야 합니다.&#x20;

```javascript
import './shim'
```

## iOS 인 경우

### AppDelegate.mm 수정하기

아래와 같이 <mark style="color:blue;">`AppDelegate.mm`</mark> 에 추가해야 합니다.&#x20;

```objectivec
#import <React/RCTLinkingManager.h>

...

// above @end
- (BOOL)application:(UIApplication *)application
  openURL:(nonnull NSURL *)url options:(nonnull NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options: options];
}
```

### Info 수정하기

Xcode에서 앱의 Info에 URL Schemes를 등록해야 합니다.&#x20;

Project에서 Info 탭을 선택합니다. <mark style="color:blue;">`URL Types`</mark> 에 <mark style="color:blue;">`+`</mark>  을 클릭해서 Identifier와 URL Schemes 를 추가 합니다. **Identifier는 앱의 Bundle ID** 입니다. **URL Schemes의 값은&#x20;**<mark style="color:blue;">**`wepin. + wepin app id`**</mark> 로 해야 합니다.&#x20;

{% hint style="danger" %}
변경  사항 안내: **딥링크 스킴값 변경** (SDK Version 0.0.20-alpha이상부터)

SDK 버전 0.0.20 이상을 사용할  경우, 딥링크 스킴 값의 구조가 업데이트 되었음을 알려드립니다.

* 변경  전: `bundle id` + '.wepin'
* 변경  후:  'wepin.' + `wepin app id`

> Wepin 위젯 기능 사용을 위해 올바른 딥링크 스킴값 사용이 필수적입니다. Wepin 위젯의 정확한 동작을 위해 새로운 스킴 값을 적용해주시기 바랍니다.
> {% endhint %}

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

### 퍼미션 추가하기(v0.0.20-alpha 이상 부터)

해당 SDK를 사용하기 위해서는 카메라 접근 권한이 필요합니다. 카메라 기능은 QR코드 형식의 주소를 인식하는데 필수적입니다. \[참고: [react-native-permission](https://github.com/zoontek/react-native-permissions)]

#### Podfile 수정하기

퍼미션을 설정하기 위해서 Podfile에서 설정 스크립트를 세팅해줘야 합니다.

```diff
# with react-native >= 0.72
- # Resolve react_native_pods.rb with node to allow for hoisting
- require Pod::Executable.execute_command('node', ['-p',
-   'require.resolve(
-     "react-native/scripts/react_native_pods.rb",
-     {paths: [process.argv[1]]},
-   )', __dir__]).strip
+ def node_require(script)
+   # Resolve script with node to allow for hoisting
+   require Pod::Executable.execute_command('node', ['-p',
+     "require.resolve(
+       '#{script}',
+       {paths: [process.argv[1]]},
+     )", __dir__]).strip
+ end
+ node_require('react-native/scripts/react_native_pods.rb')
+ node_require('react-native-permissions/scripts/setup.rb')
```

```diff
# with react-native < 0.72
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+ require_relative '../node_modules/react-native-permissions/scripts/setup'
```

카메라 권한을  `setup_permission`에 추가해야  합니다.

```sh
# …
platform :ios, min_ios_version_supported
prepare_react_native_project!
# ⬇️ uncomment wanted permissions
setup_permissions([
  'Camera',
])
# …
```

`pod install` 을실행 하여 설정을 업데이트 합니다.

#### Info.plist파일 수정하기

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <!-- 🚨 Keep only the permissions used in your app 🚨 -->
  <key>NSCameraUsageDescription</key>
  <string>YOUR TEXT</string>
  <!-- … -->
</dict>
</plist>
```

## Android 인 경우&#x20;

### AndroidManifest 수정하기&#x20;

#### 위핀 Activity의 인텐트 필터 추가

위핀을 사용하고자 하는 앱의 AndroidManifest.xml을 수정해야 합니다.

위핀 Activity의 인텐트 필터를 앱의 AndroidManifest.xml 에 추가해야 합니다. 이 때 추가하는 스키마 값은 <mark style="color:blue;">**`wepin. + wepin app id`**</mark> 로 추가해야 합니다.

{% hint style="danger" %}
변경  사항 안내: **딥링크 스킴값 변경** (SDK Version 0.0.20-alpha이상부터)

SDK 버전 0.0.20 이상을 사용할  경우, 딥링크 스킴 값의 구조가 업데이트 되었음을 알려드립니다.

* 변경  전: `pakage name` + '.wepin'
* 변경  후:  'wepin.' + `wepin app id`

> Wepin 위젯 기능 사용을 위해 올바른 딥링크 스킴값 사용이 필수적입니다. Wepin 위젯의 정확한 동작을 위해 새로운 스킴 값을 적용해주시기 바랍니다.
> {% endhint %}

```xml
<activity
	android:name=".MainActivity" 
	....
>
	....
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="wepin.${wepin appId}" /> 
            <!-- 'wepin' + wepin app id -->
        </intent-filter>
      </activity>
```

#### 퍼미션 추가하기(v0.0.20-alpha 이상 부터)

해당 SDK를 사용하기 위해서는 카메라 접근 권한이 필요합니다. 카메라 기능은 QR코드 형식의 주소를 인식하는데 필수적입니다. \[참고: [react-native-permission](https://github.com/zoontek/react-native-permissions)]

위핀을 사용하고자 하는 앱의  메인 Activity에 아래와 같이 퍼미션을 추가합니다.&#x20;

```xml
<uses-permission android:name="android.permission.CAMERA" />
```

## 릴리즈&#x20;

릴리즈된 패키지 버전은 아래 깃허브에서 확인 가능합니다.

{% embed url="<https://github.com/WepinWallet/wepin-react-native-sdk>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wepin.io/deprecated/react-native-sdk/installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.