Show Annotations in a panel by category - React Native

Hi,
As shown below default annotation panel with react native shows annotations based on date

But my requirement is to show the annotations based on different categories like by date, page, user, etc… Want to know how this can be implemented with PDFTron react native. Any sample code is appreciated?

Hi Mohan,

Thanks for contacting us about this request and for the detailed information.
Currently, we support date/page categories.
This page cannot be customized from React Native,
however, it is possible to customize it in Native code,
alternatively, you could build a list of your own in React Native.

To better understanding your requirement,
could you please send us a mockup of the end result you’d like to see?
Thanks.

Best Regards,
Saeed Bazzaz
Developer
PDFTron Systems, Inc.

CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.

Thanks for clarifications. I understand its possible with Native code. I am not sure how can I hook it to the top/bottom tool bar added by PDFTron. Do you have any sample if I build such functionality how to hook with PDFTron’s DocumentView toolbar? Also any suggestion or sample code to add custom button/menu option to toolbar?

Hi Mohan,

Thanks for contacting us about this request.
Are you referring to override one of the existing toolbar button,
such as the list button, to open your own Annotation List?

Currently it is possible to define the toolbars via “annotationToolbars” and “bottomToolbar” prop
(pdftron-react-native/API.md at master · PDFTron/pdftron-react-native · GitHub)
Thanks.

Best Regards,
Saeed Bazzaz
Developer
PDFTron Systems, Inc.

CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.

Yes your understanding is partially correct. I already went through annotationToolbars, its expecting constants defined in Config but not sure how I can add my own custom button or menu option to this toolbar. Lets say I want to add Save button on the toolbar. When the user clicks on this save button I will call external service to save the PDF document.

Hi Mohan,

Thanks for contacting us about this request.
In react native, the best way is to add this outside of the viewer, i.e. as an overlay on top of the viewer,
so it will work on both iOS and Android.
Or it can be placed on top of the viewer and hiding the existing top toolbar based on your requirement.
Thanks.

Best Regards,
Saeed Bazzaz
Developer
PDFTron Systems, Inc.

CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.