Xalt UI React Native Component Library

Table of Contents:

• Overview
• Getting Started
  • Using NPM
  • Using Yarn
  • Using Lerna
• Running the Native Library

Overview

This project houses code that pertains to the Xalt UI React Native component library for native mobile platforms. This contains our client UI component code and supporting libraries. The overall goal of this project is to keep a single source of truth for the UI building blocks of Xalt mobile applications.

Getting Started

Before you can start working on the Xalt UI React Native component library, you'll need to set some things up first depending on your development environment OS.

• NodeJS must be installed on your machine.

• Yarn must be installed on your machine.

• React Native CLI - This should be installed globally

    npm install react-native-cli -g

• Xcode for iOS Development

• Android Studio for Android Development

  • See React Native's documentation and select the "React Native CLI Quickstart" tab and review the Installing Dependencies section depending on the OS utilized.

• Clone this repo

Standalone using NPM

• In a terminal/console, navigate to the root of the project and run the following command:

    npm install

Standalone using YARN

• In a terminal/console, navigate to the root of the project and run the following command:

    yarn install

With Lerna project

This will setup your environment for development and link the necessary libraries inside this repository. Afterwards you will be able to make changes in any of the libraries and test those changes running the client. Please notice that we are hoisting some node_modules to the root directory. We recommend you do not hoist react-native or any module that has a dependency on react-native. Lerna and yarn workspaces are used to provided support for linking to projects inside this repository. Lerna will also be used for publishing your changes to the projects specific npm module after a successful merge with master. Lerna will keep the projects in sync with repo changes so that the build process will always use the latest version of your changes in any package.

After installing yarn:

• In a terminal/console, navigate to the root of the Lerna project and run the following command:

    lerna bootstrap

Running the Native Library

To start the Storybook native project:

npm run start-library-bundler
npm run start-library-ios

To update/generate the React Native stories loader file:

npm run generate-native-stories