1

I've written a progress bar code (in android and IOS) via functional component, There are three buttons, one of them starts progress bar, another one-stop it and the last button restarts it. Stop button doesn't work, It seems clearInterval doesn't work, Can you please take a look and help me to solve this problem?


const MainFunc = (props) => {



    let [ProgresValue, setProgresValue] = useState(0);

    let IntValue = '';
    const StartProgress = () => {

        IntValue = setInterval(() => {
            if (ProgresValue <= 1) {

                setProgresValue(ProgresValue = ProgresValue + 0.01)

            }

        }, 100);

    }



    const StopProgress = () => {

        clearInterval(IntValue)


    }


    const RestartProgress = () => {

        setProgresValue(ProgresValue = 0)


    }





    return (
        <Fragment>
            <Text>Progress Bar:{parseFloat((ProgresValue * 100).toFixed(3))}%</Text>

            {
                (Platform.OS === 'android')
                    ?
                    (<ProgressBarAndroid
                        styleAttr='Horizontal'
                        indeterminate={false}
                        progress={ProgresValue}



                    />)
                    :
                    (<ProgressViewIOS
                        progress={ProgresValue}

                    />)


            }

            <TouchableHighlight onPress={StartProgress} style={styles.button}><Text style={{ color: 'white', textAlign: 'center' }}>Start Prgress</Text></TouchableHighlight>
            <TouchableHighlight onPress={StopProgress} style={styles.button} ><Text style={{ color: 'white', textAlign: 'center' }} >Stop Progress</Text></TouchableHighlight>
            <TouchableHighlight onPress={RestartProgress} style={styles.button}><Text style={{ color: 'white', textAlign: 'center' }} >Restart Progress</Text></TouchableHighlight>



        </Fragment>


    )



}
Andronicus
  • 25,419
  • 17
  • 47
  • 88
roz333
  • 695
  • 2
  • 18
  • 30
  • Does this answer your question? [State not updating when using React state hook within setInterval](https://stackoverflow.com/questions/53024496/state-not-updating-when-using-react-state-hook-within-setinterval) – zmag Jan 15 '20 at 02:31
  • No buddy, It doesn't. Actually my stats is updating, My problem is that clearInterval that has been defined in another function doesn't work and can't stop setInterval, Do you have any idea? – roz333 Jan 15 '20 at 12:37
  • I'm having the same problem – Miguel Coder Jan 14 '21 at 00:57
  • I just used setTimeout and then update the value, then use a useEffect hook to create another setTimeout when the value changes inside of the setTimeout callback. – Miguel Coder Jan 14 '21 at 02:52

0 Answers0