Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scroll to step off screen #113

Open
LaikaTheSpaceDog opened this issue Sep 13, 2022 · 3 comments
Open

Scroll to step off screen #113

LaikaTheSpaceDog opened this issue Sep 13, 2022 · 3 comments

Comments

@LaikaTheSpaceDog
Copy link

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.

@imamrobani
Copy link

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

@nurikon
Copy link

nurikon commented Sep 8, 2023

===>>> 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 });
}
}

@anniewey
Copy link

anniewey commented Oct 16, 2023

===>>> 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants