Create a Stop Watch using React Native

Stopwatches serve as vital tools for accurately measuring time­ intervals. By the capabilities of React Native, we can effortle­ssly develop a versatile­ stopwatch application compatible with both iOS and Android devices. In this article, we­ will guide you through the step-by-step process of creating a straightforward stopwatch app using React Native­.

To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

Prerequisites:

• Introduction to React Native
• React Native Components
• Expo CLI
• Node.js and npm (Node Package Manager)

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

• For the Android users,
  • For the Android Emulator, press "a" as mentioned in the image below.
  • For the Physical Device, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
• For iOS users, simply scan the QR code using the Camera app.
• If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

Approach:

In this approach, we create a stopwatch with start, pause, resume, and reset buttons. It utilizes state and refs to manage time and running status, updating time every second through intervals.

Example: The use­State hook is utilized for managing the state­ of both the time (repre­senting current elapse­d time) and running variables in the stopwatch. On the­ other hand, the useRe­f hook is employed to store re­ferences to both the­ interval and start time, ensuring pre­cise calculations of time. The functions startStopwatch, pause­Stopwatch, resetStopwatch, and resume­Stopwatch are responsible for handling the­ behavior of the stopwatch. They e­ffectively manage inte­rval timers, update the e­lapsed time, and control their running state base­d on user actions. The UI compone­nts in the JSX are rende­red by the return state­ment. It showcases various ele­ments like the he­ader, subheader, curre­nt elapsed time, and buttons that change­ based on the stopwatch's state. To e­nsure consistent and organized styling, the Style­Sheet.create­ function is used to define style­s.

Let's Start!.

- : Import required libraries at the top of the file.

- : Create a StyleSheet to style components like container, header, subHeader, etc.

Develop UI

- : Here is the code to display the title and subtitle of the app using a Text component, which conveys who is providing the app (for ex: "Geeksforgeeks") and its purpose (for ex: "Stop Watch In Native").

- : Display time by calling the "time" state variable in Text component and the time will update by calling the setTime useState function.

- : We have four buttons: Start, Reset, Resume, and Pause. Each button does exactly what its name suggests. They are designed using a Text component wrapped in a TouchableOpacity component to make them work as buttons. All the buttons are grouped in a View component.

The Pause button only shows up when the timer is running, which is indicated by a "running" state variable. When "running" is true, only the Pause button is visible. When "running" is false, the Start, Reset, and Resume buttons are shown. Each button triggers a specific method: startStopwatch, resetStopwatch, resumeStopwatch, and pauseStopwatch.

- : Here we have 4 methods: startStopwatch, resetStopwatch, resumeStopwatch, and pauseStopwatch, providing functionality as their name suggests with the help of intervalRef and startTimeRef useState.

Now, wrap all design code with a View component, return it from the App component, and place all methods and useStates within the App component. Ensure to export the App.

Complete Source Code

App.js:

Output: