Installation

Requirements

• React Native version 0.71.8 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.

npm

npm install @wepin/react-native-sdk

yarn

yarn add @wepin/react-native-sdk

peerDependencies

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

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 0.0.7-alpha or higher)

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

npm install --save-dev rn-nodeify

or

yarn add --dev rn-nodeify

Additionally, you need to add the rn-nodeify command to the postinstall script in the package.json file as follows.

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

After running the postinstall script, you need to import the generated shim.js file into the root file of your application.

import './shim'

For iOS

Modify AppDelegate.mm

You need to add the following code to AppDelegate.mm.

#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 + in URL Types to add Identifier and URL Schemes.

The identifier is your App Bundle ID. The value of URL Schemes should be your 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.

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.

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]

Modify Podfile

To set permissions, you need to configure the setup script in the Podfile.

# 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')

# 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.

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

Modify Info.plist

<?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>

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 wepin. + wepin app id.

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.

<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]

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

<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

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

GitHub - WepinWallet/wepin-react-native-sdk: Wepin React Native SDK for Android OS and iOSGitHub