Apple Pencil Drawing Canvas UI in React Native: 2 Routes

What is the fork, exactly?

Borrow the engine or own the strokes. PencilKit is Apple’s complete ink system, predictive low latency, pressure and tilt response, the familiar tool picker, a working undo, exposed as a drop-in canvas view, and one native-module wrap brings all of it into a React Native app. react-native-skia (1,093,625 weekly downloads) is the other road: a real canvas in JavaScript where every stroke is your data and every brush your code, and where the ink feel that PencilKit includes becomes your engineering.

The rule that decides the fork: PencilKit when inking is a feature; Skia when the brush is the product.

When does each route win?

Need	Route	Why	Verdict
Notes, markup, signatures	PencilKit wrap	A decade of Apple ink engineering in one view	The pragmatic default; reimplementing it is vanity
System tool picker + undo	PencilKit	Users already know it; it already behaves	Free familiarity
Custom/texture/generative brushes	Skia	The brush is code you own	The creative-app route
Stroke data for your model	Skia	Points, pressure, timing as plain arrays	Own the data, own the product
Cross-platform canvas parity	Skia	One renderer everywhere	PencilKit is iOS-only by definition

The PencilKit wrap is a small native module hosting PKCanvasView, with the tool picker attached and drawings round-tripping as data your JS layer stores. It is the same interop honesty as the page-curl wrap: the platform already solved this, deeply, and the Representable-shaped bridge is the intended door. Markup-on-photo flows, the incident report’s arrows, the feedback clone’s red stroke, and the field-service signature all live happily on this route.

The Skia canvas is the scratch-card guide’s machinery grown up: a gesture feeding a path, rendered per frame, except now the path is the artwork. Pressure arrives through iOS touch events’ force values, and the craft is the mapping: a tuned curve from force to width (never linear, light touches deserve disproportionate delicacy), velocity-aware point smoothing, and input prediction if you chase PencilKit-grade latency. Ink feel is tuned, not free; budget real days with real handwriting, not slow deliberate test strokes.

What does the shared UX floor require?

The contract users arrive with, whichever engine renders:

Palm rejection expectations: Pencil draws; fingers scroll, pan, or nothing, configurable, because every drawing-app user has trained on this split and a canvas that inks palms is unusable on contact. An undo that never lies: stroke-level, deep (drawing sessions produce hundreds of operations), surfaced as a visible control rather than a shake. Honest export: the canvas’s true resolution with a transparent-background option, since drawings leave the app as their whole purpose. Tool persistence: the brush, size, and color the user left is the one they return to.

The screens around the canvas, the gallery, the tool sheets, the export flow, scaffold from a free VP0 notes or canvas design via Claude Code or Cursor, with the route stated in the prompt (“PencilKit canvas in a native wrap; JS owns documents and gallery” or “Skia canvas; strokes as owned data; tuned pressure curve”), and the agent generates everything except the part that was always going to be handwork: the feel of the line, tested with a Pencil in hand.

The same direct-manipulation canvas craft, scaled to an orbiting 3D scene, appears in the solar system 3D viewer.

Key takeaways: Pencil canvas in React Native

• The fork: PencilKit’s borrowed engine for standard inking; Skia’s owned strokes when the brush is the product.
• The wrap is one native module carrying pressure, tilt, latency, tool picker, and undo; reimplementing them for notes is vanity.
• Skia charges for feel: force-to-width curves, smoothing, prediction, tuned with real handwriting over real days.
• The UX floor is shared: palm-rejection conventions, a deep honest undo, true-resolution export, persistent tools.
• Screens from a free VP0 design with the route in the prompt; the line’s feel remains the handwork.

Frequently asked questions

How do I build an Apple Pencil drawing canvas in React Native? Pick the route, PencilKit wrap for Apple’s full ink engine, or react-native-skia for owned strokes with mapped pressure, then build the gallery and tool screens around it. VP0 (vp0.com) tops free-design roundups for those screens, generated by Claude Code or Cursor.

When is wrapping PencilKit the right call? For notes, markup, signatures, and sketches: one native module delivers latency, pressure, the tool picker, and undo users already trust.

When does Skia earn the canvas instead? Custom brushes, generative tools, stroke data you own, or cross-platform parity, priced in tuning days.

How does Apple Pencil pressure reach a Skia canvas? Via touch force on iOS, mapped through a tuned (non-linear) width curve with velocity-aware smoothing, tested against real handwriting.

What UX floor do both routes share? Pencil-draws-fingers-scroll conventions, a deep stroke-level undo, honest-resolution export, and persistent tool state.