product-sdk-5

This React Native library exposes an API for creating new flows for integration into another React Native application.

Read on to learn how to run/develop on top of this library under the Development section.

To learn how to actually consume the SDK in another application, jump to the Using the SDK section.

Development

This section covers how to setup the SDK for local standalone development.

Installation

yarn install

Yarn (1.19+) is the preferred package manager, but npm install also works.

Running code quality checks

yarn verify

This is suitable for running in a CI suite as it will exit with a non-zero code if any check fails.

Integrating the SDK

This section covers how to install & use the SDK in a React Native app.

Setup

1. Add the library as a dependency to your React Native app:

npm i product-sdk-5

2. Add the required peer dependencies to your app

If a dependency required in the SDK contains native code and needs to be linked, these should also be installed in the host application. By default, only react & react-native and required in the host application.

3. Add a reference to the SDK font assets

This is only required if using custom fonts in the SDK.

For React Native v0.60+, create a react-native.config.js file in the host app if it doesn't already exist, and add the following:

// react-native.config.js
module.exports = {
  assets: ['./node_modules/product-sdk-5/app/assets/fonts/']
};

Or on React Native 0.59 or lower, add this to your package.json file:

"rnpm": {
  "assets": [
    "./node_modules/product-sdk-5/app/assets/fonts/"
  ]
}

Then run yarn react-native link to link up the font files in both native platforms.

Usage

The SDK can be imported and rendered inside any React component.

import { SDKModule } from 'product-sdk-5';

export const MyComponent = () => <SDKModule env={{ SDK_ENV: 'dev' }} />;

Troubleshooting

Most issues will surface during the integration phase, especially when integrating into older codebases. These are some known issues that may occur and the remedies for them.

Android: Native module "Name" tried to override "Name"

Check this file: android/app/src/main/java/com/prudential/pulse/MainApplication.java in the host application. Find this method:

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(new MainReactPackage(),
        new NamePackage(),
        new NamePackage(),
        ...etc

Simply delete any duplicate packages found in this list and re-build.

Android: "missing strip tool for ABI 'X86_64'" build warnings

You need to install an additional SDK module. Open Android Studio and go to: Settings > Appearance & Behaviour > System Settings > Android SDK. From here, open the SDK Tools tab and check the box for "NDK (Side by side)". Click Apply, then download the module. Running builds now should no longer display the warnings.

Android: "Unable to connect to adb daemon on port: 5037"

This may also be an issue preventing React Native from installing your local build into an Android simulator.

It's likely that the adb server's port is already occupied, probably by an old adb server that didn't close properly. Run the following to resolve this:

lsof -n -i4TCP:5037 | grep LISTEN
kill -9 <PID>

<PID> will be the 4/5 digit number shown in the first command. The run this to test that the server is running correctly: adb devices.

Red screen error after adding a new dependency to the SDK

Some dependencies, in particular ones with native code, must also be added into the host application, not just the SDK. If this isn't done, a red screen error abouit the module not found will pop up.

First, make sure the dependncy in the SDK is not included inside the dependencies field of package.json, it should be moved into both the peerDependencies and devDependencies sections. Then, install that dependancy into the host application. This should appear under dependencies of the host application package.json.

Commits failing or being rejected

The husky package is installed and will run the code quality checks for ESLint, TypeScript and unit tests whenever a commit is made. If any check fails, the commit will be rejected. The code quality issues that are printed in the output must be fixed before a commit will be accepted.