Validate signature fields on React Native

Hello,
I’m trying to implement PDFTron viewer on React Native framework using the library mentioned in the documentation “react-native-pdftron”, and as part of the implementation, I wish to use validation on signature fields (for example to validate that those fields are filled - the content is not really important).

Hoping that this is not a duplicated issue but I couldn’t find anything around React native, the only thing I found was an IOS/Android snippets only and they are not fitted to React Native.

Thanks :slight_smile:

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hi,

Currently the API for iterating through fields and checking signature state is not supported on React Native.

Could you elaborate in detail your use case for this, and how you are using signature validation in your app? In this case, I assume you are referring to e-signatures?

Hi,

The use case is such:
I want to be able to send a user a file that he can sign on e-signature fields on his mobile device ( which I’m currently using React Native) and as part of the UI/UX there is a button that is responsible for sending me back the filled file ( with the e-signature content) but I want it to be enabled only if all the e-signature fields are filled ( this is why I want to be able to validate e-signature fields).

Thanks for replying :slight_smile:

Thanks for the additional information.

We currently have API to iterate through annotations on a page: https://github.com/PDFTron/pdftron-react-native/blob/master/API.md#getannotationsonpage. We could potentially add something similar for Fields, which will include information on whether the field is signed.

Would this suit your use case?

Hi again,

I prefer not to iterate using the snippet provided (https://github.com/PDFTron/pdftron-react-native/blob/master/API.md#getannotationsonpage) because there is a need to pass several parameters such as page number, location, etc…, which in my case, I do not iterate using page number, coordinations.

I want to be able to do something as such:


import {DocumentView} from 'react-native-pdftron';

const MyComponent = () => {

useEffect(()=>{

(async()=>{

const {current: viewerInstance} = viewer as any;

const mySignature = await viewerInstance.getField(MY_SIGNATURE_FIELD_NAME)

// Here I would like to be able to validate that the eSignature is filled - this can be a property or a method.

// Example 1 :

console.log(mySignature.isSigned) -> returns a boolean

// Example 2 :

console.log(mySignature.isSigned()) -> returns a boolean

})()

},[viewer])

return (

<DocumentView

ref={viewer as any}

document={document}

/>)

}

Please note that in the following use case I would like to get a falsy value:

  1. User receives a document.
  2. User signing the document → in this case I would expect to get a “true” value.
  3. User removes the signature-> in this case I would expect to get a “false” value
const fields = await viewer.getFields()

Hi,

We have updated our React Native SDK to include a function called getAllFields()
You can use this function to loop per page and check if the signature is filled, please see example code below:

   this._viewer.getAllFields(1).then((fields) => {
      fields.forEach(field => {
        if(field.fieldType === 'signature'){
          console.log('The signature field is signed or not: ', field.fieldHasAppearance);
        }
      });
    });

Best Regards,
Eamon

Hi, page number is now an optional param (https://github.com/PDFTron/pdftron-react-native/pull/507), you can use getAllFields() to go through all pages now. Thanks.

Hi again,
Thank you so much for all the replies and for implementing my requested features.

The “getAllFields” works perfectly but I think that there is a bug or miss understanding about the behavior of"field.fieldHasAppearance" ( as mentioned above) because it returns true in a case in which there is a signature field although it wasn’t signed and I wanted to be able to identify if it was signed or not ( doesn’t matter the content/ value of the signature I just want to know if it was signed because I want to be able to let the client send back the document only if all of the signature fields have been signed/filled).

Thanks a lot :slightly_smiling_face:

Thanks for letting us know about this. This could be a bug.

Could you try on Android and let us know if this issue also occurs? Also, would it be possible if you could send us your PDF so we can take a closer look?

It occurs on Android as well.
The document was created through Create & View PDF Form Data | Online Demo | PDFTron WebViewer

  1. Add a signature field.
  2. Apply field.
  3. Download the file.

Thanks for the additional information. It seems there is something particular about the document created from WebViewer. I’ll have to take a closer look in to this issue and I’ll update you ASAP when I have more information.

Could you tell us if this is blocking you or any timelines you may have?

@sefi

Just to clarify, are you interested in signing documents using cryptographic Digital Signatures (which require a certificate and a private key), or in only the visual signing component (i.e. signature appearance added to signature fields)?

For reference, here is some more information about Digital Signatures: PDFTron

Hi again :slight_smile:

This issue is not currently blocking me but it will be in about a month.
About the signature type, I only want to use the e-Signature field without setting any certificate “i.e. signature appearance added to signature fields”.

Thank you :pray:

Hi @sefi just wanted to update you that we’ve narrowed down the issue and it’s an issue with default signature field on Web. We’ll update you again when there is any update on the fix. But you will need to update your web client once that happens and the mobile clients will remain the same. Thanks.

Hi @sefi just letting you know that this fix will be in the next official release of WebViewer (likely 8.5). Do note that the change will only be in effect when creating field with the new version.

Thanks.