Start tour programmatically about react-native-spotlight-tour

[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)