How to make the timer reset and stop in react native

[AymanNass]

I need to reset the timer and to stop it when it's complete but I don't know how to do it, I tried with this and it's making the timer restart when it's over, but how can I make it restart and to stop it before it starts again?

onComplete={
() => [true, 0]
}

[vydimitrov]

Hey, the easies would be to pass a key prop to the timer and reset it in the onComplete, like so:

const [key, setKey] = useState(0)

return (
<CoundownCircleTimer
   {...props}
   key={key}
   onComplete={() => setKey(prevKey => prevKey +1)}
/>
)

[AymanNass]

Thanks for the reply!
I tried like this but now it ends and restart automatically, how can I make it stop at the end and show again 10 seconds until I press start and I change the isPlaying value

[vydimitrov]

How about this one?

const [isPlaying, setIsPlaying] = useState(true)
const [key, setKey] = useState(0)

return (
<CoundownCircleTimer
   {...props}
   isPlaying={isPlaying}
   key={key}
   onComplete={() =>{
        setKey(prevKey => prevKey +1)
        setIsPlaying(false)
   }}
/>
)

[AymanNass]

Yeah this is exactly what I meant, thanks a lot man