Development Guide

This guide is intended for developers who wish to contribute to the iOS or Android RN bridges or improve JavaScript code in react-native-zendrive.

Prerequisites

For JavaScript contributions, Typescript knowledge is required. For iOS contributions, knowledge of Swift is required, and for Android contributions, knowledge of Kotlin is required.

Structure

• iOS sources reside in ios directory.

• Android sources reside in android directory.

• Typescript sources reside in src directory.

• Example app resides in example directory.

Setup

nvm is used for managing node versions. Project contains .nvmrc file at root level and required node version is in that file. It is recommended to use .nvm and install the version as per .nvmrc.

After installing nvm run the following command:

nvm use

Install yarn and typescript with the following command at global level:

npm install -g yarn typescript

In the root directory of the project, run the following command to install all dependencies:

yarn

Additionally install swiftlint, cocoapods and ktlint for supportive tooling in iOS and Android respectively.

Run the React Packager in the Example

If setup succeeds, you should be able to run the RN packager locally with the following commands:

cd example

yarn start

Setup SDK Key

Before running the application on device/emulator ensure that the SDK key is set up. Go to example/SDKKey.ts and add your SDK key in that file.

Running Locally on iOS

Ensure that you have started react packager with as mentioned above. Open another terminal window and follow these commands

cd example && cd ios

pod install

open example.xcworkspace

Select example and run the app in the simulator.

Running Locally on Android

Ensure that you have started react packager with as mentioned above. Open another terminal window and follow these commands

cd example && cd android

sh gradlew installDebug

or via Android Studio

• import example/android project into Android

• Run the module app on the emulator

Package scripts

preinstall

This script ensures that example directory is built during the package installation. It does a check to see if example directory exists, if so, builds example; otherwise its a no-op

test

Runs tests in __tests__ directory.

typescript

Compiles typescript files, according to configuration in tsconfig.json in the root level directory.

lint

Runs lint check on entire project, eslint for ts and js files, ktlint for Android and swiftlint for Swift files.

release-dry-run

Simulates a dry run for release. See release-it package for more details.

release

Release the package according to configuration in release-it.json

example

Installs packages for example app.

guides

Generates static site for guides in __guides__ directory.

docs

Generates static site for typescript documentation in __docs__ directory.

prepare

Used during npm packing and publishing phase. It prepares our package for npm distribution.

Release Process

We use release-it for automated releases to gitlab tagging and producing a change log. For npm we publish it manually.

To use release-it you need to have .env.sh and .release-it.json files in the root directory of the project.

.env.sh is a simple env file with environment variables. To work with gitlab you need to have access token with write access to the repository. Here is a sample content for .env.sh file.

export GITLAB_TOKEN=<your-gitlab-token>

.release-it.json is a configuration file for release. It specifies the required integrations.

Release Process Script

{
  "hooks": {
    "before:init": ["npm run lint"]
  },
  "git": {
    "commitMessage": "chore: release %s",
    "tagName": "v%s",
    "requireCleanWorkingDir": true
  },
  "npm": {
    "publish": false
  },
  "github": {
    "release": false
  },
  "gitlab": {
    "release": true
  },
  "plugins": {
    "@release-it/conventional-changelog": {
      "preset": "angular",
      "infile": "CHANGELOG.md"
    }
  }
}

We use release_it for GitLab release tagging and changelog generation.

Release steps

When we are ready to release, follow these steps

1. Run npm pack in the root directory. It will generate a tarball; move this tarball from project directory to a temporary folder.

2. Unzip the package and ensure that there are no unintended files. The npm pack command also generates output to the stdout, that will provide summary of all included files.

3. Run yarn release-dry-run that will simulate dry run for release. There will be various command prompts, you can go through them and understand the release process. Note the version name which is generated, depending upon fixes and features that went into code from last release. It will generate a proper version name.

4. If the above step is satisfactory, run yarn release that will increment the package version, generate change log and make a release on gitlab.

5. Aftethe above step is completed, ensure that version and change log are correctly generated. Also ensure that GitLab release is made so that the current code is properly tagged. Run npm publish to publish the package to the npm registry.