how to scroll to active element in "rn-tourguide" in react Native

Question

I want to scrollTo the active element

I am using below package for walkthrough, but this is not working in my case, and not scrolling to the actual position to the my element,

https://www.npmjs.com/package/rn-tourguide

Any Idea, how can I scroll to exact position of my current active walkthrough element

for scroll container, I am using (https://reactnative.dev/docs/scrollview)

Answer 1

so what solution i can give you is based on assumption you know (via code) whats your current active element.

If you know that, you need to have refs for every comp in which this tour guide will be displayed.

After that once you have ref, when its focused you can call

newRef?.current?.measureInWindow( (fx, fy, width, height, px, py) => {
            console.log('Component width is: ' + width)
            console.log('Component height is: ' + height)
            console.log('X offset to frame: ' + fx)
            console.log('Y offset to frame: ' + fy)
            console.log('X offset to page: ' + px)
            console.log('Y offset to page: ' + py)

        
        })        
  }

To get exact position of the elemnt wrt to page and event the device:

You can check my answer here dynamically position

you can reuse that logic here :)

Hope it helps. feel free for doubts