{"id":18509054,"url":"https://github.com/high5apps/react-native-vis-network","last_synced_at":"2025-10-31T18:30:36.932Z","repository":{"id":163308054,"uuid":"636706415","full_name":"High5Apps/react-native-vis-network","owner":"High5Apps","description":"Use vis-network in your React Native projects","archived":false,"fork":false,"pushed_at":"2024-03-10T10:35:51.000Z","size":1942,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-25T20:16:46.784Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/High5Apps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-05T13:07:02.000Z","updated_at":"2024-12-24T12:59:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"fd6ae7dc-7e44-4123-ac59-2befa41543bb","html_url":"https://github.com/High5Apps/react-native-vis-network","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/High5Apps%2Freact-native-vis-network","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/High5Apps%2Freact-native-vis-network/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/High5Apps%2Freact-native-vis-network/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/High5Apps%2Freact-native-vis-network/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/High5Apps","download_url":"https://codeload.github.com/High5Apps/react-native-vis-network/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239221920,"owners_count":19602528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T15:16:19.370Z","updated_at":"2025-10-31T18:30:36.843Z","avatar_url":"https://github.com/High5Apps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-vis-network\n\n[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.\n\n## iOS example\n\u003cimg src=\"docs/images/example-network-on-ios.png\" width=\"175\"\u003e\n\n## Android example\n\u003cimg src=\"docs/images/example-network-on-android.png\" width=\"175\"\u003e\n\n## Installation\n\n```sh\n# react-native-vis-network needs to use react-native-webview to work correctly,\n# so install it if you haven't previously installed it in your project\nnpm install react-native-webview\n\nnpm install react-native-vis-network\n```\n\n## Usage\n\n```js\nimport React, { useState } from 'react';\nimport VisNetwork, { Data } from 'react-native-vis-network';\n\nexport default function MyComponent() {\n  const [data, setData] = useState\u003cData\u003e({\n    edges: [\n      { from: 1, to: 3 },\n      { from: 1, to: 2 },\n      { from: 2, to: 4 },\n      { from: 2, to: 5 },\n      { from: 3, to: 3 },\n    ],\n    nodes: [\n      { id: 1, label: 'Node 1' },\n      { id: 2, label: 'Node 2' },\n      { id: 3, label: 'Node 3' },\n      { id: 4, label: 'Node 4' },\n      { id: 5, label: 'Node 5' },\n    ],\n  });\n  return \u003cVisNetwork data={data} /\u003e;\n}\n```\n\n### Event Listeners\nYou can add event listeners for any [vis-network Event](https://visjs.github.io/vis-network/docs/network/#Events).\n\nNote 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.\n\n```js\nexport default function MyComponent() {\n  const [loading, setLoading] = useState\u003cboolean\u003e(false);\n  const visNetworkRef = useRef\u003cVisNetworkRef\u003e(null);\n\n  useEffect(() =\u003e {\n    if (!loading || !visNetworkRef.current) {\n      return;\n    }\n\n    const subscription = visNetworkRef.current.addEventListener(\n      'click',\n      (event: any) =\u003e console.log(JSON.stringify(event, null, 2))\n    );\n\n    return subscription.remove;\n  }, [loading]);\n\n  // ...\n\n  return (\n    \u003cVisNetwork\n      data={data}\n      onLoad={() =\u003e setLoading(true)}\n      ref={visNetworkRef}\n    /\u003e\n  );\n}\n```\n\n### Methods\nYou 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.\n\n#### Caveats\n1. It's not possible to use the following methods due to their non-serializable parameters:\n    - [`cluster`](https://visjs.github.io/vis-network/docs/network/#methodClustering)\n    - [`clusterByConnection`](https://visjs.github.io/vis-network/docs/network/#methodClustering)\n    - [`clusterByHubsize`](https://visjs.github.io/vis-network/docs/network/#methodClustering)\n    - [`clusterOutliers`](https://visjs.github.io/vis-network/docs/network/#methodClustering)\n    - [`openCluster`](https://visjs.github.io/vis-network/docs/network/#methodClustering)\n    - [`updateClusteredNode`](https://visjs.github.io/vis-network/docs/network/#methodClustering)\n    - [`updateEdge`](https://visjs.github.io/vis-network/docs/network/#methodClustering)\n2. 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):\n    - [`disableEditMode`](https://visjs.github.io/vis-network/docs/network/#methodManipulation)\n    - [`editNode`](https://visjs.github.io/vis-network/docs/network/#methodManipulation)\n    - [`enableEditMode`](https://visjs.github.io/vis-network/docs/network/#methodManipulation)\n    - [`setSelection`](https://visjs.github.io/vis-network/docs/network/#methodSelection)\n    - [`storePositions`](https://visjs.github.io/vis-network/docs/network/#methodInformation)\n3. 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).\n4. 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.\n\n#### Example\n```js\nexport default function MyComponent() {\n  const visNetworkRef = useRef\u003cVisNetworkRef\u003e(null);\n\n  // ...\n\n  return (\n    \u003c\u003e\n      \u003cVisNetwork data={data} ref={visNetworkRef} /\u003e\n      \u003cButton\n        title=\"Focus on node 1\"\n        onPress={() =\u003e {\n          const nodeId = 1;\n          visNetworkRef.current?.focus(nodeId, { animation: true, scale: 5 });\n        }}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n### Options\nYou 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).\n\n#### Example\n```js\nexport default function MyComponent() {\n  const [options, setOptions] = useState\u003cOptions\u003e({\n    edges: {\n      color: 'blue',\n      width: 2,\n    },\n    interaction: {\n      dragNodes: false,\n      keyboard: false,\n    },\n    nodes: {\n      borderWidth: 4,\n      color: 'pink',\n    },\n  });\n\n  // ...\n\n  return \u003cVisNetwork data={data} options={options} /\u003e;\n}\n```\n\n### Additional Options\nIn addition to the vis-network options mentioned in the [Options](#options) section, the following props are also available.\n\n#### `zoomFitOnStabilized`\n- If `true`, the network is zoomed in or out to fill its container.\n- If `false`, nothing is done. As a result, nodes may be smaller than expected.\n- Default value: `true`\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhigh5apps%2Freact-native-vis-network","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhigh5apps%2Freact-native-vis-network","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhigh5apps%2Freact-native-vis-network/lists"}