React Native SDK

Installation

Add the react-native-unit-components and the react-native-webview dependencies to your project:

Using npm:

$ npm install --save react-native-unit-components react-native-webview

Using yarn:

$ yarn add react-native-unit-components react-native-webview

Usage

Initialize Unit SDK

Call UnitSDK.init in your root component with the required environment and your source. By doing so you will also helps us improve the app performance.

The UNEnvironment enum should be used.

enum UNEnvironment {
  sandbox,
  production
}

Input:

Name	Type	Required	Description
env	UNEnvironment	YES	Unit environment.
theme	string	NO	A URL that specifies the UI configuration.
language	string	NO	A URL that specifies the language configuration.
fonts	UNFonts	NO	UNFonts object that specifies your custom fonts.
webVersioningStrategy	UNWebVersioningStrategy	NO	Web SDK version management strategy.

Example:

import React, { useEffect } from 'react';
import { UnitSDK, UNEnvironment } from 'react-native-unit-components';

const THEME = 'A URL that specifies the UI configuration';
const LANGUAGE = 'A URL that specifies the language configuration.';

export default function YourRootComponent() {
    useEffect(() => {
        UnitSDK.init(UNEnvironment.production, THEME, LANGUAGE, CUSTOM_FONTS);
    }, []);
}

Setup Fonts:

The UNFonts object is a dictionary-like structure where each key is a font family, and each font family can have multiple variants, currently distinguished by weight.

File Naming Convention

Your font file must adhere to the naming convention: <family-name>-<font-weight>. This standardization is critical for the SDK to correctly identify and utilize the fonts.

Integrating Custom Fonts into a React Native Project:

Add and link your font files to your React Native project, following the normal procedures for asset inclusion. You can follow these step-by-step instructions:

1. Adding Font Files

First, add your custom font files to a directory within your project. Typically, this would be an assets/fonts/ directory.

2. Configure Asset Inclusion

Create Config File: If it does not already exist, create a configuration file at the root directory of your project. Name this file react-native.config.js.
Add Configuration: Open the react-native.config.js file and add the following lines within module.exports:
```
module.exports = {
    // Your existing configuration here

    assets: ['./assets/fonts/'],
};
```

3. Linking the Assets

Now, you need to link these assets to your project. This process will vary based on your React Native version.

For React Native Version <= 0.69 Run one of the following commands:
```
npx react-native link
```
or
```
yarn react-native link
```
For React Native Version > 0.69 Run one of the following commands:
```
npx react-native-asset
```

4. Verification

iOS: Open your info.plist file and verify that the font files have been added under the key UIAppFonts.
Android: Navigate to your Android assets directory and ensure that a new font file has been created.

Define the UNFonts Object

After integrating your fonts, the next step is to define the UNFonts object. Below is the schema for UNFonts and its nested types:

export type UNFonts = {
    [fontFamily: string]: UNFontData[],
};

export type UNFontData = {
    fontWeight: FontWeight,
    sources: UNFontSource[],
};

export type UNFontSource = {
    fileName: string,
    assetDirRelativePath: string,
    format?: string, // Optional, might be effective when fallbacks are used
};

Example

Here's a simple example to illustrate how you might define a UNFonts object:

const CustomFonts: UNFonts = {
    Helvetica: [
        {
            fontWeight: FontWeight.Regular,
            sources: [
                { fileName: 'Helvetica-Regular.ttf', assetDirRelativePath: 'fonts/' },
            ],
        },
        {
            fontWeight: FontWeight.Bold,
            sources: [
                { fileName: 'Helvetica-Bold.ttf', assetDirRelativePath: 'fonts/' },
            ],
        },
    ],
    Arial: [
        {
            fontWeight: FontWeight.Regular,
            sources: [
                { fileName: 'Arial-Regular.ttf', assetDirRelativePath: 'fonts/' },
            ],
        },
    ],
};

Web SDK Versioning Strategy Guide

It's essential to understand that this SDK utilizes the web SDK views for certain components.

To give you optimal flexibility in managing the Web SDK versions, we've devised a strategy that allows you to either keep your SDK up-to-date or fixate on a particular version. To set your preferred versioning approach, using the type UNWebVersioningStrategy. Below are the options you can select from:

Exact Versioning -

type: UNVersioningStrategyType.exact;
major: number;
minor: number;
patch: number;

This method allows you to lock onto a specific version that suits your needs.

Up to Next Minor -

type: UNVersioningStrategyType.upToNextMinor;
major: number;
minor: number;

This is the default and recommended approach. While it keeps your SDK updated with minor patches, a manual update is needed for minor version changes.

Up to Next Major -

type: UNVersioningStrategyType.upToNextMajor;
major: number;

With this strategy, your SDK will automatically update until there's a major version change.

Latest -

type: UNVersioningStrategyType.latest;

This strategy will always keep your SDK updated with the latest version.

For a comprehensive understanding, refer to our Web SDK - Versioning Guide.

const myWebSdkStrategy: UNWebVersioningStrategy = {
    type: UNVersioningStrategyType.upToNextMinor,
    major: 1,
    minor: 2,
};

