feat(annotation): support imperative changes

Author: alpha0010

android/src/main/java/com/alpha0010/pdf/PdfViewManager.kt

@@ -91,6 +91,11 @@ class PdfViewManager(private val pdfMutex: Lock) : SimpleViewManager<PdfView>(),
   @ReactProp(name = "source")
   override fun setSource(view: PdfView, source: String?) = view.setSource(source ?: "")
 
+  override fun imperativeApplyAnnotation(view: PdfView, annotation: String) {
+    view.setAnnotation(annotation, file = false)
+    view.renderPdf()
+  }
+
   companion object {
     const val NAME = "PdfView"
   }

ios/PdfView.mm

@@ -86,6 +86,15 @@ - (void)updateState:(const facebook::react::State::Shared &)state oldState:(cons
     [super updateState:state oldState:oldState];
 }
 
+- (void)handleCommand:(nonnull const NSString *)commandName args:(nonnull const NSArray *)args {
+    RCTPdfViewHandleCommand(self, commandName, args);
+}
+
+- (void)imperativeApplyAnnotation:(NSString *)annotation
+{
+    [_view updatePropsWithAnnotStr:annotation];
+}
+
 Class<RCTComponentViewProtocol> PdfViewCls(void)
 {
     return PdfView.class;

ios/PdfView.swift

@@ -47,6 +47,13 @@ public class PdfView: UIView {
         dispatcher(nextWidth, nextHeight)
     }
 
+    @objc public func updateProps(annotStr: String) {
+        if annotationStr != annotStr {
+            annotationStr = annotStr
+            renderPdf()
+        }
+    }
+
     @objc public func updateProps(annot: String, annotStr: String, pg: Int, rsMd: ResizeMode, src: String) {
         var isDirty = false
         var needsMeasure = false

src/PdfView.tsx

@@ -1,11 +1,11 @@
-import { useCallback } from 'react';
+import { useCallback, useImperativeHandle, useRef } from 'react';
 import type {
   LayoutChangeEvent,
   NativeSyntheticEvent,
   ViewStyle,
 } from 'react-native';
 
-import PdfViewNative from './PdfViewNativeComponent';
+import PdfViewNative, { Commands } from './PdfViewNativeComponent';
 import { asPath } from './Util';
 
 export type ErrorEvent = { message: string };
@@ -14,6 +14,8 @@ export type LoadCompleteEvent = { height: number; width: number };
 
 export type ResizeMode = 'contain' | 'fitWidth';
 
+export type PdfViewRef = { setAnnotation(annotation: string): void };
+
 export type PdfViewProps = {
   /**
    * PAS v1 annotation JSON string.
@@ -49,6 +51,8 @@ export type PdfViewProps = {
    */
   page: number;
 
+  ref?: React.RefObject<PdfViewRef | null>;
+
   /**
    * How pdf page should be scaled to fit in view dimensions.
    *
@@ -79,6 +83,16 @@ export type PdfViewProps = {
 export function PdfView(props: PdfViewProps) {
   const { onError, onLayout, onLoadComplete } = props;
 
+  const nativeRef = useRef<React.ComponentRef<typeof PdfViewNative>>(null);
+
+  useImperativeHandle(props.ref, () => ({
+    setAnnotation: (annotation: string) => {
+      if (nativeRef.current != null) {
+        Commands.imperativeApplyAnnotation(nativeRef.current, annotation);
+      }
+    },
+  }));
+
   const onPdfError = useCallback(
     (event: NativeSyntheticEvent<ErrorEvent>) => {
       if (onError != null) {
@@ -104,6 +118,7 @@ export function PdfView(props: PdfViewProps) {
       onPdfError={onPdfError}
       onPdfLoadComplete={onPdfLoadComplete}
       page={props.page}
+      ref={nativeRef}
       resizeMode={props.resizeMode}
       source={asPath(props.source)}
       style={props.style}

src/PdfViewNativeComponent.ts

@@ -1,8 +1,5 @@
-import {
-  codegenNativeComponent,
-  type CodegenTypes,
-  type ViewProps,
-} from 'react-native';
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeCommands, codegenNativeComponent } from 'react-native';
 
 export type ErrorEvent = { message: string };
 
@@ -23,6 +20,17 @@ interface NativeProps extends ViewProps {
   source: string;
 }
 
+interface NativeCommands {
+  imperativeApplyAnnotation(
+    viewRef: React.ElementRef<HostComponent<NativeProps>>,
+    annotation: string
+  ): void;
+}
+
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['imperativeApplyAnnotation'],
+});
+
 export default codegenNativeComponent<NativeProps>('PdfView', {
   interfaceOnly: true,
 });

src/index.ts

@@ -4,6 +4,7 @@ export type {
   ErrorEvent,
   LoadCompleteEvent,
   PdfViewProps,
+  PdfViewRef,
   ResizeMode,
 } from './PdfView';