react-native-image-editor-skia 0.1.0

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,170 @@
+/**
+ * Public + internal types for the Skia image editor.
+ *
+ * COORDINATE-SPACE CONTRACT (read this first):
+ * Every annotation's geometry is stored in **image space** — the base image's
+ * full-resolution pixel coordinate system (0..imageWidth, 0..imageHeight).
+ * It is NEVER stored in screen space. A single `imageToScreen` affine matrix
+ * maps image space onto the on-screen canvas; its inverse maps touches back.
+ * Because of this, export can render the exact same numbers off-screen at native
+ * resolution with no rescaling. See `utils/math.ts`.
+ */
+export interface Vec2 {
+    x: number;
+    y: number;
+}
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export type ToolType = 'select' | 'circle' | 'arrow' | 'marker' | 'freehand' | 'text' | 'crop';
+export type AnnotationType = 'circle' | 'arrow' | 'marker' | 'freehand' | 'text';
+/**
+ * Colors are stored as CSS-style strings ("#RRGGBB" / "#RRGGBBAA" / named).
+ * Skia accepts these directly, and they are trivially serializable for history.
+ */
+export type ColorString = string;
+interface BaseAnnotation {
+    id: string;
+    type: AnnotationType;
+    /** Rotation in radians about the annotation's own center. */
+    rotation: number;
+    /** Paint order; higher = drawn on top / hit-tested first. */
+    z: number;
+}
+export interface CircleAnnotation extends BaseAnnotation {
+    type: 'circle';
+    center: Vec2;
+    radius: number;
+    strokeColor: ColorString;
+    strokeWidth: number;
+    /** Optional fill; undefined = outline only. */
+    fill?: ColorString;
+}
+export interface ArrowAnnotation extends BaseAnnotation {
+    type: 'arrow';
+    start: Vec2;
+    end: Vec2;
+    /** Length of the arrowhead barbs, in image pixels. */
+    headSize: number;
+    strokeColor: ColorString;
+    strokeWidth: number;
+}
+export interface MarkerAnnotation extends BaseAnnotation {
+    type: 'marker';
+    /** Highlight rectangle, in image space. */
+    rect: Rect;
+    color: ColorString;
+    /** 0..1 — highlighters are semi-transparent. */
+    opacity: number;
+}
+export interface FreehandAnnotation extends BaseAnnotation {
+    type: 'freehand';
+    points: Vec2[];
+    strokeColor: ColorString;
+    strokeWidth: number;
+}
+export interface TextAnnotation extends BaseAnnotation {
+    type: 'text';
+    /** Top-left origin of the text box, in image space. */
+    origin: Vec2;
+    text: string;
+    color: ColorString;
+    fontSize: number;
+    /** Wrap width of the text box, in image pixels. */
+    width: number;
+}
+export type Annotation = CircleAnnotation | ArrowAnnotation | MarkerAnnotation | FreehandAnnotation | TextAnnotation;
+/**
+ * Non-destructive image transforms. Nothing is baked into pixels until export,
+ * so all of these are undoable.
+ */
+export interface SceneTransform {
+    /** Free-angle rotation of the whole image + its annotations, in radians. */
+    rotation: number;
+    /** Uniform resize factor applied at export. */
+    scale: number;
+    /** Crop region in image space, or null for the full image. */
+    cropRect: Rect | null;
+}
+export declare const IDENTITY_SCENE: SceneTransform;
+/** The serializable editor document — everything undo/redo tracks. */
+export interface EditorDocument {
+    annotations: Annotation[];
+    scene: SceneTransform;
+}
+export type OutputFormat = 'png' | 'jpeg';
+/**
+ * Callback that persists an encoded image to disk. The library has no
+ * filesystem access of its own, so the consumer supplies this using whatever fs
+ * module they already have (react-native-fs, expo-file-system, etc.). It
+ * receives the destination path and the RAW base64 payload (no data-URI prefix).
+ */
+export type WriteFileFn = (path: string, base64: string) => Promise<void>;
+export interface ExportOptions {
+    format?: OutputFormat;
+    /** JPEG quality 0..100 (ignored for PNG). Default 100. */
+    quality?: number;
+    /**
+     * Clamp the longest output edge to this many pixels (keeps aspect ratio).
+     * Guards against OOM when snapshotting very large images. Default: no clamp.
+     */
+    maxExportSize?: number;
+    /**
+     * `'base64'` (default) resolves to a base64 string. `'file'` writes the image
+     * to `filePath` using `writeFile` and resolves to that path.
+     */
+    output?: 'base64' | 'file';
+    /** Destination path/URI when `output: 'file'`. */
+    filePath?: string;
+    /** Required when `output: 'file'` — writes the base64 payload to disk. */
+    writeFile?: WriteFileFn;
+    /**
+     * For `output: 'base64'` only. When true (default), returns a
+     * `data:image/...;base64,...` URI. When false, returns raw base64 (no prefix).
+     */
+    dataUri?: boolean;
+}
+/** Imperative handle exposed via `ref`. */
+export interface ImageEditorRef {
+    /**
+     * Render the current scene off-screen at full resolution. Resolves to base64
+     * (default) or, with `output: 'file'`, to the written file path.
+     */
+    export: (options?: ExportOptions) => Promise<string>;
+    undo: () => void;
+    redo: () => void;
+    canUndo: () => boolean;
+    canRedo: () => boolean;
+    /** Remove all annotations and reset scene transforms (keeps the base image). */
+    reset: () => void;
+}
+/** Source image: a base64 string (raw or data-URI) or a file/remote URI. */
+export type ImageSource = {
+    base64: string;
+} | {
+    uri: string;
+};
+export interface ImageEditorProps {
+    /** Base image to edit. */
+    source: ImageSource;
+    /** Fired when the user taps the built-in export/done control. */
+    onExport?: (base64: string) => void;
+    /** Default export options for the built-in export control. */
+    exportOptions?: ExportOptions;
+    /** Initial stroke color for new shapes. Default "#FF3B30". */
+    initialStrokeColor?: ColorString;
+    /** Initial text color. Default "#FFFFFF". */
+    initialTextColor?: ColorString;
+    /** Palette shown in the color picker. */
+    palette?: ColorString[];
+    /** Hide the built-in toolbar (drive tools yourself via ref/context). */
+    hideToolbar?: boolean;
+    /** Called whenever the loaded image fails to decode. */
+    onError?: (error: Error) => void;
+    style?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}

