Listener issue

[Ajmal0197]

TypeError: this._listeners[_key] is not a function. (In 'this._listeners[_key]({ value: value })', 'this._listeners[_key]' is undefined)

callListeners AnimatedNode.js:139:6 callListeners AnimatedWithChildren.js:76:4 _updateValue AnimatedValue.js:246:4 animation.start$argument_1 AnimatedValue.js:211:8 onUpdate TimingAnimation.js:144:4 onUpdate

_callTimer JSTimers.js:137:14 callTimers JSTimers.js:387:16 callFunction MessageQueue.js:425:19 guard$argument_0 MessageQueue.js:112:6 __guard MessageQueue.js:373:10 callFunctionReturnFlushedQueue MessageQueue.js:111:4 callFunctionReturnFlushedQueue

_I am getting this error sometimes when unmounting then mounting screen or coming from background. I have used **showTimer** state so that every time when I come from background the remainingTime changes as this variable mounts unmounts your library component bcz there was no other way that helped me in changing remainingTime value. But sometimes the app crashes with above error._

Code is:

    const [showTimer, setshowTimer] = useState(false)

        useFocusEffect(
        useCallback(() => {
            if (ftIsTimerStarted1) {
                setTimeout(() => {
                    let startDate = new Date()
                    let endDate = new Date(currentftObject.htEndTS)
                    let seconds = Math.round((endDate.getTime() - startDate.getTime()) / 1000);
                    if (seconds > 0) {
                        settimer(seconds)
                    } else {
                        settimer(0)
                    }
                    setshowTimer(true)
                }, 10);
                return () => {
                    setshowTimer(false)
                }
            }
        }, [appStatus])
    );

                        {!(ftIsTimerStarted1 && showTimer) ?
                        <View style={{ ...styles.pipeSizeView, alignItems: 'center', height: hp('15%') }}>
                            <Text style={{ color: '#FFBA00', fontFamily: 'Poppins-Bold', fontSize: wp('5%') }}>Heating Time</Text>
                            <Text style={{ color: '#fff', fontFamily: 'Poppins-Bold', fontSize: wp('7%') }}>{moment.utc((fullDuration) * 1000).format('mm:ss')} {fullDuration >= 60 ? 'min' : 'sec'}</Text>
                        </View> :
                        <View style={{ ...styles.pipeSizeView, alignItems: 'center', padding: wp('2%') }}>
                            <CountdownCircleTimer
                                isPlaying={ftIsTimerStarted1}
                                duration={fullDuration} //fullDuration
                                initialRemainingTime={timer}
                                onComplete={() => {
                                    setEnableNext(true);
                                }}
                                colors={[['#FFBA00', 0.33], ['#FFBA00', 0.33], ['#FFBA00']]}>
                                {({ remainingTime, animatedColor }) => (
                                    <Animated.Text style={styles.anT}>
                                        {moment.utc(remainingTime * 1000).format('mm:ss')}
                                    </Animated.Text>
                                )}
                            </CountdownCircleTimer>
                        </View>
                    }

[vydimitrov]

Have you tried pausing/resuming the timer when unmounting then mounting screen or coming from background?

[Ajmal0197]

Have you tried pausing/resuming the timer when unmounting then mounting screen or coming from background?

Still crashes sometimes even after putting mount/unmount bool in isPlaying.

[Ajmal0197]

I think now I am not getting crashes. I hide the countdown component on unmount with a view and then on mount put it back.

{!(appStatus && useFocus && startTimer && showTimer) ? <Text style={{ color: '#fff', fontFamily: 'Poppins-Bold', fontSize: wp('7%') }}>2 minutes : <CountdownCircleTimer isPlaying={true} duration={fullDuration} //change 1800 initialRemainingTime={timer} onComplete={() => { setEnableNext(true); Vibration.vibrate(500) }} colors={[['#3EAE61', 0.33], ['#3EAE61', 0.33], ['#3EAE61']]}> {({ remainingTime, animatedColor }) => ( <Animated.Text style={{ color: '#3EAE61', fontFamily: 'Poppins-SemiBold', fontSize: wp('9%') }}> {moment.utc(remainingTime * 1000).format('mm:ss')} </Animated.Text> )} }

[vydimitrov]

Let me know if you need any additional help on this one.