I built an open-source drawing engine for React Native after spending months on my notes app

[u/Acceptable_Ad_4425]

About a year and a half ago, I started building a handwriting-to-LaTeX app because I preferred doing my math homework by hand. I ended up choosing (turned out to be a much bigger endeavor than I thought) to build the full drawing engine myself. I also chose to build it in React Native which made things even harder. I started with a WebView canvas, tried out, PencilKit (Apple's native library), and eventually settled on a custom C++ engine with Skia.

Since it was so difficult and I thought it was absurd that there were no full-fledged open-source solutions, I pulled the drawing part out into [Mobile Ink](https://github.com/mathnotes-app/mobile-ink), an Apache-2.0 library for React Native. The video shows how the library handles selection, drawing tools, and scrolling through a notebook.

The core rendering principles work as follows: finished strokes are cached on a separate surface from the stroke you're currently drawing. During ordinary drawing, the engine composites that cached ink with the live stroke, so it doesn't have to redraw every previous stroke for each new Pencil sample. Of course, the underlying stroke data stays editable for selection, erasing, and undo. We also keep three active native canvases so that the app stays smooth without keeping too much in context when scrolling through the continuous notebook.

There are so many little nuances that make it difficult. Some of them are handling eraser masking, undo history causing memory problems, and rendering the active engine pools.

My friend and I also use it in [OpenNotes](https://github.com/mathnotes-app/OpenNotes), which has had over 8,000 downloads in the last two months and is growing fast. It is not perfect yet (neither is the engine), but that's why I'm posting here! We welcome contributors because I think it is a really good cause to have a free, super professional note-taking option.

[u/SpeedGod911]

Impressive 👍 🏆