@darthrapid/react-native-simple-canvas

A simple, lightweight drawing canvas for React Native with SVG-based rendering. Supports freehand drawing, undo/redo, manual and auto-capture to image, customizable stroke styles, and initial image display.

Installation

bun add @darthrapid/react-native-simple-canvas

Peer dependencies

This library requires the following peer dependencies:

bun add react-native-svg react-native-view-shot

Usage

import { useRef } from 'react';
import { View, Button } from 'react-native';
import { SimpleCanvas, type SimpleCanvasRef } from '@darthrapid/react-native-simple-canvas';

export default function App() {
  const canvasRef = useRef<SimpleCanvasRef>(null);

  return (
    <View style={{ flex: 1 }}>
      <SimpleCanvas
        ref={canvasRef}
        height={400}
        strokeColor="#000000"
        strokeWidth={3}
      />
      <Button title="Undo" onPress={() => canvasRef.current?.undo()} />
      <Button title="Redo" onPress={() => canvasRef.current?.redo()} />
      <Button title="Clear" onPress={() => canvasRef.current?.clear()} />
    </View>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | height | number | 300 | Canvas height | | width | DimensionValue | "100%" | Canvas width | | strokeColor | string | "#000000" | Active stroke color | | strokeWidth | number | 3 | Active stroke width | | strokeLineCap | "butt" \| "round" \| "square" | "round" | Stroke line cap | | strokeLineJoin | "bevel" \| "miter" \| "round" | "round" | Stroke line join | | backgroundColor | string | "#FFFFFF" | Canvas background color | | captureFormat | "jpg" \| "png" | "jpg" | Default capture format | | captureQuality | number | 0.8 | Default capture quality (0-1) | | autoCapture | boolean | false | Auto-capture after every stroke | | autoCaptureDelay | number | 400 | Debounce ms for auto-capture | | onCapture | (uri: string) => void | - | Called after auto-capture | | onStrokeStart | () => void | - | Called when a stroke starts | | onStrokeEnd | (stroke: StrokeData) => void | - | Called when a stroke ends | | onStrokesChange | (strokes: StrokeData[]) => void | - | Called on any strokes change | | initialImage | string | - | Image URI displayed when canvas has no strokes | | disabled | boolean | false | Disable touch input | | style | StyleProp<ViewStyle> | - | Outer wrapper style | | canvasStyle | StyleProp<ViewStyle> | - | Inner drawing surface style |

Ref methods

| Method | Description | |--------|-------------| | capture(options?) | Capture canvas as image. Returns a file URI. | | undo() | Undo the last stroke | | redo() | Redo a previously undone stroke | | clear() | Clear all strokes | | getStrokes() | Get all recorded strokes | | setStrokes(strokes) | Load strokes programmatically |

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT