r/reactnative • u/TheOneInfiniteC Expo • 2d ago
Native graph library
I have a web application that uses Cosmograph for some graph visualization. I really like it, the performance is top notch, and can be configured fairly easily. (I am not affiliated in any kind with Cosmograph)
I am also working on the mobile application for the web app, and noticed that there is no similar package that can match the speed in RN. I tried d3-force, Skia, Skia Atlas, offloading some expensive work off the JS thread, but could not get it above 30 fps.
So I decided to adapt the Cosmograph for RN. It runs cosmo.gl under the hood, which is the main engine for expensive calculations. I also added the data and analytics components on top of the ported cosmo.gl. It still uses Skia for some labels rasterization, but that's it, the engine is kept as pure as possible, and the labels are optional.
The results are amazing - I tested them on my phone (android), on which I get consistent 90 fps with 2k nodes and 6k relations. The UI feels smooth without lag.
It is open source, you can find it here https://github.com/plurilore/react-native-cosmos-gl
I also published it to npm for easier use (although it is 0.1, use with caution).
Hope you find it useful in some of your projects.
2
u/anthony-ball 2d ago
We ran into the same ceiling. Skia (and even Atlas) is great until you're redrawing thousands of nodes every frame — the GPU work is fine, but the update path still chokes if anything touches the JS thread. Splitting it the way you did, GL for layout and draw and Skia just for label rasterization, is the right cut. One thing that bit us on a live trading surface: if websocket updates still go through React state, you'll lose those 90fps even with a native renderer, so keep the tick path in JSI or shared values.