This library adds basic drawing capabilities for your apps. It features a ready to use Signature Pad
and an [EDS](https://loop.equinor.com/en/stories/eds-design-system) themed Image Markup tool. The
library also exposes functionality for creating your own solution.
## 🖌️ How to use
The library currently exposes two ready-made (reffered to as premades) solutions.
### 🖋️ Signature Pad
The Signature Pad component comes with a signature field, a clear button and the ability to create
snapshots. A simple implementation looks like this:
```tsx
import { Button } from "react-native";
import { SignaturePad, CanvasImageControls } from "@equinor/react-native-skia-draw";
import { SkiaDrawSnapshot } from "@equinor/react-native-skia-draw/dist/types";
const MySignaturePad = () => {
const drawRef = useRef(null);
const [myImage, setMyImage] = useState();
const takeSnapshot = () => {
if (drawRef.current?.makeImageSnapshot) {
const result = drawRef.current.makeImageSnapshot();
setMyImage(result);
}
};
return (
<>
<>
);
};
```
---
### 👩🎨 Image Markup
The Image Markup component comes with a simple control panel for some markup operations (stroke
size, color selection, clear and undo), and the ability to draw on top of an imported image. A
simple implementation looks like this:
```tsx
import { Button } from "react-native";
import { ImageMarkup, CanvasImageControls } from "@equinor/react-native-skia-draw";
import { SkiaDrawSnapshot } from "@equinor/react-native-skia-draw/dist/types";
const MyImageMarkup = ({
myImageAsAnEncodedString,
}:
{
myImageAsAnEncodedString: string;
}) => {
const drawRef = useRef(null);
const [myImage, setMyImage] = useState();
const takeSnapshot = () => {
if (drawRef.current?.makeImageSnapshot) {
const result = drawRef.current.makeImageSnapshot();
setMyImage(result);
}
};
return (
<>
<>
);
};
```
## ⚙️ Installation
[React Native Skia](https://shopify.github.io/react-native-skia/) is listed as a peer deendency to
this project. This means you will have to install an appropriate version of this on your own. Please
refer to the
[React Native installlation guide](https://shopify.github.io/react-native-skia/docs/getting-started/installation)
for information on how to do this.
### 🕸️ Web support
Note that React Native Skia has an own setup process for working on the web. Make sure to follow
this when adding any solution from this packace to your React Native web project.
## Custom implementations
In addition to the premades listed above, this library also lets you create your own design using
your own components to control the canvas. Start by making sure that you wrap both your control
panel and the canvas inside a `CanvasControlProvider`:
```tsx
import { CanvasControlProvider, Canvas } from "@equinor/react-native-skia-draw";
export const MyCustomControlledCanvas = () => (
);
```
Then, in your custom control panel, tap into the canvas using the controls exported from the
`useCanvasControl()` hook:
```tsx
import { useCanvasControl } from "@equinor/react-native-skia-draw";
export const MyCustomControlPanel = () => {
const {
toolColor,
setToolColor,
strokeWeight,
setStrokeWeight,
toolType,
setToolType,
text,
setText,
font,
undo,
clear,
} = useCanvasControl();
return <>{/* custom ui here */};
};
```
---
_Source: https://npm.io/package/@equinor/react-native-skia-draw · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