package/lib/typescript/src/utils/color.d.ts

@@ -0,0 +1,8 @@
+import type { ColorString } from '../types';
+/**
+ * Apply an opacity (0..1) to a hex color string, returning an 8-digit hex
+ * ("#RRGGBBAA"). Used by the marker/highlighter which draws semi-transparently.
+ * Non-hex inputs (named colors, rgba(...)) are returned unchanged.
+ */
+export declare function withOpacity(color: ColorString, opacity: number): ColorString;
+//# sourceMappingURL=color.d.ts.map

package/lib/typescript/src/utils/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../src/utils/color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,GAAG,WAAW,CA0B5E"}

package/lib/typescript/src/utils/id.d.ts

@@ -0,0 +1,3 @@
+/** Small unique id generator (JS thread only — avoids a nanoid dependency). */
+export declare function genId(prefix?: string): string;
+//# sourceMappingURL=id.d.ts.map

package/lib/typescript/src/utils/id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"id.d.ts","sourceRoot":"","sources":["../../../../src/utils/id.ts"],"names":[],"mappings":"AAEA,+EAA+E;AAC/E,wBAAgB,KAAK,CAAC,MAAM,SAAM,GAAG,MAAM,CAG1C"}

package/lib/typescript/src/utils/math.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Pure 2D affine-matrix math. Every function is marked `worklet` so it can run
+ * on the UI thread inside gesture handlers as well as on the JS thread.
+ *
+ * A matrix `Mat` maps a point p to p' via:
+ *   x' = a*x + c*y + e
+ *   y' = b*x + d*y + f
+ * (the canonical CSS/canvas affine convention).
+ */
+import type { Rect, SceneTransform, Vec2 } from '../types';
+export interface Mat {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    e: number;
+    f: number;
+}
+export declare function identity(): Mat;
+/** Returns m1 ∘ m2 (applies m2 first, then m1). */
+export declare function multiply(m1: Mat, m2: Mat): Mat;
+export declare function translation(tx: number, ty: number): Mat;
+export declare function scaling(sx: number, sy: number): Mat;
+export declare function rotation(theta: number): Mat;
+export declare function invert(m: Mat): Mat;
+export declare function applyToPoint(m: Mat, p: Vec2): Vec2;
+/** Rotate point `p` by `theta` radians about `center`. */
+export declare function rotatePoint(p: Vec2, center: Vec2, theta: number): Vec2;
+export interface Layout {
+    width: number;
+    height: number;
+}
+export interface ImageSize {
+    width: number;
+    height: number;
+}
+/**
+ * The base fit scale used to "contain" the image inside the on-screen layout,
+ * before any user scene scale is applied.
+ */
+export declare function fitScale(image: ImageSize, layout: Layout): number;
+/**
+ * Compose the image→screen matrix:
+ *   M = T(center) · R(rotation) · S(fit·userScale) · T(-imageCenter)
+ *
+ * The on-screen Skia `<Group>` uses `sceneTransforms2d` (below), built from the
+ * SAME parameters, so the preview and this matrix stay in lock-step. Gestures
+ * use `invert(M)` to map screen touches back into image space.
+ */
+export declare function imageToScreenMatrix(scene: SceneTransform, image: ImageSize, layout: Layout): Mat;
+/**
+ * Skia `Transforms2d` array for the on-screen scene `<Group>`. Applied in order,
+ * this reproduces `imageToScreenMatrix` exactly.
+ */
+export declare function sceneTransforms2d(scene: SceneTransform, image: ImageSize, layout: Layout): {
+    translateX: number;
+}[] | object[];
+export declare function clampSizeToMax(width: number, height: number, maxSize?: number): {
+    width: number;
+    height: number;
+};
+/** Axis-aligned bounding box of a set of points. */
+export declare function boundsOfPoints(points: Vec2[]): Rect;
+export declare function rectCenter(r: Rect): Vec2;
+export declare function distance(a: Vec2, b: Vec2): number;
+/** Shortest distance from point `p` to segment `a`→`b`. */
+export declare function distanceToSegment(p: Vec2, a: Vec2, b: Vec2): number;
+//# sourceMappingURL=math.d.ts.map

