How do I add a whiteboard to a React Native app?

Install @quickdrawjs/react-native and react-native-webview, then render . The engine ships inside the package as a self-contained HTML page — no network needed, works offline.

Does it support Apple Pencil?

Yes — stroke width follows Pencil pressure, and once a stylus is detected, palm touches pan the canvas instead of drawing.

Does it work with Expo?

Yes. The package uses react-native-webview, which is supported in Expo Go and dev builds. No native modules of its own.

React Native whiteboard with Apple Pencil support

The whole integration

npm install @quickdrawjs/react-native react-native-webview import { Quickdraw } from '@quickdrawjs/react-native' <Quickdraw ref={board} theme="dark" onChange={(diff) => sync(diff)} style={{ flex: 1 }} /> // snapshots and exports cross the bridge as promises const snapshot = await board.current.getSnapshot() const png = await board.current.exportPng({ scale: 2 })

How it works

The package embeds the Quickdraw engine as a single self-contained HTML string rendered in a WebView — no server, no network fetch, nothing to cache. A typed message bridge carries props in and events out, so from your app's side it behaves like any other component: props, callbacks, and a ref with async methods.

Pencil input arrives with pressure, and palm rejection kicks in the moment a stylus is seen: fingers pan and pinch the camera while the pen draws. Boards serialize to plain JSON snapshots you can store with the rest of your app data, and exportPng() returns a data URL ready for sharing sheets.

What's in the box

Pen with pressure, highlighter, eraser, laser pointer
Shapes, arrows with draggable bend, text, sticky notes, images
Infinite canvas with pinch zoom and zoom-to-fit
Per-gesture undo/redo, light and dark themes, ruled and dotted grids
JSON snapshots, live diffs for sync, PNG export

More: documentation · React Native tutorial · React whiteboard · tldraw alternative