Autostart on mount

[Zeeshan10277]

Whenever i try to start the tour from useEffect, It does'nt work even if am passing setTimeout to it. Example code is given below:

const tour = useCopilot()
useEffect(()=>{
setTimeout(()=>{
tour.start("repaircat");
}, 600)
},[])

In the first screen I have started the tour by passing start() to the button click but in the second screen i want to initiate the tour again by calling start with the name of step through useEffect.

Is there any way to start the tour without clicking any button?

[lurdharry]

I had similar issue but was able to fix it, Here is my solution

const { currentStepNumber } = useCopilot()
  const isMounted = useIsMounted();
  
useEffect(() => {
    const timeout = setTimeout(() => {
      if (isMounted.current && currentStepNumber === 0) {
        start();
      }
    }, TIMEOUT);
    return () => clearTimeout(timeout);
  }, [currentStepNumber, isMounted,  start]);
  

you can search for IsMounted Hook, but I can help you with it if you are unable to find any.

[Saigronas]

The fix @lurdharry mentions does not work here.

Any update would be greatly appreciated.

[lurdharry]

@Saigronas try replacing the useEffect hook with useFocusEffect hook from react navigation.

It was working well when I used useEffect but it stopped working at some point may be due to metro bundler cache issue, but since I changed to useFocusEffect , it has been working perfectly even in production.
And also, you don’t need the userIsMounted hook when using useFocusEffect.

[Saigronas]

Even by using useFocusEffect, (which i already used for another reason), i cannot get the tour to start on its own or by navigating to the screen.

However, when pressing "ctrl+s" and thereby refreshing the app, the tour starts.
This was also the case with using useEffect

[tanmoygo]

@Saigronas did you get any solution?

[shreya-kalra-vs]

any update on the issue?

[work4m]

I encountered an issue where the code wasn't functioning within the useEffect or useFocusEffect hooks. However, I managed to identify the solution that works perfectly for my use case in the code. To implement this, make sure to place the following code snippet within the top-level container:

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

[NewDimix]

@Saigronas did you get any solution?

[carl0shd]

same problem here, the start() doesn't work if it is called inside of a useEffect

[lutakyn]

Thanks for the inspiration @work4m. This worked like magic, it even worked with scrollview

  const debouncedStart = debounce(() => {
      start();
    }, 5000);
  
    const runTutorial=()=>{
      if(!homepageTutorialComplete && !startTutorial){
          // Call the debounced start function
          debouncedStart();
          }
    }
  <View onLayout={() => runTutorial()}> 

[yesudoss-aeq]

<View onLayout={() => runTutorial()}>
Yes it is worked like a magic!!