# Annotation

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

Use annotation to draw over shared content. Both the user who is sharing and viewers can annotate during screen sharing.

You must set up [screen sharing](/docs/video-sdk/react-native/share/) before you can use annotation.

## Check whether the SDK supports annotation

Before you use annotation, confirm that the SDK supports the annotation feature.

```javascript
const zoom = useZoom();

// To check if annotation feature is supported
const isSupported = await zoom.shareHelper.isAnnotationFeatureSupport();

// If you are the share owner, you can check if your viewer has annotation rights.
const isDisabled = await zoom.shareHelper.isViewerAnnotationDisabled();

// If you are the share owner, you can enable or disable your viewer from annotation rights.
await zoom.shareHelper.disableViewerAnnotation(true); // disable
await zoom.shareHelper.disableViewerAnnotation(false); // enable

// Callback to listen to changes in annotation privilege
const annotationPrivilegeChange = zoom.addListener(
    EventType.onAnnotationPrivilegeChange,
    (params) => {
        const isEnabled = params.shareAction.isAnnotationPrivilegeEnabled;
    },
);
```

If the SDK supports it, continue. Be sure to set up [screen sharing](/docs/video-sdk/react-native/share/) first.

## Start and stop annotation

Annotation draws over the shared content, so the viewer must already be rendering the shared stream before starting. Render the shared view with `VideoView` by setting `sharing` to `true`. For details, see [Video](/docs/video-sdk/react-native/video/) and [Screen sharing](/docs/video-sdk/react-native/share/).

After you render the shared view, get the annotation helper from the SDK instance with `zoom.annotationHelper`. Confirm that you have annotation privileges before you start.

```javascript
// Get the annotation helper from the SDK instance.
const annotationHelper = zoom.annotationHelper;

// Check for permission before starting.
const canAnnotate = await annotationHelper.canDoAnnotation();

if (canAnnotate) {
    // Start annotation.
    await annotationHelper.startAnnotation();

    // Stop annotation later.
    await annotationHelper.stopAnnotation();
}
```

## Annotation tools

The SDK provides a list of annotation tools. [`AnnotationToolType`](https://marketplacefront.zoom.us/sdk/custom/reactnative/enums/native_ZoomVideoSdk.AnnotationToolType.html) lists the full set of tools.

```javascript
// Constants of AnnotationToolType
AnnotationToolType.None;
AnnotationToolType.Pen;
AnnotationToolType.HighLighter;
AnnotationToolType.AutoLine;
AnnotationToolType.AutoRectangle;
AnnotationToolType.AutoEllipse;
AnnotationToolType.AutoEllipseFill;
AnnotationToolType.AutoRectangleFill;
AnnotationToolType.SpotLight; // not supported for viewers
AnnotationToolType.Arrow;
AnnotationToolType.ERASER;
AnnotationToolType.Picker; // not supported for viewers
AnnotationToolType.AutoArrow;
AnnotationToolType.AutoRectangleSemiFill;
AnnotationToolType.AutoEllipseSemiFill;
AnnotationToolType.AutoDoubleArrow;
AnnotationToolType.AutoDiamond;
AnnotationToolType.AutoStampArrow;
AnnotationToolType.AutoStampCheck;
AnnotationToolType.AutoStampX;
AnnotationToolType.AutoStampStar;
AnnotationToolType.AutoStampHeart;
AnnotationToolType.AutoStampQm;
```

Upon selecting the tool, the user can also get or set the current tool's color or width.

```javascript
// Get/set tool type
const toolType = await annotationHelper.getToolType();
await annotationHelper.setToolType(AnnotationToolType.Pen);

// Get/set tool's color - hex string
const toolColor = await annotationHelper.getToolColor();
await annotationHelper.setToolColor("#FF0000");

// Get/set tool's width - number
const toolWidth = await annotationHelper.getToolWidth();
await annotationHelper.setToolWidth(5);
```

## Other annotation methods

You can also undo or redo annotations. And you can clear all annotations, just your own, or just others' annotations.

```javascript
await annotationHelper.undo();
await annotationHelper.redo();
await annotationHelper.clear(AnnotationClearType.All); // All, My, Others
```

For details, see the [`ZoomVideoSdkAnnotationHelper`](https://marketplacefront.zoom.us/sdk/custom/reactnative/classes/native_ZoomVideoSdkAnnotationHelper.ZoomVideoSdkAnnotationHelper.html) class reference.