Create a Stop Watch using React Native
React Native simplifies cross-platform app development for iOS, Android, and the web using a single codebase. Install Node.js, Expo CLI, and leverage Expo’s seamless experience for creating high-performance apps.
Stopwatches servetime as vital tools for accurately measuring time intervals. By the capabilitieswe of React Native, we can effortlessly 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.
Prerequisites:
- Introduction to React Native
- React Native Components
- Expo CLI
- Node.js and npm (Node Package Manager)
Steps to Create React Native Application:
Step 1: Create a react native application by using this command
npx create-expo-app StopwatchApp
Step 2: After creating your project folder, i.e. StopwatchApp, use the following command to navigate to it:
cd StopwatchApp
Project Structure:
Approach: Stopwatch App using useRef and useState
In this approach we are creates 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 useState hook is utilized for managing the state of both the time (representing current elapsed time) and running variables in the stopwatch. On the other hand, the useRef hook is employed to store references to both the interval and start time, ensuring precise calculations of time. The functions startStopwatch, pauseStopwatch, resetStopwatch, and resumeStopwatch are responsible for handling the behavior of the stopwatch. They effectively manage interval timers, update the elapsed time, and control its running state based on user actions. The UI components in the JSX are rendered by the return statement. It showcases various elements like the header, subheader, current elapsed time, and buttons that change based on the stopwatch’s state. To ensure consistent and organized styling, StyleSheet.create function is used to define styles.
Javascript
import React, { useState, useRef } from 'react' ; import { View, Text, StyleSheet, TouchableOpacity } from 'react-native' ; const App = () => { // State and refs to manage time and stopwatch status const [time, setTime] = useState(0); const [running, setRunning] = useState( false ); const intervalRef = useRef( null ); const startTimeRef = useRef(0); // Function to start the stopwatch const startStopwatch = () => { startTimeRef.current = Date.now() - time * 1000; intervalRef.current = setInterval(() => { setTime(Math.floor((Date.now() - startTimeRef.current) / 1000)); }, 1000); setRunning( true ); }; // Function to pause the stopwatch const pauseStopwatch = () => { clearInterval(intervalRef.current); setRunning( false ); }; // Function to reset the stopwatch const resetStopwatch = () => { clearInterval(intervalRef.current); setTime(0); setRunning( false ); }; // Function to resume the stopwatch const resumeStopwatch = () => { startTimeRef.current = Date.now() - time * 1000; intervalRef.current = setInterval(() => { setTime(Math.floor( (Date.now() - startTimeRef.current) / 1000)); }, 1000); setRunning( true ); }; return ( <View style={styles.container}> <Text style={styles.header}> w3wiki </Text> <Text style={styles.subHeader}> Stop Watch In Native </Text> <Text style={styles.timeText}>{time}s</Text> <View style={styles.buttonContainer}> {running ? ( <TouchableOpacity style={[styles.button, styles.pauseButton]} onPress={pauseStopwatch} > <Text style={styles.buttonText}>Pause</Text> </TouchableOpacity> ) : ( <> <TouchableOpacity style={[styles.button, styles.startButton]} onPress={startStopwatch} > <Text style={styles.buttonText}>Start</Text> </TouchableOpacity> <TouchableOpacity style={[styles.button, styles.resetButton]} onPress={resetStopwatch} > <Text style={styles.buttonText}> Reset </Text> </TouchableOpacity> </> )} {!running && ( <TouchableOpacity style={[styles.button, styles.resumeButton]} onPress={resumeStopwatch} > <Text style={styles.buttonText}> Resume </Text> </TouchableOpacity> )} </View> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center' , alignItems: 'center' , }, header: { fontSize: 30, color: "green" , marginBottom: 10, }, subHeader: { fontSize: 18, marginBottom: 10, color: "blue" , }, timeText: { fontSize: 48, }, buttonContainer: { flexDirection: 'row' , marginTop: 20, }, button: { paddingVertical: 10, paddingHorizontal: 20, borderRadius: 5, }, startButton: { backgroundColor: '#2ecc71' , marginRight: 10, }, resetButton: { backgroundColor: '#e74c3c' , marginRight: 10, }, pauseButton: { backgroundColor: '#f39c12' , }, resumeButton: { backgroundColor: '#3498db' , }, buttonText: { color: 'white' , fontSize: 16, }, }); export default App; |
Step 3: Open the Terminal/CMD and type the command listed below to run the React native application.
npx expo start
To run on Android:
npx react-native run-android
To run on Ios:
npx react-native run-ios
Output:
Contact Us