Show Annotations in a panel by category - React Native

Technical Support Apryse SDK
1

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

image
image367×815 25.6 KB

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?

2

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

3

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?

4

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

5

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.

6

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