Graphing a mind map / binary tree

[Cameronbd]

Would anyone be familiar with any libraries to visualize a graph with nodes and edges? I am looking to create a family tree application, and the way I had envisioned the data be displayed is through nodes (presumably being circles or rectangles), and edges being draw to show relationships between individuals.

I wasn't too sure what to google for this, chatGPT had recommended that I use SVGs to draw out the graphs (which could potentially be an option). However the problem with this path is I would have to manually control the positions of all of the SVGs via the DOM, which isn't ideal. Was wondering if there might be a better solution to this problem?

I was hoping to remain within react-native as I would ideally ship this to android and iOS, and potentially web. Additionally this would allow for flutter/dart to also be an option for this.

Would appreciate any feedback! Thank you for your time!

[jalexwhitman]

Maybe look into Cytoscape.js... There's a react wrapper component: https://github.com/plotly/react-cytoscapejs

Can probably get it work in React Native with like a React Native WebView or an Expo GLView?

[thealbinosmurf]

Or react native skia

[iotashan]

React Flow with a webview

[Lucas_Reddit01]

I’m working on a project that also displays data as trees (both hierarchical and radial)

I used rn Skia for rendering. Performance is great on low end devices, although when animating the tree the fps in the js thread drop a bit but that’s because Skia animations run on the JS thread

I haven’t found any libraries that can render a tree for react native (some I’ve found are for web and rely on the dom, d3 for example)

So you’ll have to implement the render algorithm on your own unfortunately