Wrong highlighted element when using scrollTo method of Scroll View

[deyanskiq]

I'm trying to implement an overlay tutorial with highlighting on different components of a scrollable home page.

When scrolling the home page (using a combination of scroll view reference and scrollTo method), the highlighted element is not the correct one. Its position offset is equal to the distance from how much the screen was scrolled down.

Attaching a screenshot (red squared is the expected position)

[Charanor]

Can you show me your code? Is the overlay inside the scroll view also? If not; can you try to place the overlay inside the scroll view?

[davidteejay]

I'm experiencing this too. I put the overlay as the last item in the scroll view, and added a delay in highlighting the element until after scrollTo is done. After scrolling and setting the highlight, the highlight is placed in the wrong place

[Charanor]

I'm experiencing this too. I put the overlay as the last item in the scroll view, and added a delay in highlighting the element until after scrollTo is done. After scrolling and setting the highlight, the highlight is placed in the wrong place

Without a minimal verifiable code example it's hard to debug and help.

Also did you check these two steps in the README?

1. In certain setups, the position of the highlighted element might be off by a fraction. If this happens to you, set the rootRef of HighlightableElementProvider manually to the root element of your app. However in most circumstances this is not necessary.
2. If your HighlightedElement is inside a scroll view (like in the demo video above) the HighlightOverlay must also be inside the scroll view, otherwise the highlighted element will not properly overlay the "root" element. This is because of how React Native handles measuring positions & sizes. I'm working on possible fixes to make this more user-friendly.