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.
- Demo
- How to use Application
- Technologies Used
- Code Highlights
Focus timer begins once user clicks anywhere on the screen.
![start](https://private-user-images.githubusercontent.com/135183794/307173229-f07dcd32-5836-4a5f-abae-138ba6a26d2f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg4NjAxNzMsIm5iZiI6MTcxODg1OTg3MywicGF0aCI6Ii8xMzUxODM3OTQvMzA3MTczMjI5LWYwN2RjZDMyLTU4MzYtNGE1Zi1hYmFlLTEzOGJhNmEyNmQyZi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYyMFQwNTA0MzNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jMTI0N2I2OTk1N2I1NWQ5MjBmYjM4ZDUxYmZjNjA5NDczMGIxZmY2ZTg3MDE1ZDMzOWJmYzUwMzE0NzA0ZjgxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.eilz8cADyDN0A_EaXq_YbWZzwDU5wLR286nRc-XOfi0)
Border rotates every second.
![focus](https://private-user-images.githubusercontent.com/135183794/307173274-48d4c067-2fac-443a-bf8f-a905028693b2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg4NjAxNzMsIm5iZiI6MTcxODg1OTg3MywicGF0aCI6Ii8xMzUxODM3OTQvMzA3MTczMjc0LTQ4ZDRjMDY3LTJmYWMtNDQzYS1iZjhmLWE5MDUwMjg2OTNiMi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYyMFQwNTA0MzNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kY2YzZGRhYjkxZjAyZTc0ZDFjMjA4M2ZhZDZmM2ExNWQwNWM0NjVmMmMyNTMzODA5ZWVlYmYyZDRiODJiODZmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.5vnkj61h9KhITFnAa3soKBwBNkCfEMjzh92sBrTVdiA)
After focus timer finishes, break timer begins automatically. After break timer finishes, the user has the option to restart the focus timer.
- Click on the screen to start the timer
- Once timer finishes, repeat step 1 to restart the timer.
- React Native
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