Portkey React Native SDK

Read this first

This readme.md doc is presented for pure react-native project. If you are using expo, please refer to expo-sdk-doc.

Don't know whether you are an expo project user? If one of the following conditions is met, you are an expo project user:

1. you created your project with expo-cli-like command, such as expo init my-project or npx create-expo-app XXX
2. you can find .expo dictionary in your project root path
3. you can find those expo's commands in your package.json file that look like:

  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  ...

Installation

Note: react-native's version should be less than v0.73.0 !

Step 1: Install npm package

npm install @portkey/react-native-sdk --save
# or
yarn add @portkey/react-native-sdk

Step 2: Configure your project

1. Configure the expo autolinking plugin

   //in android/settings.gradle file
   dependencyResolutionManagement {
       repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS)
       repositories {
           google()
           mavenCentral()
           maven { url "https://jitpack.io" }
           // add this maven path for expo-camera dependencies
           maven {
               url "../node_modules/expo-camera/android/maven"
           }
       }
   }
   
   // add the follow code for autolink
   apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle");
   useExpoModules()

   # in iOS Podfile, add the follow code
   
   platform :ios, '13.0'
   
   require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
   
   use_expo_modules!
   post_integrate do |installer|
     begin
       expo_patch_react_imports!(installer)
     rescue => e
       Pod::UI.warn e
     end
   end

2. Create .env file

   In order to use Google login, You need to create an .env file in the same directory as package.json, which must contain GOOGLE_WEB_CLIENT_ID, GOOGLE_IOS_CLIENT_ID and GOOGLE_ANDROID_CLIENT_ID.

   See Configure Google Login For Portkey SDK for details.

   # .env file like this
   GOOGLE_WEB_CLIENT_ID = "your google web client id"
   GOOGLE_IOS_CLIENT_ID = "your google ios client id"
   GOOGLE_ANDROID_CLIENT_ID = "your google android client id"

3. extends tsconfig.json

   In your tsconfig.json, add "extends" key-value.

   {
     "extends": "@portkey/react-native-sdk/tsconfig.json",
     "compilerOptions": {
       ...
     }
   }

   if you already extends other tsconfig.json, you can config like this:

   {
     "compilerOptions": {
         // add this code
         "types": ["reflect-metadata"],
         "experimentalDecorators": true,
         "emitDecoratorMetadata": true,
     }
   
   }

Step 3: Init

// Please import the following statement in your entry file
import '@portkey/react-native-sdk';

Note: We use autolink, you don't need to configure Android/iOS dependencies. But you need to recompile your Android/iOS project so that the autolink takes effect.

Now, all configuration is complete and you can use the portkey service freely.

API Usage

import { portkey } from '@portkey/react-native-sdk';
// get walletInfo
const walletInfo = await portkey.getWalletInfo();
// open assets dashboard
portkey.openAssetsDashboard();

Function Introduction

import { portkey } from '@portkey/react-native-sdk';

// Open login page and return UnlockedWallet object after login
function login(): Promise<UnlockedWallet | undefined>;

// Open assets dashboard
function openAssetsDashboard();

// Open guardians manager page
function guardiansManager();

// Open settings manager page
function settingsManager();

// Open Scan QRCode page
function scanQRCodeManager();

// Open payment security manager page
function paymentSecurityManager();

// Unlock wallet and return UnlockedWallet object
function unlockWallet(): Promise<UnlockedWallet | undefined>;

// Call contract method
function callCaContractMethod(props: CallCaMethodProps): Promise<BaseMethodResult>;

// Get wallet info
function getWalletInfo(): Promise<UnlockedWallet>;

// Get wallet state
function getWalletState(): Promise<WalletState>();

// Lock wallet
function lockWallet(): Promise<boolean>();

// Exit wallet
function exitWallet(): Promise<boolean>();

Feel free to open an issue or contact us if you have any questions.

Q&A

Q: Why does Google login always prompt "login fail"?

A: Make sure the applicationId, keystore, .env file correspond correctly.

Q: problem occurred evaluating project ':portkey_react-native-sdk'. > Project with path ':expo-modules-core' could not be found in project ':portkey_react-native-sdk'.

A: make sure you have set the expo autolink config in android/settings.gradle file.