Building Simple StopWatch with React-Native

in React Native on

Let’s start building simple StopWatch App for iOS in React Native. We are not implementing LAP functionality into it, Just keeping it more and more simple. You are free to extends the functionality accordingly.

First of all, Let’s see the final result of our StopWatch App.

Simple StopWatch

Simple Stop Watch


Functionalities:

  • Start and Clear button will active once you click on Stop button
  • Stop button will stop the timer without reseting the time.
  • Clear button will reset the timer

Now lets start with the codes. First create your App using react-native init stopwatch. Create a new file StopWatch.js. We are going to use StyleSheet, View, Text, Button components for building our App. We need to add some states to handle our data in our App.

Now let’s start building our StopWatch component.

We are using 4 events to handle our stopwatch functionality.

  • onButtonStart() is handling the event to start the stopwatch.
  • onButtonStop() event will stop the stopwatch main timer
  • onButtonClear() event will reset our stopwatch
  • start() event trigger on componentDidMount() and with onButtonStart().

Next step is to start the timer and update the states accordingly.

We have used setInterval() to update the counter states and clearInterval() to stop the timer. Now lets define events that handle the click event on buttons.

Last stop is to add the view that display our stopwatch and attach the events to the buttons.

Let’s add some basic style to our stopWatch

That’s it. We have finished our stopwatch App. Here is full code for StopWatch component.