NOTE 2-13-2021

Unfortunately, it appears the Expo SDK version used in this project is no longer supported by Expo.io, so please note that my published app is not currently working.

-- Brennan

---

Twenty Timer

A minimilast 20-minute/20-second eye care timer for mobile.

Twenty Timer is published on Expo - download it now!

Description 💬

Twenty Timer is a mobile app for timing 20-minute/20-second intervals. During prolonged screen use, optometrists recommend what is termed the 20-20-20 rule - for every 20 minutes spent looking at a screen, look at something 20 feet away for 20 seconds. Run this app to run automatic 20-minute/20-second intervals and protect your eyes!

Features

• Minimalist design.
• 5 color themes.
• Option to disable phone alerts and run timers automatically.

Code ☕

Twenty Timer is built in React Native and Expo, using TypeScript. Code highlights include:

• A custom, functional, entirely hook-based timer countdown component.

  • Works using a combination of useEffect, useRef and useState.
  • TimerCountdown.tsx

• Global state management with MobX.

  • store/

• Three-screen navigation handled using React Navigation.

  • AppNavigator.tsx

• A complete test suite of unittests and integration tests.

  • Written with React Native Testing Library, run with Jest.
  • __tests__/

Dependencies 👫

Primary:

Library	Version
Expo	^34.0.4
React	^16.9.0
React Native	github.com/expo/react-native/archive/sdk-34.0.0.tar.gz
MobX	^5.13.0
React Navigation	^3.12.1
React Native Testing Library	^4.0.8

View the complete list of dependencies in package.json.

Development 💻

To run Twenty Timer locally, you must have the following installed:

• Node.js
  • I develop Twenty Timer on Node v10.16.3.
• npm or yarn
  • I develop Twenty Timer using yarn.

Then, install dependencies:

yarn install
# or
npm install

Finally, start the Expo development server

yarn start
# or
npm run start

Tests 📐

Twenty Timer includes an entire test suite! Run it with the following:

yarn test
# or
npm test

Limitations 😕

In practice, Twenty Timer would be most practical as a background app, a timer that can run even while foregrounded. Unfortunately... React Native does not currently offer great support for background processes, even less so for React Native Expo.

Maybe possibly one day, I'll eject this application to introduce native background code, it will be wonderful, and I'll get the app officially published. But, at the moment, this is a bit beyond my scope 😅.

Author ✒️

• Brennan D Baraban
  • Check out my other GitHub projects.
  • Connect with me on LinkedIn.
  • Follow me on Twitter.
  • Be amazed by my portfolio website, also built in React!

License 🔒

This project is licensed under the MIT License - see the LICENSE file for details.