> For the complete documentation index, see [llms.txt](https://docs.wepin.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wepin.io/deprecated/react-native-sdk/installation.md).

# 설치

## 요구사항

* 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>" %}