Scroll to step off screen about rn-tourguide HOT 3 OPEN

Is it possible on step change to scroll to a specific item in ScrollView? We are using rn-tourguide in our app, however as the app has grown some of the items in our onboarding are no longer visible on initial load without scrolling down, especially on smaller screens.

same here, need solution

from rn-tourguide.

===>>> pass ref to scrollview
const scrollViewRef = useRef(null);

===>>> get use eventEmitter
const { canStart, start, eventEmitter } = useTourGuideController()

useEffect(() => {
eventEmitter.on('stepChange', handleOnStepChange)
}, [])

===>>> manage to scrolling by steps

const handleOnStepChange = (step: any) => {
if (step && step.order === 7 && scrollViewRef.current) {
scrollViewRef.current.scrollToEnd({ animated: true });
} else if (step && step.order === 6 && scrollViewRef.current) {
scrollViewRef.current.scrollTo({ y: _w(45), animated: true });
} else {
scrollViewRef.current.scrollTo({ y: -1000, animated: true });
}
}

from rn-tourguide.

===>>> pass ref to scrollview const scrollViewRef = useRef(null);

===>>> get use eventEmitter const { canStart, start, eventEmitter } = useTourGuideController()

useEffect(() => { eventEmitter.on('stepChange', handleOnStepChange) }, [])

===>>> manage to scrolling by steps

const handleOnStepChange = (step: any) => { if (step && step.order === 7 && scrollViewRef.current) { scrollViewRef.current.scrollToEnd({ animated: true }); } else if (step && step.order === 6 && scrollViewRef.current) { scrollViewRef.current.scrollTo({ y: _w(45), animated: true }); } else { scrollViewRef.current.scrollTo({ y: -1000, animated: true }); } }

Tried this approach but the highlighted button position is not updated to after scroll position. Need to break to multiple tour

from rn-tourguide.