I’m working on a proof-of-concept for signing documents within a ReactNative app and I hit a snag that I’m hoping for some help with.
I have things wired up to the point where the PDF is loaded, the annotations are displayed and the user can provide a signature. Where I’m stuck at right now, is trying to figure out which .pdf file containing the signatures to use for the field.
The code below shows a slimmed down version of what I’m currently testing.
import { AnnotOptions, DocumentView, RNPdftron } from "@pdftron/react-native-pdf";
import React, { Component } from "react";
const licenseKey = "<redacted>";
const path = "<redacted>";
type Props = {};
type FormFieldValueChangedEvent = { fields: Array<AnnotOptions.Field> };
export default class App extends Component<Props> {
static documentViewer: DocumentView | null;
constructor(props: Props) {
super(props);
RNPdftron.initialize(licenseKey);
RNPdftron.enableJavaScript(true);
}
render() {
return (
<DocumentView
document={path}
ref={(instance) => {
App.documentViewer = instance;
}}
onFormFieldValueChanged={async (event: FormFieldValueChangedEvent) => {
for (const i of event.fields) {
if (i.fieldType === "signature") {
const signatures = await App.documentViewer?.getSavedSignatures();
if (!signatures) {
return;
}
for (const pdfPath of signatures) {
console.log("Is this the correct one to use?", pdfPath);
}
}
}
}}
/>
);
}
}
If the user created a new signature, it’s pretty easy to identify which one to use (most recently created), but if there are three signature annotations in a document and they chose to draw new signatures for the first two, but choose an existing one for the third, how will I know which one they chose? Is there a lookup table that I can reference? Is there a better place to handle these events that includes the field name and path to the signature the user chose?
Thanks in advanced,
Ben