How to implement a snapchat like circular animated countdown timer component in React Native?

Question

I was wondering if anyone knows how to implement a circular countdown timer in React Native shown on the attached image. Would be ideal if it was for both ios and android. Thanks!

Answer 1

I can at least point you in the direction of implementing one yourself.

There does indeed exist a 'react-countdown-timer' component, however it might be worth implementing yourself or altering their code in order to make the timer appear like above. To do so, I would use a combination of timer-mixins in addition to a circular view with text inside. Next, I would keep track of the state of the timer using the timer-mixins in addition to the setState function. For each interval, I would update the time remaining of the timer and then update the button component that you have created to reflect whatever time is left.