Simple Timer app with React-Native

Continuing my React Native journey, i found a great site https://learn.handlebarlabs.com/ by Spencer Carli. This post is based on one of the free course by him.

Let’s head over to a terminal and type expo init TimerReactNative

Press enter for blank in the selection.

Image for post
Image for post
init

In the next screen, you can give the same name as the project. For my case it is TimerReactNative.

Image for post
Image for post
Timer

Then change into the directory and do a npm start

start

The project will be started by expo on a web-browser.

Image for post
Image for post
Web browser

Next, open the project in VSCode and create a new folder App and a file index.js inside it.

Image for post
Image for post
index.js

Copy all content from App.js to index.js and delete App.js

Image for post
Image for post
updated index.js

Next, open the App on a physical device. I had mentioned the steps in my blog for Restaurant Search app.

You can also open the app in the lap by configuring Android emulator. I have mentioned the steps in my previous blog to Setup Android Emulator on Mac.

Next, we will change our index.js to display a button on the center of screen.

Image for post
Image for post
index.js

It will show below in our App.

Image for post
Image for post
Android App

Next, we will make the button round with center align text. In react-native, we have an element Dimensions by which we can use screen width as measurement.

Image for post
Image for post
Dimensions

By the above changes our button is perfectly round and text centered.

Image for post
Image for post
Round button

Next, we will add logic to display timer text above the button. Here, we are using useState hook to store a variable remainingSecs and also keeping a flag isActive.

We are using setInterval inside useEffect hook to update the value of remainingSecs every second and re-rended the component.

We are also using a getRemaining function to get minutes and seconds from a time passed.

Image for post
Image for post
useState

We are then calling toggle function on pressing of the Start button. We are stopping the timer and also changing the text to Pause. Also giving some style to the text.

Image for post
Image for post
toggle

With the above code, we were getting a wrong type of display. Our passed 5 was shown as 0:5. To show it as 00:05 , we will use another function formatNumber

Image for post
Image for post
formatNumber

Now, our App looks like below.

Image for post
Image for post
TimerText

Lastly, we will add a Reset button. We are also reusing the styles by using [] in style.

Image for post
Image for post
Reset

This completes our App and it looks like below.

Image for post
Image for post
Final App

Hope, you liked the app. You can find the code for the same in this github link.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store