React Native not rendering annotation comments from external system

Product: Java SDK

Product Version:Latest

Please give a brief summary of your issue:
(Think of this as an email subject)
React Native not rendering annotation comments from external system

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
I am using java code to convert annotation data from external system to PDFTron recognizable format using PDFTron Java APIs. I am using setContents API to set the annotation contents. The problem is React Native component is not recognizing these comments and comments panel is not rendering the comments. But WebViewer component recognizes these comments. Also comments added in Web Viewer are rendered in React Native component so to check the difference I exported XFDF data and observed that WebViewer is adding trn-custom-data as shown below. Not sure how I can create this data using Java API and merge it to PDF. Could you please share sample code?

<square width="2.30415" color="#E44234" opacity="0.741306" creationdate="D:20210728131455-04'00'" flags="print" date="D:20210728131514-04'00'" name="75d3e377-90ba-5bff-6c90-fdafc69f43b5" page="1" rect="335.28,486.76,454.37,521.71" subject="Rectangle" title="mohan">
			<trn-custom-data bytes="{&quot;trn-mention&quot;:{&quot;contents&quot;:&quot;Mx Web markup&quot;,&quot;ids&quot;:[]}}" />
			<contents>Mx Web markup</contents>
		</square>

Please provide a link to a minimal sample where the issue is reproducible:

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:Forums:

Hi Mohan,

Can you explain clearly what it is you are trying to do and what issues you are facing? Are you using WebViewer or the React Native iOS component?

Are you trying to import annotations via XFDF into WebViewer?

The setContents API is used to set the contents (text) of certain annotations, not to import annotations.

Can you share an example of the XFDF you are trying to import into WebViewer?

Have you tried to use importAnnotations method in the annotation manager to import your comment annotations into WebViewer?

As a side note, the custom data you see should have no effect on importing/rendering comments; that is used for our Mentions API.

Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.

@Armando_Bollain,

I am getting PDF annotations data from an external application as JSON data so using PDFTron Java API I am converting this JSON data to XFDF format and merged directly with PDF document so that Web Viewer for web application and React Native component that I used for Native can directly render both PDF and annotations. Converted annotations and annotation comments are rendered properly in Web Viewer case but in Native annotations are rendered but comments panel is not showing any comments that came from external system.

I am using annotation.setContent() Java API to set the comments while adding annotations to PDF.

Please refer below sample annotations coming from external systems and annotations added using Web Viewer. React Native component is rendering Annotations added using web viewer but not annotations coming from external system

<annots>
	<square style="solid" width="1" color="#FF0000" creationdate="D:20210629185132Z" flags="print" date="D:20210629185156Z" page="1" fringe="0,0,0,0" rect="227.149,624.17,334.936,663.957" title="mohan">
			<contents>Sample external system annotation</contents>
	</square>
	<square page="1" rect="280.91,517.8299999999999,453.07,572.19" color="#E44234" flags="print" name="1ce4ab37-f4cc-35c2-0074-75d10db849dc" title="mohan" subject="Rectangle" date="D:20210729145330-04'00'" width="2.3041488712629654" opacity="0.7413057672897441" creationdate="D:20210729145315-04'00'">
		<trn-custom-data bytes="{&quot;trn-mention&quot;:{&quot;contents&quot;:&quot;Sample annotation using PDFTron Web Viewer&quot;,&quot;ids&quot;:[]}}"/>
		<contents>Sample annotation using PDFTron Web Viewer</contents>
	</square>
</annots>

@mohan.kathireddy

How are you integrating WebViewer into your React-Native application? Can you share a sample repository in Github where this issue can be reproduced?

I tried importing your annotation via XFDF and see the comments in WebViewer; there should be no difference between this and React-Native if you are embedding the WebViewer component in your application.

Armando B.

@Armando_Bollain

I am not integrating Web Viewer into React Native application they both are two different Apps and connect to same data source and save the annotations to same data source. That means Web App can read the Annotations added by Native App and vice versa. Hope it is clear?

Hi Mohan,

Just so we are on the same page, can you send me a link of which PDFTron SDK you are using for React Native? This will help narrow this issue and assign to the correct team.

Armando

I am using PDFTron React Native API from following github GitHub - PDFTron/pdftron-react-native: A convenience wrapper for building react native apps with PDFTron mobile SDK.

Hi Mohan, it looks like you need to use Annotation Mention feature? If so, this is not supported on mobile. May I ask if this is blocking your release? As this is a feature request, please submit a proper feature request ticket here: https://www.pdftron.com/form/feature-request/

@Shirley_Gong ,

I am not looking for Annotation mention feature. My issue is Comments panel in Mobile App is not showing the comments added to annotation using PDFTron Java API but mobile app is able to render comments added to annotation using Web Viewer in my web application. So I did an XFDF comparison between Web Viewer annotation and annotation created using PDFTron java API and I observed that there is no difference in annotation data and only difference is mention tag as shown above so I guessed that React Native App might require this tag to be set for annotation. If my understanding is wrong then could you please point me to a Java API that I should use to set the annotation comments. As explained above I am already using annotation.setContent looks like React Native component is not recognizing the comments set using this API.

If the my issue still not clear then can we have a quick call so that I can demonstrate the issue.

Hi @mohan.kathireddy Could you please share a screenshot of what you see on web and what you need on mobile that is not showing up. Also could you attach the actual PDF file? Thanks.

@Shirley_Gong ,

Please find below details. From comments you can figure out which annotation is added in external system and which one is using Web Viewer.

Web Viewer

Annotations rendered in Native Mobile App

Native Mobile App showing only Web Viewer comments

Please find attached PDF document that has both annotations with comments
BusinessCardTemplate.pdf (18.5 KB)

@Shirley_Gong ,

Do you have any update on this issue?

Hi @mohan.kathireddy

In this case, the XFDF for the square annotation from the external system should have a “name” attribute similar to the square annotation from Web Viewer. This attribute is required to uniquely identify the annotation, so if it is missing then it will not be properly displayed in the annotation list.

Could you try adding a “name” attribute to your external annotation in the XFDF before importing it in to the PDF?

Best Regards,
Branden

Thank you.
Could you please share a sample code to set name and also code to generate the name value

Upon further discussion, it’s possible on our end to add some logic to generate the ID if it does not exist. This way you do not need to implement any code to parse/edit XMLs, which could be troublesome on your end.

Could you tell us if this issue is blocking you or any timelines you may have? Also, if you would like to move this conversion to an internal ticket, please feel free to create a ticket here: https://www.pdftron.com/company/contact-us/

In any case, I will update you ASAP when this is ready.

Best Regards,
Branden

Hi @mohan.kathireddy ,

We’ve update the master branch of the PDFTron React Native library to support missing IDs (name attribute) when importing XFDFs. You can check out the specific commit here: [Android] Update to latest stable · PDFTron/pdftron-react-native@f6dc8e6 · GitHub

Could you update to the latest master and give it a try?