React Native Create Stopwatch Timer Android iOS Example Tutorial

Stopwatch is used to measure spending time of a certain activity between activation and deactivation time. In today’s life Stopwatch is used to calculate running time for health purpose, question asking time for quiz contest purpose and etc. In this tutorial we would Create Stopwatch Timer for both android and iOS react native mobile applications. The Stopwatch Timer has seconds and minutes count, i was unable to add the milliseconds countdown here guys because the setInterval() function is not working properly fast in milliseconds count. So i am making the Stopwatch in seconds and minutes count. Guys if you know the solution to adding the milliseconds count here with proper speed then please comment below. Thank you guys 🙂 .

 Content in this project React Native Create Stopwatch Timer Android iOS Example Tutorial:

1. Import StyleSheet, Text, View and TouchableOpacity component in your project.

2. Create constructor() in your main class. Inside the constructor() make 4 states named as timer, minutes_Counter, seconds_Counter & startDisable.

  • timer : Used to hold the timer setInterval() object.
  • minutes_Counter : Used to hold the minutes count.
  • seconds_Counter : Used to hold the seconds count.
  • startDisable : To enable and disable the Start & Clear button while stop watch is running.

3. Create componentWillUnmount() inbuilt life cycle function and clear the timer after app minimizing.

4. Create a function named as onButtonStart(). We would call this function on Start button click event. Using this function we would start the stopwatch and start calculating time in seconds and minutes format. The JavaScript setInterval() is used here with 1000 time parameter which represents 1 Second. So it will update the time after each 1 second passed.

5. Create a function named as onButtonStop(). In this function we would simply stop the setInterval() function and make the state value true again so the Start and Clear button will be enabled again.

6. Create a function named as onButtonClear(). In this function we would set the timer value to null so it will stopped and set all the values to Zero again.

7. Create a Text component to Show minutes and seconds value in render’s return block with 3 Touchable Opacity buttons.

8. Creating Style.

9. Complete source code for App.js file class.

Screenshots:

Create Stopwatch Timer

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *