|
| 1 | +<a name="readme-top"></a> |
| 2 | + |
| 3 | +<!-- PROJECT LOGO AND TITLE --> |
| 4 | +<div align="center"> |
| 5 | +<img src="docs/images/logo-banner.png" width="800" /> |
| 6 | + |
1 | 7 | # React Native Smart Graph |
2 | 8 |
|
3 | | -[](http://commitizen.github.io/cz-cli/) |
| 9 | +## Dynamic Graph Visualization for React Native |
| 10 | + |
| 11 | +### Effortlessly create and interact with graph structures in your apps |
| 12 | + |
| 13 | +</div> |
| 14 | + |
| 15 | +<!-- TABLE OF CONTENTS --> |
| 16 | +<br> |
| 17 | +<h3> |
| 18 | +<details> |
| 19 | + <summary> |
| 20 | + Table of Contents |
| 21 | + </summary> |
| 22 | + <h5> |
| 23 | + <ol> |
| 24 | + <li> |
| 25 | + <a href="#getting-started">Getting Started</a> |
| 26 | + <ul> |
| 27 | + <li><a href="#prerequisites">Prerequisites</a></li> |
| 28 | + <li><a href="#installation">Installation</a></li> |
| 29 | + </ul> |
| 30 | + </li> |
| 31 | + </ol> |
| 32 | + </h5> |
| 33 | +</details> |
| 34 | +</h3> |
| 35 | + |
| 36 | +<!-- GETTING STARTED --> |
| 37 | + |
| 38 | +## 📋 Getting Started |
| 39 | + |
| 40 | +### Prerequisites |
| 41 | + |
| 42 | +#### Peer dependencies installation |
| 43 | + |
| 44 | +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. |
| 45 | + |
| 46 | +Run one of the following commands, depending on your package manager: |
| 47 | + |
| 48 | +- yarn |
| 49 | + |
| 50 | +```sh |
| 51 | +yarn add @shopify/react-native-skia react-native-reanimated react-native-gesture-handler react-native-svg |
| 52 | +``` |
| 53 | + |
| 54 | +- npm |
| 55 | + |
| 56 | +```sh |
| 57 | +npm i @shopify/react-native-skia react-native-reanimated react-native-gesture-handler react-native-svg |
| 58 | +``` |
| 59 | + |
| 60 | +#### Adding Reanimated Babel plugin |
| 61 | + |
| 62 | +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: |
| 63 | + |
| 64 | +```js |
| 65 | +module.exports = { |
| 66 | + presets: ..., |
| 67 | + plugins: [ |
| 68 | + ... |
| 69 | + 'react-native-reanimated/plugin' |
| 70 | + ] |
| 71 | + ] |
| 72 | +}; |
| 73 | +``` |
| 74 | + |
| 75 | +#### Pods installation (iOS only) |
| 76 | + |
| 77 | +Before running the app on the iOS device, you will have to take one more step and install required Pods: |
| 78 | + |
| 79 | +```sh |
| 80 | +npx pod-install ios |
| 81 | +``` |
| 82 | + |
| 83 | +### Installation |
| 84 | + |
| 85 | +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. |
| 86 | + |
| 87 | +- yarn |
| 88 | + |
| 89 | +```sh |
| 90 | +yarn add react-native-smart-graph |
| 91 | +``` |
| 92 | + |
| 93 | +- npm |
| 94 | + |
| 95 | +```sh |
| 96 | +npm i react-native-smart-graph |
| 97 | +``` |
| 98 | + |
| 99 | +<p align="right">(<a href="#readme-top">back to top</a>)</p> |
0 commit comments