For the latest RN SDK, the webVersioningStrategy is upToNextMinor(major: 1, minor: 6).

Bottom Sheet Component

The UNBottomSheetComponent is a View that our SDK controls in order to show menus and forms in your application. It is mandatory to have one UNBottomSheetComponent when our components are visible.

The UNBottomSheetComponent has an absolute position and should be able to take the full width and the height of the screen. We recommend to place the UNBottomSheetComponent in your root component of your application.

The structure of your root component might look as follows:

import React, { useEffect } from 'react';
import { UNBottomSheetComponent } from 'react-native-unit-components';

export default function YourRootComponent() {
    return (
        <>
            <YourComponents />
            <UNBottomSheetComponent />
        </>
    );
}

Security

UNSecuritySettings is an interface. Currently, the settings consist just the snapshotProtectionStrategy.

You can define your custom security settings using it. Then, apply these settings by passing them as a parameter to the SDK's init function.

Snapshot Protection

UNSnapshotProtectionStrategy defines how to protect your app's content from being captured in snapshots. The default strategy is FullProtection. The enum offers three strategies:

FullProtection - applies protection to all screens within the application.
None - no protection applied (likely used if you implement your own protection).

Example:

const securitySettings: UNSecuritySettings = {
    snapshotProtectionStrategy: UNSnapshotProtectionStrategy.FullProtection,
};

UnitSDK.init(
    env,
    THEME,
    undefined,
    UNIT_FONTS,
    webVersioningStrategy,
    securitySettings
);

Error Handling

By using unitOnLoad callback you can get a result of type UNOnLoadResponse for the requested component. OnError - you will get an enum UNError that consist of several cases.

UNError:

fields	Description
errors: UNErrorData[]	Report UNError on errors that happen in loading time

UNErrorData:

Name	Type	Description
status	String	A Unit-specific code, uniquely identifying the error type
title	String?	The title of the error type
detail	String?	Additional information about the error.
details	String?	Additional information about the error.
meta	{ supportId: String }?	meta.supportId unique error identifier to be used for further investigation

Note: An "error object" MUST contain a title and the HTTP status code members.

Example:

    import { UNCardComponent, UNCardData, UNOnLoadResponse } from 'react-native-unit-components';
    ....
    const handleCardOnLoad = (response: UNOnLoadResponse<UNCardData>) => {
      if ('errors' in response) {
        console.error('ERROR unitOnLoad: ', response.errors);
        return;
      }
      if ('data' in response) {
        const cardData: UNCardData = response.data;
        console.log('Success, data:', cardData)
        return;
      }
      return;
    }
    ....
    return (
      ...
      <UNCardComponent
        cardId={'632197'}
        customerToken={''}
        onLoad={handleCardOnLoad}
      />
      ...
    )

Components working together

Unit components within the same app can effectively communicate with each other. They can automatically exchange messages and trigger events to update relevant data in other components.

For instance, the Payment components and Activity components can work together such that, after a payment has been processed, the new transactions are automatically displayed on the Activity component.

Similarly, the Payment components and Account components can communicate such that, after a payment has been made, the account balance is updated on the Account component.

In some cases, a component may need to be updated in response to an event that is triggered by another component.

For example, if a customer has multiple accounts, the app may have an Account component and an Activity component that displays the activity of a selected account.

import React from 'react';
import { View } from 'react-native';
import { UNAccountComponent, UNActivityComponent } from 'react-native-unit-components';

export default function YourComponent() {
    const [activityAccountId, setActivityAccountId] = useState("475891")

    return (
        <View>
            <UNAccountComponent
                customerToken={/*Customer token here*/}
                accountId={"475891"}
                onAccountChanged={(account) => {
                  console.log("account changed to", account)
                  setActivityAccountId(account.id)
                }}
            />

          <UNActivityComponent
                customerToken={/*Customer token here*/}
                accountId={activityAccountId}
          />
        </View>
    )
}

React Native SDK

Installation​

Usage​

Initialize Unit SDK​

Input:​

Example:​

Setup Fonts:​

File Naming Convention​

Integrating Custom Fonts into a React Native Project:​

1. Adding Font Files​

2. Configure Asset Inclusion​

3. Linking the Assets​

4. Verification​

Define the UNFonts Object​

Example​

Web SDK Versioning Strategy Guide​

Bottom Sheet Component​

The structure of your root component might look as follows:​

Security​

Snapshot Protection​

Example:​

Error Handling​

UNError:​

UNErrorData:​

Example:​

Components working together​

Installation

Usage

Initialize Unit SDK

Input:

Example:

Setup Fonts:

File Naming Convention

Integrating Custom Fonts into a React Native Project:

1. Adding Font Files

2. Configure Asset Inclusion

3. Linking the Assets

4. Verification

Define the UNFonts Object

Example

Web SDK Versioning Strategy Guide

Bottom Sheet Component

The structure of your root component might look as follows:

Security

Snapshot Protection

Example:

Error Handling

UNError:

UNErrorData:

Example:

Components working together