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?
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="{"trn-mention":{"contents":"Sample annotation using PDFTron Web Viewer","ids":[]}}"/>
<contents>Sample annotation using PDFTron Web Viewer</contents>
</square>
</annots>
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.
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?
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.
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/
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.
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?
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.
