expo-native-draw

A react native package that draws on a canvas

Installation

npm install expo-native-draw

Usage

import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import DrawingCanvas from 'drawing-canvas';

const MyDrawingCanvas = () => {
  const drawingCanvasRef = useRef(null);

  const handleUndo = () => {
    drawingCanvasRef.current.undo();
  };

  const handleRedo = () => {
    drawingCanvasRef.current.redo();
  };

  const handleClear = () => {
    drawingCanvasRef.current.clear();
  };

  return (
    <View style={{ flex: 1 }}>
      <DrawingCanvas strokeColor='red' ref={drawingCanvasRef} />
      <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
        <Button title="Undo" onPress={handleUndo} />
        <Button title="Redo" onPress={handleRedo} />
        <Button title="Clear" onPress={handleClear} />
      </View>
    </View>
  );
};

export default MyDrawingCanvas;

Props:

• strokeColor: (Optional): The color of the drawing strokes. Default is #000.

• width: (Optional) The width of the canvas. Default is '100%'.

• height: (Optional) The height of the canvas. Default is '100%'.

Ref Methods:

The DrawingCanvas component exposes the following methods through a ref:

• undo(): Undo the last drawing action.

• redo(): Redo the previously undone drawing action.

• clear(): Clear the entire canvas.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library