package/lib/typescript/src/utils/math.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"math.d.ts","sourceRoot":"","sources":["../../../../src/utils/math.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAE3D,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,wBAAgB,QAAQ,IAAI,GAAG,CAG9B;AAED,mDAAmD;AACnD,wBAAgB,QAAQ,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,GAAG,GAAG,CAU9C;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,GAAG,CAGvD;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,GAAG,CAGnD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAK3C;AAED,wBAAgB,MAAM,CAAC,CAAC,EAAE,GAAG,GAAG,GAAG,CAelC;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAMlD;AAED,0DAA0D;AAC1D,wBAAgB,WAAW,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAUtE;AAED,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAMjE;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,GACb,GAAG,CAUL;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,GACb;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,EAAE,GAAG,MAAM,EAAE,CAYrC;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,GACf;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAWnC;AAED,oDAAoD;AACpD,wBAAgB,cAAc,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAiBnD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,CAGxC;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,MAAM,CAGjD;AAED,2DAA2D;AAC3D,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,MAAM,CAWnE"}

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "react-native-image-editor-skia",
+  "version": "0.1.0",
+  "description": "A Skia-powered image annotation & editing component for React Native (draw circles, arrows, markers, freehand, text; crop, resize, free-angle rotate; base64 in/out).",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "clean": "del-cli lib",
+    "prepublishOnly": "npm run typecheck",
+    "prepack": "bob build"
+  },
+  "keywords": [
+    "react-native",
+    "skia",
+    "image-editor",
+    "annotation",
+    "crop",
+    "draw",
+    "canvas",
+    "base64"
+  ],
+  "license": "MIT",
+  "author": "NG JUN KAI <jzng436@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YOUR_GITHUB_USERNAME/react-native-image-editor-skia.git"
+  },
+  "homepage": "https://github.com/YOUR_GITHUB_USERNAME/react-native-image-editor-skia#readme",
+  "bugs": {
+    "url": "https://github.com/YOUR_GITHUB_USERNAME/react-native-image-editor-skia/issues"
+  },
+  "peerDependencies": {
+    "@shopify/react-native-skia": ">=2.6.0",
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.6.0",
+    "react-native-worklets": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native-worklets": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@react-native/babel-preset": "^0.81.6",
+    "@react-native/eslint-config": "^0.81.0",
+    "@shopify/react-native-skia": "^2.6.6",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^19.0.0",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.57.0",
+    "jest": "^29.7.0",
+    "react": "19.1.0",
+    "react-native": "0.81.0",
+    "react-native-builder-bob": "^0.30.0",
+    "react-native-gesture-handler": "^2.20.0",
+    "react-native-reanimated": "^4.0.0",
+    "react-native-worklets": "^0.6.0",
+    "typescript": "^5.5.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/lib/"
+    ]
+  }
+}

package/src/ImageEditor.tsx

@@ -0,0 +1,133 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+} from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import type { SkImage } from '@shopify/react-native-skia';
+
+import type { ExportOptions, ImageEditorProps, ImageEditorRef } from './types';
+import { EditorProvider, useEditor } from './context/EditorContext';
+import { useLoadedImage } from './image/useLoadedImage';
+import { EditorCanvas } from './canvas/EditorCanvas';
+import { TextInputOverlay } from './toolbar/TextInputOverlay';
+import { Toolbar } from './toolbar/Toolbar';
+import { exportImage } from './export/exportImage';
+
+/**
+ * Interactive Skia image editor. Loads a base64/URI image, lets the user draw
+ * circles/arrows/markers/freehand/text, crop, free-rotate and resize, then
+ * exports full-resolution base64 (via ref `export()` or the built-in Done
+ * button + `onExport`).
+ */
+export const ImageEditor = forwardRef<ImageEditorRef, ImageEditorProps>(
+  function ImageEditor(props, ref) {
+    const { source, onError, style } = props;
+    const { image, width, height, loading, error } = useLoadedImage(source);
+
+    useEffect(() => {
+      if (error) {
+        onError?.(error);
+      }
+    }, [error, onError]);
+
+    if (error) {
+      return (
+        <View style={[styles.center, style]}>
+          <Text style={styles.errorText}>Failed to load image</Text>
+        </View>
+      );
+    }
+
+    if (loading || !image) {
+      return (
+        <View style={[styles.center, style]}>
+          <ActivityIndicator color="#FFFFFF" />
+        </View>
+      );
+    }
+
+    return (
+      <GestureHandlerRootView style={[styles.root, style]}>
+        <EditorProvider
+          imageSize={{ width, height }}
+          initialStrokeColor={props.initialStrokeColor}
+          initialTextColor={props.initialTextColor}
+          palette={props.palette}
+        >
+          <EditorBody ref={ref} image={image} {...props} />
+        </EditorProvider>
+      </GestureHandlerRootView>
+    );
+  }
+);
+
+interface EditorBodyProps extends ImageEditorProps {
+  image: SkImage;
+}
+
+const EditorBody = forwardRef<ImageEditorRef, EditorBodyProps>(
+  function EditorBody({ image, onExport, exportOptions, hideToolbar }, ref) {
+    const editor = useEditor();
+
+    const runExport = useCallback(
+      (options?: ExportOptions) =>
+        exportImage({
+          image,
+          annotations: editor.doc.annotations,
+          scene: editor.doc.scene,
+          imageWidth: editor.imageSize.width,
+          imageHeight: editor.imageSize.height,
+          options: options ?? exportOptions,
+        }),
+      [image, editor.doc, editor.imageSize, exportOptions]
+    );
+
+    useImperativeHandle(
+      ref,
+      (): ImageEditorRef => ({
+        export: runExport,
+        undo: () => editor.dispatch({ type: 'UNDO' }),
+        redo: () => editor.dispatch({ type: 'REDO' }),
+        canUndo: () => editor.canUndo,
+        canRedo: () => editor.canRedo,
+        reset: () => editor.dispatch({ type: 'RESET' }),
+      }),
+      [runExport, editor]
+    );
+
+    const onDone = useCallback(async () => {
+      const base64 = await runExport();
+      onExport?.(base64);
+    }, [runExport, onExport]);
+
+    return (
+      <View style={styles.root}>
+        <View style={styles.canvasWrap}>
+          <EditorCanvas image={image} />
+          <TextInputOverlay />
+        </View>
+        {hideToolbar ? null : <Toolbar onDone={onExport ? onDone : undefined} />}
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: '#000000' },
+  canvasWrap: { flex: 1, position: 'relative' },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#000000',
+  },
+  errorText: { color: '#FF6B6B', fontSize: 16 },
+});

package/src/annotations/AnnotationView.tsx

@@ -0,0 +1,24 @@
+import type { Annotation } from '../types';
+import { CircleAnnotationView } from './CircleAnnotation';
+import { ArrowAnnotationView } from './ArrowAnnotation';
+import { MarkerAnnotationView } from './MarkerAnnotation';
+import { FreehandAnnotationView } from './FreehandAnnotation';
+import { TextAnnotationView } from './TextAnnotation';
+
+/** Render any annotation by dispatching on its discriminant. */
+export function AnnotationView({ a }: { a: Annotation }) {
+  switch (a.type) {
+    case 'circle':
+      return <CircleAnnotationView a={a} />;
+    case 'arrow':
+      return <ArrowAnnotationView a={a} />;
+    case 'marker':
+      return <MarkerAnnotationView a={a} />;
+    case 'freehand':
+      return <FreehandAnnotationView a={a} />;
+    case 'text':
+      return <TextAnnotationView a={a} />;
+    default:
+      return null;
+  }
+}

