Restart the countdown timer when a user goes back to the page with the countdown timer.

[thepragmaticidealist]

Hello,
I'm building out quiz like functionality for an app in react native using the circle timer. Once the timer duration lapses, I automatically redirect the user to a new page (RestartScreen). RestartScreen has a Restart Game button that returns the page with the timer. Once the user selects the Restart Game button, they're directed to the page with the countdown timer

I've tried applying a new key to the countdown component using the use Effect hook but it hasn't worked.

How can I have the timer restart when the user goes back to the screen with the countdown timer? i.e. Starts the game?

This is how my code looks at the moment. When I go back to the page with the countdown, the timer is stuck at 0.

import { View, Text } from 'react-native'
import React, { useEffect, useState, useRef } from 'react'
import { useNavigation } from '@react-navigation/native';

import { CountdownCircleTimer } from 'react-native-countdown-circle-timer'


const renderTime = ({ remainingTime }) => {
  return (
    <View className="flex items-center">
      <Text className="text-red-500">Remaining</Text>
      <Text className="text-lg">{remainingTime}</Text>
      <Text className="text-red-500">seconds</Text>
    </View>
  );
};

const CountdownTimer = () => {
  const navigation = useNavigation();
  const [key, setKey] = useState(0);
  const [duration, setDuration] = useState(10);

  useEffect(() => {
    setKey((prevKey) => prevKey + 1);
  }, [])
  
  return (
    <View className="pt-20">
      <CountdownCircleTimer
          key={key}
          isPlaying
          duration={duration}
          colors={['#004777', '#F7B801', '#A30000', '#A30000']}
          colorsTime={[10, 6, 3, 0]}
          onComplete={() => {
            setDuration(10);
            navigation.navigate("RestartScreen")
          }}
        >
          {renderTime}
      </CountdownCircleTimer>
    </View>
  )
}

export default CountdownTimer;

[vydimitrov]

Hey, I guess it would be better to pass the key prop to the wrapper component CountdownTimer

useEffect(() => {
    setKey((prevKey) => prevKey + 1);
  }, [])

<CountdownTimer key={key} />

Alternatively you can unmount the component when the user navigates away and mounted back when he lands back to the page with the timer. This will solve your problem as well!

[saidinusah]

hi, what if you aren't using the component provided by the library? I'm using the hooks and looks like theres no way to do this, kindly help @vydimitrov

[vydimitrov]

It kind of works the same way, the hook is consumed by a component, you pass a key prop to the component and change it to reset the hook state.

[saidinusah]

I'm not using the component. Only consuming the hooks and there's no way to do that?

[vydimitrov]

Then add the key prop to your component?