Calling start() on useEffect does not register/use all steps, only the first one

[alicja-mruk]

Current Behavior
Calling start on useEffect does not register steps. After clicking "next" it moves to next walkthrouable item, but in the current step always displays the first step content.
However, totalSteps displays correct number of steps.

import { useCopilot } from 'react-native-copilot';

const { start }  = useCopilot();

useEffect(() => {
 start()
},[])

[.. in the return function as in /example folder]

Expected behavior/code
Steps are registered and "next" press works correctly.

Environment

• Device: [iPhone 15 Pro Max Simulator]
• OS: [17.4]
• react-native-copilot: [3.3.2]
• react-native: [71.14]
• react-native-svg: [14.0.0]

Possible Solution

I was able to solve this by adding timeout of 3s in the useEffect.
setTimeout(() => { start() }, 3000

Additional context/Screenshots
I don't know why it happens, any idea how we can fix it?

[acelyavul]

setTimeout doesn't work for me. I am trying to set false if displayed already.

[ngdbao]

in my case, it even doesn't trigger. I have to trigger manually by touch event after a second

It seems sometimes useEffect init before all children-in-order finish, did causing problem

this is my fix:

    useEffect(() => {
        // Create a debounced version of the start function
        const debouncedStart = debounce(() => {
            start();
        }, 1000);

        // Call the debounced start function
        debouncedStart();

        // Clean up the debounced function
        return () => {
            debouncedStart.cancel();
        };
    }, [totalStepsNumber]);

depends on "totalStepsNumber" is the key

[lutakyn]

what is the totalStepsNumber here.give full code

[TienNguyenVanDev]

Try my solution:

onLayout={() => { start(); }}

[andrewchester1]

I am noticing the same issue. It seems like this library isn't maintained much anymore though :(