# Installation

## Requirements

* React Native version <mark style="color:blue;">`0.71.8`</mark> or higher

## Installation

Here is how to install the Wepin React Native SDK.

### Install Wepin

The Wepin React Native SDK can be installed via `npm` package.

{% 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
```

### Additional Installation (version <mark style="color:blue;">`0.0.7-alpha`</mark> or higher)

To use the provider feature in a React Native environment, you need to install the additional package and initialize it as follows.

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

or

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

Additionally, you need to add the <mark style="color:blue;">`rn-nodeify`</mark> command to the <mark style="color:blue;">`postinstall`</mark> script in the <mark style="color:blue;">`package.json`</mark> file as follows.

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

After running the <mark style="color:blue;">`postinstall`</mark> script, you need to import the generated <mark style="color:blue;">`shim.js`</mark> file into the root file of your application.

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

## For iOS

### Modify AppDelegate.mm

You need to add the following code to <mark style="color:blue;">`AppDelegate.mm`</mark>.

```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];
}
```

### Modify Info file

In Xcode, you need to register URL Schemes in the Info file.

Select the Info tab in the project. Click on <mark style="color:blue;">`+`</mark> in <mark style="color:blue;">`URL Types`</mark> to add Identifier and URL Schemes.

The identifier is your <mark style="color:blue;">`App Bundle ID`</mark>. The value of URL Schemes should be your <mark style="color:blue;">**`wepin. + wepin app id`**</mark>.

Correct usage of the deep link scheme value is essential for utilizing Wepin widget functionality. Please apply the new scheme value for the proper operation of the Wepin widget.

{% hint style="danger" %}
Change Notice: **Deep Link Scheme Value Changed** (from SDK Version `0.0.20-alpha` and above)

For SDK Version `0.0.20` and above, please note that the structure of the deep link scheme value has been updated.

* Before Change: `bundle id` + '.wepin'
* After Change:  'wepin.' + `wepin app id`

> Correct usage of the deep link scheme value is essential for utilizing Wepin widget functionality. Please apply the new scheme value for the proper operation of the Wepin widget.
> {% endhint %}

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

### Add Permission (from `v0.0.20-alpha` and above.)

To use this SDK, camera access permission is required. The camera functionality is essential for recognizing addresses in QR code format. \[Refer to: [react-native-permission](https://github.com/zoontek/react-native-permissions)]

#### Modify Podfile

To set permissions, you need to configure the setup script in the 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'
```

You need to add camera permission to `setup_permission`.

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

#### Modify Info.plist

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

## For Android

### Modify AndroidManifest

To use Wepin in your app, you need to modify the AndroidManifest.xml file of your app.

You need to add an intent filter for the Wepin activity in your app's AndroidManifest.xml. The schema value you add should be <mark style="color:blue;">**`wepin. + wepin app id`**</mark>.

{% hint style="danger" %}
Change Notice: **Deep Link Scheme Value Changed** (from SDK Version `0.0.20-alpha` and above)

For SDK Version `0.0.20` and above, please note that the structure of the deep link scheme value has been updated.

* Before Change: `pakage name` + '.wepin'
* After Change:  'wepin.' + `wepin app id`

> Correct usage of the deep link scheme value is essential for utilizing Wepin widget functionality. Please apply the new scheme value for the proper operation of the Wepin widget.
> {% 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>
```

## Release

#### Add Permission (from `v0.0.20-alpha` and above.)

To use this SDK, camera access permission is required. The camera functionality is essential for recognizing addresses in QR code format. \[Refer to: [react-native-permission](https://github.com/zoontek/react-native-permissions)]

To use Wepin, add the following permissions to the main Activity of your app.

```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="${PACKAGE_NAME}.wepin" /> 
            <!-- package name of your android app + '.wepin' -->
        </intent-filter>
      </activity>
```

## Release&#x20;

The released package versions can be found on the GitHub repository below.

{% 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/en/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.