Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
alicja-mruk opened this issue May 29, 2024 · 7 comments

Comments

@alicja-mruk
Copy link

alicja-mruk commented May 29, 2024

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?

@alicja-mruk alicja-mruk changed the title Calling start() on useEffect causes steps not to register Calling start() on useEffect does not register all steps, only the first one May 29, 2024
@alicja-mruk alicja-mruk changed the title Calling start() on useEffect does not register all steps, only the first one Calling start() on useEffect does not register/use all steps, only the first one May 29, 2024
@acelyavul
Copy link

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

@ngdbao
Copy link

ngdbao commented Jun 9, 2024

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
Copy link

lutakyn commented Jul 18, 2024

what is the totalStepsNumber here.give full code

@TienNguyenVanDev
Copy link

Try my solution:

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

@andrewchester1
Copy link

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

@Shivangigupta01
Copy link

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

@alicja-mruk
Copy link
Author

Maybe instead of one, it should have multiple contexts?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants