Start tour programmatically

[ghost]

Hello, thanks for this great package

Is there a way to begin the tour without calling start() via on onpress?

For example, I want my tour to automatically start the first time the user opens the app

Thanks! :)

[Alex0jk]

Hi @cacode-euan, thanks for bringing this up. This is possible but you'll have to work your way around to achieve it. I think this is a great feature so we'll add it to our pipeline to work on it. In the meantime, these are the options you could use:

• You can call start() inside the rendering of the component after you have access to the function you need. In case you want to start the tour on load; start() would be called inside a useEffect there.

• You can use a ref and call the start function with it. Again, if you want to start the tour on screen load, you can use a useEffect. This could look something like this:

  export const App: React.FC = () => {
    ....
    const refTour = React.createRef<SpotlightTour>();
    ....
    useEffect(() => {
     refTour.current?.start();
    });
    
    return (
      ...
      <SpotlightTourProvider
        steps={tourSteps}
        ....
        ref={refTour}
      >
       ....
      </SpotlightTourProvider>
      ....
    )
  }

[hugoxiong5]

Hey, thanks for this solution.

However, to prevent re-renders in my functional component, instead of React.createRef, I switched to a useRef<SpotlightTour>(null) hook. This seems to work nicely.

[Oakyden]

Is there not a way to do this just this with const { start } = useSpotlightTour();

?

[nodahikaru]

Hi @cacode-euan, thanks for bringing this up. This is possible but you'll have to work your way around to achieve it. I think this is a great feature so we'll add it to our pipeline to work on it. In the meantime, these are the options you could use:

• You can call start() inside the rendering of the component after you have access to the function you need. In case you want to start the tour on load; start() would be called inside a useEffect there.
• You can use a ref and call the start function with it. Again, if you want to start the tour on screen load, you can use a useEffect. This could look something like this:

  export const App: React.FC = () => {
    ....
    const refTour = React.createRef<SpotlightTour>();
    ....
    useEffect(() => {
     refTour.current?.start();
    });
    
    return (
      ...
      <SpotlightTourProvider
        steps={tourSteps}
        ....
        ref={refTour}
      >
       ....
      </SpotlightTourProvider>
      ....
    )
  }

[nodahikaru]

I need to start tour programmatically and used SpotlightTour ref and useEffect. But it doesn't show tour, only backdrop

[etch01]

add a small timeout inside useEffect:

setTimeout(()=>{
            spotlightRef.current?.start();
},100)

[thvbb]

I need to start tour programmatically and used SpotlightTour ref and useEffect. But it doesn't show tour, only backdrop

Same on me.....

[bryanprimus]

I need to start tour programmatically and used SpotlightTour ref and useEffect. But it doesn't show tour, only backdrop

i'm able to solve this using onLayout. feels more proper than setting up the timeout

<View onLayout={() => start()}>

source: https://github.com/mohebifar/react-native-copilot/issues/287#issuecomment-1697112964

[thvbb]

Please help me ~~~~

[bryanprimus]

I call start() inside a useEffect, but its worked with react-native-web, not worked in react-native-app

have you tried any of the workaround above?

[sufian1999]

Hi @cacode-euan, thanks for bringing this up. This is possible but you'll have to work your way around to achieve it. I think this is a great feature so we'll add it to our pipeline to work on it. In the meantime, these are the options you could use:

• You can call start() inside the rendering of the component after you have access to the function you need. In case you want to start the tour on load; start() would be called inside a useEffect there.
• You can use a ref and call the start function with it. Again, if you want to start the tour on screen load, you can use a useEffect. This could look something like this:

  export const App: React.FC = () => {
    ....
    const refTour = React.createRef<SpotlightTour>();
    ....
    useEffect(() => {
     refTour.current?.start();
    });
    
    return (
      ...
      <SpotlightTourProvider
        steps={tourSteps}
        ....
        ref={refTour}
      >
       ....
      </SpotlightTourProvider>
      ....
    )
  }

Not working on android. And animations are slow. App crash with error: Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

[[24,24,24,24,24,24,24],[19,16,9,20,19,17,12],[[],[121,1],[],[36],[],[599,"onTransitionProgress",4]],2019]