search

Charanor / react-native-highlight-overlay

A tinted overlay that allows one or more elements to be highlighted (non-tinted).
MIT License
41 stars 6 forks source link

Wrong highlighted element when using scrollTo method of Scroll View #10

Open deyanskiq opened 2 years ago

deyanskiq commented 2 years ago

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)

Screenshot 2022-05-09 at 16 21 51
Charanor commented 2 years ago

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 commented 1 month ago

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 commented 1 month ago

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.