Annotation tool default style on React Native

Technical Support
,
1

Product:“@pdftron/react-native-pdf”: “^3.0.4-21”,

Product Version:“@pdftron/react-native-pdf”: “^3.0.4-21”,

Please give a brief summary of your issue:
Cannot give default styles on annotation tools on React Native

Please describe your issue and provide steps to reproduce it:
We want to assign default styles (background color on text annotation etc) to annotation tools, but it is not supported by default. We are using React Native Expo

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

3

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


When working with annotations in React Native using the Apryse SDK, you can set default styles for annotations by configuring the viewer settings. Unfortunately, setting default styles directly through the @pdftron/react-native-pdf package might not be straightforward as it doesn’t provide this functionality out-of-the-box. However, you can achieve this by programmatically setting styles once an annotation is created.

Some things you can try:

  • Use the onAnnotationChanged event to detect when an annotation is created and apply your desired styles.

  • Consider setting default styles through native code if your app uses custom native modules.

  • Explore using XFDF to pre-define annotation styles and import them once the document is loaded.




Here are some resources that might help you:



Hopefully, this helps you solve your problem while you wait for a human to get back to you.

4

Thank you for reaching out through our forum. For the use case you’re trying to accomplish, you’ll need to make your customizations natively.

For Android: https://docs.apryse.com/android/guides/basics/tools/tool-style

For iOS: https://docs.apryse.com/ios/guides/advanced/customize-color-picker

Please let me know if this helps address your concern.

5

Hey,

Thanks for reply.

I decided to go with first suggestion which is updating annotation after creation. But I saw 1 issue here.

I got this in event:

{
    "contentRect": {
        "height": 25.520945220193425,
        "width": 88.39999999999998,
        "x1": 269.45,
        "x2": 357.84999999999997,
        "y1": 228.8378088077336,
        "y2": 254.35875402792703
    },
    "contents": "test content",
    "rect": {
        "height": 25.520945220193425,
        "width": 88.39999999999998,
        "x1": 269.45,
        "x2": 357.84999999999997,
        "y1": 228.8378088077336,
        "y2": 254.35875402792703
    },
    "strokeColor": {
        "blue": 0,
        "green": 0,
        "red": 0
    },
    "title": "User"
}

But this data does not tell me that stroke color is transparent. Even in transparent, it returns black as you can see.

Can you check that?

Thanks

6

Thank you for your response. In order to best assist you, would you be able to thoroughly describe your use-case and what you are trying to achieve? What is your goal exactly, so that we may best advise. I look forward to your response.

7

Hey there,

Thanks for reply.

Actually when users annotate on pdf, (especially if they use Config.Tools.annotationCreateFreeText), it is overlapping with text on pdf. So we are trying to set default white background if added/modified annotation has transparent background, so users can see added annotation clearly.
Thanks

8

Thank you for your response. Please note that these customizations would have to be done fully natively. The provided guides should help with the desired customizations. Are there any issues with this working on your end? Any further information provided would be greatly beneficial to my investigation. I look forward to your response.

1 Like