Question: How use ScrollView in SpotlightTourProvider

[onethps]

How to use a ScrollView in SpotlightTourProvider? I have Attached step into scrollView at the bottom

[JoseLion]

This is one of the main reasons we added the before(..) hook on the step configuration. You can programmatically scroll to a specific position on the screen before the step starts. And because the before(..) hook accepts a promise, you can add as much delay as you want to wait for the scroll to reach the expected position.

function delay(ms: number): Promise<void> {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

const steps = [
  {
  ...restOfstep,
  before: () => {
    scrollRef.current?.scrollTo({ x: 0, y: 120, animated: true });

    return delay(1500); // delay 1.5s
  },
]

This brings a few ideas to improve things around. We could add something to help go over this scenario more smoothly. I'll be looking into this. Thanks for the report! 🙂

[wheeler-cleo]

This is one of the main reasons we added the before(..) hook on the step configuration. You can programmatically scroll to a specific position on the screen before the step starts. And because the before(..) hook accepts a promise, you can add as much delay as you want to wait for the scroll to reach the expected position.

function delay(ms: number): Promise<void> {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

const steps = [
  {
  ...restOfstep,
  before: () => {
    scrollRef.current?.scrollTo({ x: 0, y: 120, animated: true });

    return delay(1500); // delay 1.5s
  },
]

This brings a few ideas to improve things around. We could add something to help go over this scenario more smoothly. I'll be looking into this. Thanks for the report! 🙂

@JoseLion is there a recommended pattern to define steps from within a child component. For example, in this structure:

// App.tsx
<SpotlightTourProvider>
  <HomeScreen />
</SpotlightTourProvider>

Is it possible to define steps directly within the HomeScreen component?

My use case would be so that I can pass a ref of an element within the HomeScreen directly to a step, without needing to pass the ref up to the App.tsx file.

I've been looking through the source code and wasn't sure if there was a better way of handling this.

Thanks in advance!

[julien9999]

any suggestion @JoseLion on how best to implement?