Not Just Another Countdown Timer
Recently I got a chance to improve one of the main UI components on my company’s app, called countdown timer. It is used to show the duration of the time-sensitive marketing campaigns. While doing this improvement, I was reminded about one of my interview questions to build a simple countdown timer as well. Back then, my answer was something like this:
In order to have a working countdown timer, we just need to create a state to store the timer value and use the useEffect function to subtract the value every second. Pretty simple, right? But in my case, building a countdown timer is not as simple as this. The digits that I need to render has their own custom font. It also needs to have a transition animation while considering the component performance itself. In this article, let me tell you a different perspective on creating a countdown timer component in React Native.
Requirement
We will build a countdown timer that has a transition animation from one digit to another. The result will look like this:
