Component not updating

[thedavidpeterson]

Hi! Thanks for a great component!

I'm having an issue with the counter showing the right value (until) after setting it on the emulator (Android Studio - Pixel XL2) but when I do the same thing after building the app (Expo, React Native) and installing it on my phone (Pixel xl2) the component does not update the displayed value after setting it. Only when the value is changed again it shows the OLD previous value (which is not right anymore).

Here's my code:

            <Timer 
                isrunning ={isRunning} 
                time={time}.      //Time is connected to the until prop in the timer
                onPress={() => this.TimePicker.open()}
                finishHandler = {onFinishHandler}
            />

        <TimePicker
            ref={ref => {
                this.TimePicker = ref;
            }}
            onCancel={onCancel}
            onConfirm={(hour, minute) => onConfirm(hour, minute)}
            maxHour = {59}
            hourUnit = {' Min'}
            maxMinute = {59}
            minuteUnit = {' Sec'}
            />

const onConfirm = (hour, minute) => { this.TimePicker.close(); setTime(parseInt(minute) + parseInt(hour)*60) }

TLDR: Component is updating in emulator but is not updating on built app (expo, react native) on phone (Google Pixel xl2)

[thedavidpeterson]

Solution: I went pack one version and uncommented "componentWIllReceiveProps" and commented away "componentDidUpdate".

Now it works again =)

[ruslan-hontar]

version 2.6.0 works fine. so problem is on update the deprecated react lifecycle.

[arthedza]

@talalmajali are any updates?

[mukhtarkv]

I had similar problem, but when running on iOS simulator. Solution: I opened index.js inside react-native-countdown-component folder and searched for "componentDidUpdate" function. Inside this function, I replaced prevState.until with 0 and replaced prevProps.until with this.props.until.

Edit: it turns out that the timer does not count down when you set prevState.until to this.state.until if previous states until is not timed out. Hence, to make the timer countdown whenever you change your state, you should make prevState.until to equal 0.

Now it behaves as I expect it to behave. Whenever I change value of until, it will update the component accordingly.

[mikeportanova]

@mukhtarkussaiynbekov I did this, and YES it finally updates the time correctly, but now the timer doesn't count down! Did you find a fix?

[mukhtarkv]

@mikeportanova The timer counts down in my application. I am attaching screen shot of my code.

[mikeportanova]

@mikeportanova The timer counts down in my application. I am attaching screen shot of my code.

Thanks! I had left multiple lifecycle methods uncommented.

[anisurrahman072]

Hi, @thedavidpeterson, @mukhtarkussaiynbekov could you please let me know how can i achieve your solution in functional component?

[mukhtarkv]

Hi @anisurrahman072 I haven't coded in React Native in a while, but at that time I was only using functional component in my application. But because this package was written using class components, I had to change some parts of it to make it work. Please check my package, I haven't touched it since 2021.