https://github.com/high5apps/react-native-vis-network
Use vis-network in your React Native projects
https://github.com/high5apps/react-native-vis-network
Last synced: 8 months ago
JSON representation
Use vis-network in your React Native projects
- Host: GitHub
- URL: https://github.com/high5apps/react-native-vis-network
- Owner: High5Apps
- License: mit
- Created: 2023-05-05T13:07:02.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-10T10:35:51.000Z (over 2 years ago)
- Last Synced: 2025-01-25T20:16:46.784Z (over 1 year ago)
- Language: TypeScript
- Size: 1.85 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-vis-network
[react-native-vis-network](https://github.com/High5Apps/react-native-vis-network#readme) lets you use [vis-network](https://github.com/visjs/vis-network#readme) in your [React Native](https://reactnative.dev/) projects.
## iOS example
## Android example
## Installation
```sh
# react-native-vis-network needs to use react-native-webview to work correctly,
# so install it if you haven't previously installed it in your project
npm install react-native-webview
npm install react-native-vis-network
```
## Usage
```js
import React, { useState } from 'react';
import VisNetwork, { Data } from 'react-native-vis-network';
export default function MyComponent() {
const [data, setData] = useState({
edges: [
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
{ from: 3, to: 3 },
],
nodes: [
{ id: 1, label: 'Node 1' },
{ id: 2, label: 'Node 2' },
{ id: 3, label: 'Node 3' },
{ id: 4, label: 'Node 4' },
{ id: 5, label: 'Node 5' },
],
});
return ;
}
```
### Event Listeners
You can add event listeners for any [vis-network Event](https://visjs.github.io/vis-network/docs/network/#Events).
Note that the earliest time you can successfully add an event listener is during the `onLoad` callback. If you try to add an event listener before then your callback won't be called.
```js
export default function MyComponent() {
const [loading, setLoading] = useState(false);
const visNetworkRef = useRef(null);
useEffect(() => {
if (!loading || !visNetworkRef.current) {
return;
}
const subscription = visNetworkRef.current.addEventListener(
'click',
(event: any) => console.log(JSON.stringify(event, null, 2))
);
return subscription.remove;
}, [loading]);
// ...
return (
setLoading(true)}
ref={visNetworkRef}
/>
);
}
```
### Methods
You can use any of the [vis-network methods](https://visjs.github.io/vis-network/docs/network/#methods) that are not discussed in the caveats below.
#### Caveats
1. It's not possible to use the following methods due to their non-serializable parameters:
- [`cluster`](https://visjs.github.io/vis-network/docs/network/#methodClustering)
- [`clusterByConnection`](https://visjs.github.io/vis-network/docs/network/#methodClustering)
- [`clusterByHubsize`](https://visjs.github.io/vis-network/docs/network/#methodClustering)
- [`clusterOutliers`](https://visjs.github.io/vis-network/docs/network/#methodClustering)
- [`openCluster`](https://visjs.github.io/vis-network/docs/network/#methodClustering)
- [`updateClusteredNode`](https://visjs.github.io/vis-network/docs/network/#methodClustering)
- [`updateEdge`](https://visjs.github.io/vis-network/docs/network/#methodClustering)
2. It's not possible to use the following methods due to various issues discussed in [87da46d](https://github.com/High5Apps/react-native-vis-network/commit/87da46d):
- [`disableEditMode`](https://visjs.github.io/vis-network/docs/network/#methodManipulation)
- [`editNode`](https://visjs.github.io/vis-network/docs/network/#methodManipulation)
- [`enableEditMode`](https://visjs.github.io/vis-network/docs/network/#methodManipulation)
- [`setSelection`](https://visjs.github.io/vis-network/docs/network/#methodSelection)
- [`storePositions`](https://visjs.github.io/vis-network/docs/network/#methodInformation)
3. Intentionally, the methods [`on`](https://visjs.github.io/vis-network/docs/network/#methodGlobal), [`off`](https://visjs.github.io/vis-network/docs/network/#methodGlobal), and [`once`](https://visjs.github.io/vis-network/docs/network/#methodGlobal) have not been implemented. Instead, use `addEventListener` as described in [Event Listeners](#event-listeners).
4. While using methods like `addEdgeMode`, `addNodeMode`, `setData`, and `setOptions` will successfully update and re-render the network, they will not update the `data` or `options` props passed into `VisNetwork`. Using any of these methods will cause the props to become out-of-sync with what is actually displayed.
#### Example
```js
export default function MyComponent() {
const visNetworkRef = useRef(null);
// ...
return (
<>
{
const nodeId = 1;
visNetworkRef.current?.focus(nodeId, { animation: true, scale: 5 });
}}
/>
>
);
}
```
### Options
You can use any of the [vis-network options](https://visjs.github.io/vis-network/docs/network/#options) that are serializable as [JSON](https://en.wikipedia.org/wiki/JSON) (i.e. not functions or callbacks).
#### Example
```js
export default function MyComponent() {
const [options, setOptions] = useState({
edges: {
color: 'blue',
width: 2,
},
interaction: {
dragNodes: false,
keyboard: false,
},
nodes: {
borderWidth: 4,
color: 'pink',
},
});
// ...
return ;
}
```
### Additional Options
In addition to the vis-network options mentioned in the [Options](#options) section, the following props are also available.
#### `zoomFitOnStabilized`
- If `true`, the network is zoomed in or out to fill its container.
- If `false`, nothing is done. As a result, nodes may be smaller than expected.
- Default value: `true`
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)