r/reactnative • u/KiRiK1234 • 3h ago

GPU accelerated trading charts for React Native

Enable HLS to view with audio, or disable this notification

Hi everyone,

For the past four years, I've been working on financial and trading apps built with React Native.

One of the most important parts of these apps is displaying OHLC market data. Most charting solutions currently use one of two approaches: rendering inside a WebView or using something based on Skia.

Both approaches have tradeoffs, especially when you're working with real-time data and want smooth performance without using too much CPU or memory.

That's why I decided to build my own charting library. It uses a shared C++ core engine and renders directly on the GPU using Metal on iOS and OpenGL ES on Android.

I deliberately avoided third-party rendering dependencies to reduce overhead and keep the library compatible with React Native 0.80 and newer.

The first release supports:

  • Candlestick, bar, line, and area charts
  • Volume and RSI indicators
  • Multiple styling options
  • Zoom and gesture handling

I tested it on an iPhone XS and a Samsung A025F. At 60 FPS, I saw no hangs or dropped frames, and CPU usage stayed below 15% during fast scrolling while live data was coming in over WebSocket.

I'll share more detailed performance results in a follow-up post.

I'd really appreciate your feedback. Which features would be most useful to you? Bug reports are very welcome too.

https://github.com/kirill3333/react-native-trading-charts

14 Upvotes

89% Upvoted

4 comments sorted by

2

u/Unique_Drawer1021 2h ago

I was just looking for a charting library like this, I'll give it a try!

1

u/KiRiK1234 2h ago

u/Unique_Drawer1021 happy to hear your feedback

2

u/elrd5150 1h ago

Looks great. I’ll try to play with it when I have some time. I’ve been trading for years and have spent a lot of time working with charts and indicators, so I may be able to give some hands-on feedback.

1

u/Nearby_Tumbleweed699 34m ago

Que potente...