package/src/annotations/ArrowAnnotation.tsx

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import { Path } from '@shopify/react-native-skia';
+
+import type { ArrowAnnotation as ArrowAnnotationType } from '../types';
+import { buildArrowPath } from './geometry';
+import { annotationCenter } from './geometry';
+import { RotatedGroup } from './RotatedGroup';
+
+export function ArrowAnnotationView({ a }: { a: ArrowAnnotationType }) {
+  const path = useMemo(
+    () => buildArrowPath(a.start, a.end, a.headSize),
+    [a.start, a.end, a.headSize]
+  );
+  return (
+    <RotatedGroup center={annotationCenter(a)} rotation={a.rotation}>
+      <Path
+        path={path}
+        color={a.strokeColor}
+        style="stroke"
+        strokeWidth={a.strokeWidth}
+        strokeCap="round"
+        strokeJoin="round"
+      />
+    </RotatedGroup>
+  );
+}

package/src/annotations/CircleAnnotation.tsx

@@ -0,0 +1,22 @@
+import { Circle } from '@shopify/react-native-skia';
+
+import type { CircleAnnotation as CircleAnnotationType } from '../types';
+import { RotatedGroup } from './RotatedGroup';
+
+export function CircleAnnotationView({ a }: { a: CircleAnnotationType }) {
+  return (
+    <RotatedGroup center={a.center} rotation={a.rotation}>
+      {a.fill ? (
+        <Circle cx={a.center.x} cy={a.center.y} r={a.radius} color={a.fill} />
+      ) : null}
+      <Circle
+        cx={a.center.x}
+        cy={a.center.y}
+        r={a.radius}
+        color={a.strokeColor}
+        style="stroke"
+        strokeWidth={a.strokeWidth}
+      />
+    </RotatedGroup>
+  );
+}

package/src/annotations/FreehandAnnotation.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { Path } from '@shopify/react-native-skia';
+
+import type { FreehandAnnotation as FreehandAnnotationType } from '../types';
+import { annotationCenter, buildFreehandPath } from './geometry';
+import { RotatedGroup } from './RotatedGroup';
+
+export function FreehandAnnotationView({ a }: { a: FreehandAnnotationType }) {
+  const path = useMemo(() => buildFreehandPath(a.points), [a.points]);
+  return (
+    <RotatedGroup center={annotationCenter(a)} rotation={a.rotation}>
+      <Path
+        path={path}
+        color={a.strokeColor}
+        style="stroke"
+        strokeWidth={a.strokeWidth}
+        strokeCap="round"
+        strokeJoin="round"
+      />
+    </RotatedGroup>
+  );
+}

package/src/annotations/MarkerAnnotation.tsx

@@ -0,0 +1,20 @@
+import { Rect } from '@shopify/react-native-skia';
+
+import type { MarkerAnnotation as MarkerAnnotationType } from '../types';
+import { annotationCenter } from './geometry';
+import { RotatedGroup } from './RotatedGroup';
+import { withOpacity } from '../utils/color';
+
+export function MarkerAnnotationView({ a }: { a: MarkerAnnotationType }) {
+  return (
+    <RotatedGroup center={annotationCenter(a)} rotation={a.rotation}>
+      <Rect
+        x={a.rect.x}
+        y={a.rect.y}
+        width={a.rect.width}
+        height={a.rect.height}
+        color={withOpacity(a.color, a.opacity)}
+      />
+    </RotatedGroup>
+  );
+}

package/src/annotations/RotatedGroup.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Group } from '@shopify/react-native-skia';
+
+import type { Vec2 } from '../types';
+
+/**
+ * Wraps children in a Skia Group rotated by `rotation` radians about `center`.
+ * Every annotation renderer uses this so its stored `rotation` is applied
+ * consistently (and identically in the off-screen export path).
+ */
+export function RotatedGroup({
+  center,
+  rotation,
+  children,
+}: {
+  center: Vec2;
+  rotation: number;
+  children: React.ReactNode;
+}) {
+  if (!rotation) {
+    return <>{children}</>;
+  }
+  return (
+    <Group origin={center} transform={[{ rotate: rotation }]}>
+      {children}
+    </Group>
+  );
+}