# A Beginner's Guide: Creating a React Native Timer App

A Timer is a productivity app and is of immense importance. It helps users stay focused. If you are someone who practices Pomodoro, then you might know how effective a timer app is. Not only it helps in productivity enhancement, but it is used for time management, task tracking, and mindfulness practice.

This article brings you a real guide to building a functional timer app. You may be thinking that it needs a thorough knowledge of coding and other technicalities. However, it is not. Choosing the right framework can simplify the process. Therefore, we will use the most user-friendly Javascript framework, React Native. Experts of the [React Native app development company](https://www.4waytechnologies.com/react-native-app-development) have an excellent time developing software with this framework.

So, let’s start with building a react native set timer.

## Project Prerequisites
Here, it covers the prior needed steps of the project. These are mentioned below.
### Get The Environment
You can build a React Native project with React Native CLI or Expo CLI. For this particular project, consider React Native CLI. Whatever option you choose, first set up your environment. Please note that the setup process may vary for Windows and Mac users.

Here is a simplified guide for setting up the environment on Windows:

**Install Node.js and NPM:** Node.js is a JavaScript runtime environment, and NPM is the package manager for Node.js. Install both tools by downloading the official installer from the Node.js website and following the installation instructions.

**Install React Native CLI**: Open your command prompt or terminal and run the following command to install React Native CLI globally: npm install -g react-native-cli

**Install Android Studio:** Android Studio provides the necessary tools for Android app development, including the Android SDK. Download and install Android Studio from the official website. Select and install the Android SDK and the required dependencies during the installation process.

**Configure Android Studio:** After installing Android Studio, set up a virtual device AVD for your React Native projects.

**Set up a Code Editor or IDE:** Choose an integrated development environment. It is a code editor used to write the code. Although Visual Studio Code is a familiar choice, you can use any other editor.

### Create a Folder
It is the folder for the project. This is meant to save project code and store essential assets.

Choose a specific location on your dev system to store your project. Right-click in that location and select "New Folder" to create a new local folder. Go to the same, and open the terminal. In the same terminal, type the command (npx react-native init Timer --version 0.71.3) and click Enter.

This command will initialize a new " Timer " project folder using RN version 0.71.3.

### Install the Relevant Libraries
For our timer app project, use the react-native-stopwatch-timer library. This library provides a convenient way to add timer and stopwatch functionality to the React Native set timer app. It offers features like reset, lap recording, and start/stop buttons.

Once the installation is complete, find the react-native-stopwatch-timer library saved in the package-lock.json file of your project. This file keeps track of all the installed packages and their versions.

### The Codebase for the Project
Let’s create the main App.js file. For a clear understanding, refer to the code snippets and explanations given for each snippet.


In the first snippet, the code gets various modules from distinct libraries. It imports a React Native hook, useState, from the React library. The useState defines and manages the state. From the React Native library, the code gets StyleSheet, View, Text, SafeAreaView, and TouchableHighlight. These components organize the app's layout. Additionally, it gets the Timer component from the external react-native-stopwatch-timer library.


Here, the snippet specifies a functional component, 'App'. Within the App component, a useState hook is used. It defines three states: isTimerStart, timerDuration, and resetTimer.

The initial value of isTimerStart is false, indicating that the built timer is not active initially. timerDuration is initially set to 90000.

Similarly, the initial value of resetTimer is false. It specifies that users have not reset the timer yet.


This part defines the styling of two objects. The first is the ‘container’, and other is the ‘text’. It has a unique background color, padding, border radius, width, text color, font size, left margin, and alignment of items.


In this part, the 'View' creates a designated space for the Timer app. The 'Text' displays the header "React Native Timer". Styling is applied to the components. It contains predefined styles for the View, Text, and SafeAreaView elements. It specifies the appearance and layout of the build.


The Timer component is incorporated alongside the 'View' in the snippet. The 'View' acts as a container for the app. The 'sectionStyle', an object, is used to design the container's layout.

Different props are used in this snippet. The 'totalDuration' indicates the length of the timer. The 'start' starts the timer, the 'reset' resets the timer, and the 'options' allows customize the timer's appearance.

The 'handleFinish' is activated when the timer completes its countdown. It displays an alert message "Complete Function". The 'getTime' updates the timer. It logs the current timing to the console using console.log().


It has two TouchableHighlight components with respective onPress event handlers.

An arrow function is activated on licking the initial 'TouchableHighlight'. SetResetTimer and setIsTimerStart functions are activated inside this component to make necessary updates. The 'setIsTimerStart' updates the 'isTimerStart' state. The 'setResetTimer' updates the resetTimer state.

The 'Text' component is used to add text to the button.

The second TouchableHighlight has different functionality. When users press this button, the event handler assigns setIsTimerStart to false, whereas setResetTimer to true.


It is the styling part of the project. You can tweak the value of its styling element to give it a unique look to your app.

### Run the Program
This is the final step of this project. This is important to ensure that the program is successfully created. To do this, run the given commands in the terminal.

* npm install
* npx react-native run-android

**Note:** Run the two commands on your project terminal. Refer to the project output.


Start practicing, and you will soon get hold of it.