React Native SDK Setup

Prerequisites

You must satisfy the prerequisite for respective Android and iOS SDKs.
The versions of react and react-native supported are ‘17.0.1’ and ‘0.64.0’ respectively. Ensure that you use only these versions.
Follow the linked guidelines to set up a react-native project.

Integrating the SDK in your mobile application

Follow the steps below to successfully integrate the SDK.

Step 1

Create an .npmrc file in the project repository to access the rn-cards-sdk. Copy the following content to the .npmrc file created

Sample Code

1

@zeta-apollo:registry=https://npm-repo.zetaapps.in/

Code Copied

Step 2

Install the SDK using following command:

Sample Code

1

$ npm install @zeta-apollo/rn-cards-sdk

Code Copied

Platform Specific Setup

Perform the following steps to complete the platform specific setup for your application

Android

Step 1

Add the dependency on the private Maven Repo. This will help you to get access to all the native code for Cards SDK. Add the following code under the allProjects section of project level build.gradle.

Sample Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


maven {
    credentials  {
        username "******"
        password "******"
    }
    url 'https://apollo-sdk.zetaapps.in/repository/maven-releases/'
    authentication {
        basic(BasicAuthentication)
    }
}

Code Copied

You can get your username and password from App Center’s SDK details page.

Step 2

Enable data binding by adding the following line under the android section of app level build.gradle file.

Sample Code

1
2
3


dataBinding {
    enabled = true
}

Code Copied

Step 3

Exclude the Kotlin modules from packaging options. This can be done by adding the following code snippet to the android settings in app level build.gradle.

Sample Code

1
2
3


packagingOptions {
    exclude("META-INF/*.kotlin_module")
}

Code Copied

Step 4

Add following permissions to the AndroidManifest.xml file.

Sample Code

1
2
3


<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

Code Copied

Step 5

Enable multi-dex by adding the following line under defaultConfig in the app level build.gradle file.

Sample Code

1

multiDexEnabled true

Code Copied

Step 6

Add the assets, config, collections and fonts provided in the SDK integration doc or app-center in the android folder.

Step 7

Add ‘jcenter()’ to the repositories under project level build.gradle. This is needed by Facebook react native 0.64.0 itself.

Sample Code

1
2
3
4
5
6
7


allprojects {
    repositories {
    ……...
       jcenter()
    …….
    }
}

Code Copied

Step 8(Optional troubleshooting step)

In-case you face multi-dex issues, you may wish to tweak the memory settings a little. This can be done by adding following lines to gradle.properties file.

Sample Code

1

org.gradle.jvmargs=-Xmx4608m

Code Copied

iOS

Step 1

In the podfile, add the following snippet

Sample Code

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
source '[email protected]:zetaengg/iapollopubliccocoapodspecs.git'
source '[email protected]:CocoaPods/Specs.git'
 
platform :ios, '10.0'
 
target 'AppTarget' do
  config = use_native_modules!
  use_frameworks!
  pod 'Block-KVO', :git => 'https://github.com/Tricertops/Block-KVO', :branch => 'master'
 
  use_react_native!(:path => config["reactNativePath"])
  post_install do |installer|
   installer.pods_project.targets.each do |target|
     if target.name == "Mantle" || target.name == "ReactiveCocoa"
       puts "Switching off Assertions in Mantle & ReactiveCocoa"
       target.build_configurations.each do |config|
         config.build_settings['ENABLE_NS_ASSERTIONS'] = 'NO'
       end
     end
   end
 end
end

Code Copied

Step 2

Add the assets, config(supercardSdk.plist) and the local collection files for theme, templates & shopHook configs in the app target.

Step 3

run ‘pod install’ in ExampleApp/ios/ directory and then run ‘react-native run-ios’ in the root folder or build the project from xcode.

SDK initialisation

Initialise the cards SDK using the following code

Sample Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


import {ApolloCardsSdk} from '@zeta-apollo/rn-cards-sdk';

var cardsService = ApolloCardsSdk;
function initialCardsSdkSetup() {
    const IBXPLEXSANS_REGULAR_FONT_PATH = "fonts/IBMPlexSans-Regular.otf";
    const IBXPLEXSANS_MEDIUM_FONT_PATH = "fonts/IBMPlexSans-Medium.otf";
    const IBXPLEXSANS_SEMI_BOLD_FONT_PATH = "fonts/IBMPlexSans-SemiBold.otf";
    const IBXPLEXSANS_BOLD_FONT_PATH = "fonts/IBMPlexSans-Bold.otf";
    const OCRA_STD_FONT_PATH = "fonts/OCRAStd.otf";

    const fontMap = {
        "IBMPlexSans-Regular": IBXPLEXSANS_REGULAR_FONT_PATH,
        "IBMPlexSans-Medium": IBXPLEXSANS_MEDIUM_FONT_PATH,
        "IBMPlexSans-SemiBold": IBXPLEXSANS_SEMI_BOLD_FONT_PATH,
        "IBMPlexSans-Bold": IBXPLEXSANS_BOLD_FONT_PATH,
        "OCRAStd": OCRA_STD_FONT_PATH
    };

    var options = {
        "loggingEnabled": true,
        "secureStoreTitle": "Device Lock",
        "secureStoreSubtitle": "Please authenticate using device lock",
        "fontMap": fontMap,
        "useDoor": true
    };

    cardsService.initialize(options);
}

Code Copied

SDK Authentication & Setup

Authenticate and setup the SDK using the following piece of code

Sample Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import ApolloCardsSdk from '@zeta-apollo/rn-cards-sdk';

var cardsService = ApolloCardsSdk;
cardsService.authenticateSDK(JWT_TOKEN, ACCOUNT_HOLDER_ID);

try {
    var response = await cardsService.setupSDK();
} catch(e) {
    console.log(e);
}

Code Copied

Choose your product

Choose your product

React Native SDK Setup

Prerequisites

Integrating the SDK in your mobile application

Step 1

Step 2

Platform Specific Setup

Android

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8(Optional troubleshooting step)

iOS

Step 1

Step 2

Step 3

SDK initialisation

SDK Authentication & Setup

Was this article helpful?