MrToph / react-native-countdown-circle

A light-weight countdown circle indicator for React Native.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Smooth Animation Problem

alexsmartens opened this issue · comments

Hi @MrToph,

I'm impressed with your library and I'd like to add it to my project. The problem is that I'm having troubles with reproducing this example:
featured

I copied your code:

import CountdownCircle from 'react-native-countdown-circle'

render() {
    return (
        <CountdownCircle
            seconds={10}
            radius={30}
            borderWidth={8}
            color="#ff003f"
            bgColor="#fff"
            textStyle={{ fontSize: 20 }}
            onTimeElapsed={() => console.log('Elapsed!')}
        />
    )
}

I'm getting the 10 sec count down itself, however I don't have this nice effect of the circle changing the color as the time goes.

I have a red circle first @ 10, then the color changes to gray instantly at 9 and it stays gray until 0 time, which looks like this:

image -> image -> ... -> image

My environment:
React Native version: RN 0.51.0
Platform: Android 6.0 device (Moto G 2nd Generation)

Hi,
problem is solved thanks to this thread. I disabled chrome debugger and the animation started to work as it is supposed to work