|
Our main objective focuses on constructing a straightforward and user-friendly countdown timer that impeccably showcases the remaining time left in terms of years, days, hours, minutes, and seconds until a specific date.
To set up your development environment, begin by installing Node.js. Next, utilize the Expo CLI edition to seamlessly execute React Native apps. Expo, a platform built on JavaScript and React, caters to creating cross-platform mobile applications for iOS, Android, and web environments. It provides an array of tools and services that effectively streamline the entire development process.
Prerequisites- Introduction to React Native
- React Native Components
- Expo CLI
- Node.js and npm (Node Package Manager)
Steps to Create React Native ApplicationStep 1: Create a react native application by using this command
npx create-expo-app CountdownTimerApp Step 2: After creating your project folder, i.e. CountdownTimerApp, use the following command to navigate to it
cd CountdownTimerApp Project Structure.png)
ApproachIn this Approach, we will use the `react-native-modal-datetime-picker` library to enable date and time selection. Upon launching, the app sets a default countdown date and time, then calculates and displays the remaining time in terms of years, days, hours, minutes, and seconds using an aesthetically pleasing format. The user can easily start or reset the countdown by pressing dedicated buttons labeled “Start Timer” and “Reset Timer,” respectively. Upon completion of the countdown, the timer automatically resets itself.
To Install the react-native-modal-datetime-picker` library use the following command:
npm install react-native-modal-datetime-picker Example: In this example, we’ll use above explained approach
JavaScript
// App.js
import React, { useState, useEffect } from "react";
import {
SafeAreaView,
StyleSheet,
Text,
View,
Button,
} from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";
const App = () => {
const [isDatePickerVisible, setDatePickerVisible] =
useState(false);
const [expiryDate, setExpiryDate] = useState(
new Date()
); // Default to current date and time
const [timeUnits, setTimeUnits] = useState({
years: 0,
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
});
useEffect(() => {
const calculateTimeUnits = (timeDifference) => {
const seconds = Math.floor(
timeDifference / 1000
);
setTimeUnits({
years: Math.floor(
seconds / (365 * 24 * 60 * 60)
),
days: Math.floor(
(seconds % (365 * 24 * 60 * 60)) /
(24 * 60 * 60)
),
hours: Math.floor(
(seconds % (24 * 60 * 60)) / (60 * 60)
),
minutes: Math.floor(
(seconds % (60 * 60)) / 60
),
seconds: seconds % 60,
});
};
const updateCountdown = () => {
const currentDate = new Date().getTime();
const expiryTime = expiryDate.getTime();
const timeDifference = expiryTime - currentDate;
if (timeDifference <= 0) {
// Countdown finished
calculateTimeUnits(0);
} else {
calculateTimeUnits(timeDifference);
}
};
updateCountdown();
const interval = setInterval(updateCountdown, 1000);
return () => clearInterval(interval);
}, [expiryDate]);
const formatTime = (time) => {
return time.toString().padStart(2, "0");
};
const handleStartTimer = () => {
setDatePickerVisible(true);
};
const handleResetTimer = () => {
setExpiryDate(new Date()); // Reset to current date and time
};
const handleDateConfirm = (date) => {
setExpiryDate(date);
setDatePickerVisible(false);
};
const handleDateCancel = () => {
setDatePickerVisible(false);
};
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<Text style={styles.title}>
Geeksforgeeks
</Text>
<Text style={styles.subtitle}>
React Native Countdown Timer
</Text>
<View style={styles.timer}>
<Text
style={[
styles.timeUnit,
styles.yearUnit,
]}
>
{formatTime(timeUnits.years)}
</Text>
<Text
style={styles.timeSeparator}
></Text>
<Text
style={[
styles.timeUnit,
styles.dayUnit,
]}
>
{formatTime(timeUnits.days)}
</Text>
<Text
style={styles.timeSeparator}
></Text>
<Text
style={[
styles.timeUnit,
styles.hourUnit,
]}
>
{formatTime(timeUnits.hours)}
</Text>
<Text
style={styles.timeSeparator}
></Text>
<Text
style={[
styles.timeUnit,
styles.minuteUnit,
]}
>
{formatTime(timeUnits.minutes)}
</Text>
<Text
style={styles.timeSeparator}
></Text>
<Text
style={[
styles.timeUnit,
styles.secondUnit,
]}
>
{formatTime(timeUnits.seconds)}
</Text>
<Text
style={styles.timeSeparator}
></Text>
</View>
<Text style={styles.timetitle}>
Years Days Hours Minutes Seconds
</Text>
<View style={styles.buttonContainer}>
<Button
title="Start Timer"
onPress={handleStartTimer}
style={styles.button}
/>
<Button
title="Reset Timer"
onPress={handleResetTimer}
style={[
styles.button,
styles.resetButton,
]}
/>
</View>
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="datetime"
onConfirm={handleDateConfirm}
onCancel={handleDateCancel}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#f0f0f0",
},
title: {
fontSize: 30,
fontWeight: "bold",
paddingVertical: 20,
color: "green",
},
subtitle: {
marginBottom: 20,
fontSize: 18,
},
timer: {
flexDirection: "row",
alignItems: "center",
},
timeUnit: {
fontSize: 24,
fontWeight: "bold",
paddingHorizontal: 10,
paddingVertical: 5,
},
yearUnit: {
backgroundColor: "red",
borderRadius: 15,
color: "white",
},
dayUnit: {
backgroundColor: "#3498db",
borderRadius: 15,
color: "white",
},
hourUnit: {
backgroundColor: "#27ae60",
borderRadius: 15,
color: "white",
},
minuteUnit: {
backgroundColor: "#f39c12",
borderRadius: 15,
color: "white",
},
secondUnit: {
backgroundColor: "#9b59b6",
borderRadius: 15,
color: "white",
},
timeSeparator: {
fontSize: 24,
fontWeight: "bold",
marginHorizontal: 5,
},
timetitle: {
fontSize: 17,
padding: 10,
paddingRight: 19,
fontWeight: "bold",
},
});
export default App;
Step 3: To run the react native application, open the Terminal and enter the command listed below.
npx expo start npx react-native run-android npx react-native run-ios Output:
|
