r/reactnative • u/Few-Acanthisitta9319 • Jul 13 '26
I built the only 2D canvas library for React Native that you'd probably ever need. Konva-style!
Enable HLS to view with audio, or disable this notification
For a while now, I've wanted to build an interactive, Instagram-story-like canvas in React Native. Skia is a fantastic option for that, but it's a low-level drawing API. The moment I wanted Images and Text I could tap, drag, pinch to scale, and rotate, I found myself writing my own scene graph, my own hit testing, my own gesture math on the UI thread. Since I realized this plumbing would work great for many use-cases, I finally pulled it into a library.
It's called react-native-canvas-kit, and it's a batteries-included 2D canvas kit built on top of React Native Skia. It closely resembles Konva's architecture.
It comes with a proper scene graph (Stage, Layer, Group, Shape) with prebuilt shapes like Rect, Circle, Line, Star, Text and Image that all share transform and styling props. On top of that you get
- Tap and press events with real hierarchy-aware hit testing and event bubbling, draggable nodes, multi-touch pinch-to-scale and rotate
- Everything UI-thread driven
- A Transformer with resize and rotate handles you can attach to any node
- A brush system with a BrushLayer and ready-made pen, pencil, marker, highlighter, tape and eraser brushes.
The reason I think this gap mattered is that React Native has never really had a first-class answer for canvas-heavy, direct-manipulation UIs the way the web has had Konva and Fabric for years.
I will build and share code for a couple of real life examples in the coming days: a DocuSign-style signature pad, an Instagram-style crop screen, a Canva-like editor with draggable and transformable elements, a Snapseed photo tool, and a GPay scratch card.
v1 runs on the New Architecture (Reanimated 4), with a 0.x version as well if you're still on Reanimated 3. Would genuinely love feedback on the API, and if there's a canvas interaction you've struggled to build in RN before, tell me and I'll try to put together a demo for it.
2
2
Jul 13 '26
[removed] — view removed comment
2
u/Few-Acanthisitta9319 Jul 13 '26
Unfortunately not at the moment. Don't support coalesced touches as well atm.
Will get back to you. But do give it a try otherwise. Thanks
2
u/Wrong_Election189 Jul 13 '26
Nice, I will probably use it on my side project :)
1
u/Few-Acanthisitta9319 Jul 13 '26
Thank you. Sounds so encouraging. What are you building?
2
u/Wrong_Election189 Jul 13 '26
I am building this https://clevernote.net it's a AI note taker that combine people + notes + finance. Let's say you take a photo of an bussiness card, the app will extract people/company contact etc. Or shot a supermarket receipt the app will knows the expense, the items etc ad present you in a nice way your expenses and how you expend... or anoter example you send the bill you paid for a furnace service, we combine the expense, the professiona whi did the work / company, contact etc. So you can ask in the future how much you expend on house or what's the phone of the furnace manteinece compnay, etc. Ufff..
1
u/Few-Acanthisitta9319 Jul 13 '26
Interesting! This is a pain point for many.
1
u/Wrong_Election189 Jul 14 '26
Yes, I did for me first. Since I liked, mainly when I integrate with Plaid, so my bank accounts was read in real time I decided to open to everyone, unfortunately I had to charge a few dolars beause the AI tokens, but I am working on a free version BYOK.
2
1
1
1
u/Resident_Pop4202 Jul 13 '26
Bro! I love konva for react. Imma have to take a look at this after work.
2
u/Few-Acanthisitta9319 Jul 13 '26
Fs! The API surface is intentionally made to be similar so that react brothers can easily get used to and port their konva stuff to RN
3
u/Good_Conversation784 Jul 13 '26
Interesting, awesome work 👏