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 :(

[Shivangigupta01]

any solution on how can this be fixed? Creating a debounced version of the start function didn't worked for me

[alicja-mruk]

Maybe instead of one, it should have multiple contexts?

[Mushthak007]

same issue

[Hamadahmad000]

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

Worked for me Thanks! 🙏 ☺️

[WidgetPMT]

Try my solution:

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

This work for me, thanks!