Pomodoro Timer

Pomodoro timers are used to enhance productivity during focus time. The theory behind this method of productivity is to focus for 25 minutes and take a break for 5 minutes. I decided to build my own Pomodoro Timer with React Native so I can use it while building other apps.

In This Document

1. Demo
2. How to use Application
3. Technologies Used
4. Code Highlights

Demo

Focus timer begins once user clicks anywhere on the screen.

Border rotates every second.

After focus timer finishes, break timer begins automatically. After break timer finishes, the user has the option to restart the focus timer.

How to use Application

1. Click on the screen to start the timer
2. Once timer finishes, repeat step 1 to restart the timer.

Technologies

1. React Native

Code Highlights

I created a touchable area using TouchableOpacity to allow users to start the timer by pressing the screen. I used dynamic text content to switch between the initial start display, focus timer, and break timer.

I'm using fontVariant: "tabular-nums" to stablize the timer's font as it changes values