@chartiq/react-native-chartiq NPM

ChartIQ-React-Native-SDK

React Native SDK for the ChartIQ JavaScript library.

The ChartIQ React Native SDK supports a basic charting application. This SDK can be extended to support more elaborate implementations by adding code to invoke ChartIQ library functions directly or by creating a bridge file similar to nativeSdkBridge.js (in the mobile/js folder of your ChartIQ library).

Requirements

A copy of the ChartIQ JavaScript library (works best with version 9.1.2).
- If you do not have a copy of the library or need a different version, please contact your account manager or visit our Request Follow-Up Site.
React Native 0.71.7
Android 8.1 Oreo (API level 27) or later
iOS 10.3 or later

App

The example folder of this repository contains both Android and iOS app that was built using the SDK. Customize the apps to quickly create your own React Native charting application.

App screen shots

Getting started

While it's possible to use npm, the tooling is built around yarn, so you'll have an easier time if you use yarn for development.

yarn add @chartiq/react-native-chartiq

npm i @chartiq/react-native-chartiq

IOS installation additional step

Go to the ios folder and run pod install

cd ios
pod install

Quick start guide

To get started with the project, run yarn in the root directory to install the required dependencies for each package:

yarn

While developing you can run the example app to test your changes. Any changes you make in your library's JavaScript code will be reflected in the example app without a rebuild. If you change any native code, then you'll need to rebuild the example app.

Import the library and provide a remote url to the ChartIQ library and set the dataMethod to either "pull" or "push" depending on how you want to provide data to the chart.

import { ChartIqWrapperView } from 'react-native-chartiq';

// ...

<ChartIQView
  url={WEB_VIEW_SOURCE} // url to ChartIQ JS library
  dataMethod="pull"
  onStart={() => {
    // do something when chart is ready e.g. set symbol, theme etc.
  }}
  style={styles.chartIq}
/>;

To start the packager: