Cannot get useState to change with Keys React Native

[BrandanN21]

Hi, I am working on implementing this into my project and cannot get the use states to change. I tried to follow along with the demo for the restart timer feature but was unsuccessful in getting that to work.

My use case is as follows: user can select/click a three buttons. Each button having a different duration.

below is my current code:

any and all help would be much appreciate as I am new to learning React Native!

`

const [key, setKey] = useState(0);

[false, 1000]} // onComplete={() => { // console.log('ON_COMPLETE BEFORE RETURN') // return [true, 0] //}} > {({ remainingTime, animatedColor }) => ( {remainingTime} )} Avoid parking tickets with NoTic MKE. A parking solution for East Side Drivers setKey(prevKey => prevKey + 1)} title="Start Timer" />

`

[vydimitrov]

Hey, it seems that your duration is fixed to 10 seconds and isPlaying is always set to true:

 key={key}
 isPlaying
 duration={10}

I would do something like this:

const [duration, setDuration] = useState(10);
const [isPlaying, setIsPlaying] = useState(false);

.
.
.

 key={duration}
 isPlaying={isPlaying}
 duration={duration}

.
.
.

<Button onClick={() =>{
 setIsPlaying(true)
 setDuration(newDuration)
}}
 title="Start Timer"
 />

[BrandanN21]

Hi @vydimitrov , Thank you for your response!! I did implement this like you stated above but it still does not seem to do anything when I click on the button? Any thoughts as to why this would not start?

` const [duration, setDuration] = useState(0); const [isPlaying, setIsPlaying] = useState(false);

key={duration} isPlaying={isPlaying} duration={duration}

<Button onClick={() =>{ setIsPlaying(true) setDuration(20) }} title="Start Timer" /> `

[vydimitrov]

Can you share your code?

[BrandanN21]

@vydimitrov here is my code

import React, { useState, useEffect} from 'react';
import { StyleSheet, Text, View, ImageBackground, TouchableOpacity, Touchable, Animated, TextInput, Button } from 'react-native';
import { CountdownCircleTimer } from 'react-native-countdown-circle-timer';
import Constants from 'expo-constants';
import { render } from 'react-dom';
import DropDownPicker from 'react-native-dropdown-picker';

export const HomeScreen = ({ navigation }) => {

  const [duration, setDuration] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);
    return (
      <View style={styles.container}>
            <ImageBackground source={require('../../.././assets/home-screen.png')}
            style={styles.background}
            >

              <View style={styles.timercontainer}>
              <CountdownCircleTimer 

                key={duration}
                isPlaying={isPlaying}
                duration={duration}
                colors={[
                  ['#18224B', 0.33],
                  ['#009DD9', 0.33],
                ]}
                size={342}
                isLinearGradient="true"
                onComplete={() => [true, 1000]}

              >
                {({ remainingTime, animatedColor }) => (

                  <Animated.Text style={styles.remainingTime}>
                    {remainingTime}
                  </Animated.Text>
                )}
              </CountdownCircleTimer>
              </View>

              <View>
              <Button onClick={() =>{
                  setIsPlaying(true)
                  setDuration(20)
                  }}
                title="Start Timer"
              />
              </View>
            </ImageBackground>

      </View>
    )
}

[vydimitrov]

Can you set the initial duration different then 0?

[BrandanN21]

@vydimitrov I have set it to useState(10) but it still does not work

[vydimitrov]

Hmmm, it should really work. Can you drop your code in ExpoSnack so we can both test it and see how it works?

[joey234432]

https://snack.expo.io/@jon234s/timerproject Here is the code in expo snack. Currently it us just stuck in the time over state.

[vydimitrov]

Please read the React Native docs before on how to use Button component - https://reactnative.dev/docs/button#requiredonpress

[vydimitrov]

onClick does not exist in the RN world.

[joey234432]

shoot, thank you so much for the help. Much appreciated.