React Native Smart Graph

Dynamic Graph Visualization for React Native

Effortlessly create and interact with graph structures in your apps

Table of Contents

1. Getting Started

   • Prerequisites
   • Installation

2. Usage

   • Basic usage
   • Graph models
   • Graph components
   • Creating custom renderers
   • Creating graph animations

⚙ Getting Started

Prerequisites

Peer dependencies installation

This library uses a few external libraries that you should install before installing the library. You will need these libraries to build custom graph components, create custom animations or handle events.

Run one of the following commands, depending on your package manager:

• yarn

yarn add @shopify/react-native-skia react-native-reanimated react-native-gesture-handler react-native-svg

• npm

npm i @shopify/react-native-skia react-native-reanimated react-native-gesture-handler react-native-svg

Adding Reanimated Babel plugin

You will also need to add the 'react-native-reanimated/plugin' Babel plugin to make Reanimated. Your babel.config.js should look like this after change:

module.exports = {
  presets: ...,
  plugins: [
    ...
    'react-native-reanimated/plugin'
    ]
  ]
};

Pods installation (iOS only)

Before running the app on the iOS device, you will have to take one more step and install required Pods:

npx pod-install ios

(back to top)

Installation

In order to install the library, you will need to run one of the following commands, depending on the package manager you use in your project. All required dependencies will be automatically installed.

• yarn

yarn add react-native-smart-graph

• npm

npm i react-native-smart-graph

(back to top)

🤹 Basic Usage

(back to top)