CountDown not working properly on Expo Go

Expo Development Tools
1

Hello,

I’m currently trying to implement a counterdown using the following two packages:

  • react-native-countdown-component

  • moment

For orientation, I looked at the following example and first copied and pasted most of the code and adjusted the variable “expirydate” and changed “utcOffset” to “+02:00” German time: CountDown timer Example

The problem I have now is that as soon as I run the app via Expo Go on my phone, there is a zero everywhere by default (CountDown is not started). I have to explicitly save the corresponding JavaScript file for it to run. Can anyone here tell me what the problem might be and what I need to do to start the counter immediately after opening my screen? My code is structured as follows:

import CountDown from 'react-native-countdown-component';
import moment from 'moment';

export default function Produktdetail({ route, navigation }) {

const [totalDuration, setTotalDuration] = useState(0);

    useEffect(() => {
        var date = moment().utcOffset('+01:00').format('YYYY-MM-DD hh:mm:ss');
        //Getting the current date-time with required formate and UTC
        var expirydate = '2021-07-09 00:00:01'; //You can set your own date-time
        //Let suppose we have to show the countdown for above date-time
        var diffr = moment.duration(moment(expirydate).diff(moment(date)));
        //difference of the expiry date-time given and current date-time
        var hours = parseInt(diffr.asHours());
        var minutes = parseInt(diffr.minutes());
        var seconds = parseInt(diffr.seconds());
        var d = hours * 60 * 60 + minutes * 60 + seconds;
        //converting in seconds
        setTotalDuration(d);
        //Settign up the duration of countdown in seconds to re-render
    }, []);

return (

                <View style={{marginTop: 20}}>
                <CountDown
                    until={totalDuration}
                    //duration of countdown in seconds
                    timetoShow={('H', 'M', 'S')}
                    //on Press call
                    size={20}
                />
                </View>
    );
}
2

In case someone has the same issue. I was able to solve this problem by changing my code to this:

import CountDown from 'react-native-countdown-component'
import moment from 'moment';

const [totalDuration, setTotalDuration] = useState(0)

   useEffect(() => {
        var date = moment().format('YYYY-MM-DD hh:mm:ss');
        //Getting the current date-time with required formate and UTC
        var expirydate = moment().format('YYYY-MM-DD') + ' 11:59:59'; //You can set your own date-time
        //Let suppose we have to show the countdown for above date-time
        var diffr = moment.duration(moment(expirydate).diff(moment(date)));
        //difference of the expiry date-time given and current date-time
        var hours = parseInt(diffr.asHours());
        var minutes = parseInt(diffr.minutes());
        var seconds = parseInt(diffr.seconds());
        var d = hours * 60 * 60 + minutes * 60 + seconds;
        //converting in seconds
        setTotalDuration(d);
        //Settign up the duration of countdown in seconds to re-render
    }, []);

                        <CountDown
                            until={totalDuration}
                            digitStyle={{ backgroundColor: '#5271FF' }}
                            digitTxtStyle={{ color: '#FFFFFF' }}
                            //duration of countdown in seconds
                            timetoShow={('H', 'M', 'S')}
                            timeLabels={{ d: 'Tage', h: 'Stunden', m: 'Minuten', s: 'Sekunden' }}
                            //on Press call
                            size={20}
                        />

My main problem now is that the countdown doesn’t start automatically. I have to save the JavaScript file where I have my countdown so that it starts. Can someone help me here?

Thank in advance