munim-pencilkit

React Native library for Apple PencilKit integration with comprehensive Apple Pencil support.

iOS

Android

GitHub

npm

Overview

munim-pencilkit is a React Native library for Apple PencilKit integration with comprehensive Apple Pencil support. This library provides advanced stroke analysis, raw sensor data collection, haptic feedback, and professional drawing tools using well-established iOS APIs. Fully compatible with Expo! Works seamlessly with both Expo managed and bare workflows. Comprehensive Apple Pencil Support! Includes pressure sensitivity, tilt detection, predicted touches, coalesced touches, estimated properties, and haptic feedback using verified iOS APIs.

Installation

Terminal

npx expo install munim-pencilkit react-native-nitro-modules

For bare React Native without Expo: npm install munim-pencilkit react-native-nitro-modules

Usage

Basic PencilKit usage

import React, { useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import { PencilKitView, type PencilKitConfig } from 'munim-pencilkit';

export default function DrawingScreen() {
  const pencilKitRef = useRef<any>(null);

  const config: PencilKitConfig = {
    allowsFingerDrawing: true,
    allowsPencilOnlyDrawing: false,
    isRulerActive: false,
    drawingPolicy: 'default',
  };

  return (
    <View style={styles.container}>
      <PencilKitView
        ref={pencilKitRef}
        style={styles.canvas}
        config={config}
        enableApplePencilData={true}
        enableToolPicker={true}
        onApplePencilData={(data) => {
          console.log('Apple Pencil Data:', data);
        }}
        onDrawingChange={(drawing) => {
          console.log('Drawing changed:', drawing);
        }}
      />
    </View>
  );
}

Requirements

iOS/iPadOS 17.5+, React Native 0.75+, Xcode 15+, Apple Pencil (for full functionality), Apple Pencil Pro (for advanced features), Expo SDK 50+

Platform notes

iOS

Requires iOS/iPadOS 17.5+, Xcode 15+, and Apple Pencil. Apple Pencil Pro features require Apple Pencil Pro hardware. PencilKit framework must be linked. Development build required for Expo.

Android

Not available - PencilKit is iOS/iPadOS only.

API

Methods

PencilKitView (component)

Root component that renders the native PencilKit canvas. Supports config, tool picker, and callbacks for drawing and Apple Pencil data.

Returns: React component

Example

Code

<PencilKitView
  ref={pencilKitRef}
  config={config}
  enableToolPicker={true}
  onDrawingChange={(drawing) => {}}
  onApplePencilData={(data) => {}}
/>

getDrawing()

Returns the current PKDrawing data from the canvas. Call via ref on PencilKitView.

Returns: Promise<PKDrawing>

Example

Code

const drawing = await pencilKitRef.current?.getDrawing();

setDrawing(drawing)

Replaces the canvas content with the provided PKDrawing. Call via ref.

Returns: Promise<void>

clear()

Clears all strokes from the canvas. Call via ref on PencilKitView.

Returns: Promise<void>

Types

PencilKitConfig

Configuration object for PencilKitView.

Property	Type	Description
allowsFingerDrawing	boolean	Whether finger input is allowed in addition to stylus.
allowsPencilOnlyDrawing	boolean	Restrict input to Apple Pencil only.
isRulerActive	boolean	Whether the ruler tool is shown.
drawingPolicy	string	One of 'default', 'pencilOnly', 'anyInput'.

ApplePencilData

Property	Type	Description
pressure	number	Stylus pressure (0–1).
altitude	number	Tilt angle (altitude).
azimuth	number	Direction angle (azimuth).
location	object	Precise location on the canvas.
force	number	Perpendicular force where supported.

Features

•Full PencilKit Framework - Complete Apple PencilKit framework support
•Dual Native Drawing Modes - Use PKCanvasView or a custom UITouch stylus renderer
•Professional Drawing Tools - Pen, pencil, marker, eraser, and lasso tools
•Raw Sensor Data - Pressure, tilt, azimuth, force, and location data
•Precise Location - High-precision touch coordinates
•Real-time Streaming - Live Apple Pencil data streaming
•Coalesced Touches - High-fidelity input for smooth drawing
•Predicted Touches - Latency compensation for responsive drawing
•Property Tracking - Estimated properties and refinement updates
•Pressure Sensitivity - Full pressure detection with Apple's recommended curves
•Tilt Detection - Altitude and azimuth angle tracking
•Haptic Feedback - Tactile responses for interactions
•Motion Tracking - Core Motion gyroscope data for barrel roll detection
•Apple Pencil Pro Features - Squeeze gestures, double-tap, hover support
•TypeScript Support - Full TypeScript definitions included
•Expo Compatible - Works seamlessly with Expo managed and bare workflows

For the latest API reference, usage examples, and troubleshooting, visit the GitHub repository and npm package page.