Create a Event Countdown App with React Native
In this article, we will create an event countdown time application using React Native. The Event Countdown App is a mobile application developed with React Native. It enables users to effortlessly create and monitor countdown timers for different events.
By providing the event title, selecting a category, and specifying the date and time, users can set up their desired countdown. The app then showcases a timer that displays the remaining time until the event starts. Once the specified event time is reached, the timer will cease counting down, allowing users to promptly remove the countdown if needed.
Preview of final output: Let us have a look at how the final output will look like.
Prerequisites:
- Introduction to React Native
- React Native Components
- React Hooks
- Node.js and NPM
Approach:
- To manage state, we will use the useState and useEffect hooks and use them to maintain different variables. In the application, timers in the state are organized as an array of objects where each timer object encompasses event details, category, target date and time, remaining time.
- The useEffect hook dynamically updates the time remaining for timers based on the current time. It then configures interval timers to run these timers and marks them as inactive when they reach zero.
- The app utilizes the react-native-modal library to display a modal for selecting categories and the react-native-modal-datetime-picker for choosing dates. In addition, it provides brief messages to confirm successful category or date selections, which disappear after a second.
- Users are able to easily create timers by specifying a title, category, and date. To ensure accuracy, the addTimer function not only verifies the input but also calculates the remaining time before appending the new timer
Steps to Create React Native Application
Step 1: Create a React Native Application
npx create-expo-app EventCountdownApp
Step 2: Change the directory to the project folder
cd EventCountdownApp
Step 3: Install required dependences
npm install react-native-modal-datetime-picker
npm install react-native-modal
Project Structure
The updated dependencies in package.json file will look like below:
"dependencies": {
"react-native-paper": "4.9.2",
"@expo/vector-icons": "^13.0.0",
"react-native-modal-datetime-picker": "*",
"@react-native-community/datetimepicker": "6.7.3",
"react-native-modal": "*"
}
Example: In this example, we are using the above-explained approach to create the event countdown app.
- App.js: This file imports all the components and renders them on the screen.
- Style.js: This file adds styling to the application.
Javascript
import React, { useState, useEffect } from "react" ; import { View, Text, TextInput, ScrollView, StyleSheet, TouchableOpacity, } from "react-native" ; import DateTimePickerModal from "react-native-modal-datetime-picker" ; import Modal from "react-native-modal" ; import { styles } from "./Style" ; const categoryColors = { Meeting: "#0984e3" , Birthday: "#00b894" , Reminder: "#00cec9" , }; function App() { const [timers, setTimers] = useState([]); const [newTimerTitle, setNewTimerTitle] = useState( "" ); const [newTimerCategory, setNewTimerCategory] = useState( "" ); const [newTimerDateTime, setNewTimerDateTime] = useState( "" ); const [isDatePickerVisible, setDatePickerVisibility] = useState( false ); const [timerRunning, setTimerRunning] = useState( false ); const [selectedDate, setSelectedDate] = useState( new Date()); const [isModalVisible, setModalVisible] = useState( false ); const [selectedCategory, setSelectedCategory] = useState( "" ); const [categorySelectedMessage, setCategorySelectedMessage] = useState( "" ); const [dateSelectedMessage, setDateSelectedMessage] = useState( "" ); useEffect(() => { const intervalIds = {}; const updateTimers = () => { setTimers((prevTimers) => prevTimers.map((timer) => { const targetTime = new Date(timer.targetDateTime).getTime(); const currentTime = new Date().getTime(); const timeRemaining = Math.max( Math.floor((targetTime - currentTime) / 1000), 0 ); if (timeRemaining === 0) { clearInterval(intervalIds[timer.id]); return { ...timer, isRunning: false , timeRemaining: 0 }; } return { ...timer, timeRemaining }; }) ); }; timers.forEach((timer) => { if (timer.isRunning && timer.timeRemaining > 0 && timerRunning) { intervalIds[timer.id] = setInterval(updateTimers, 1000); } }); return () => { Object.values(intervalIds).forEach((intervalId) => clearInterval(intervalId) ); }; }, [timers, timerRunning]); const removeTimer = (timerId) => { setTimers((prevTimers) => prevTimers.filter((timer) => timer.id !== timerId) ); }; const calculateTimeRemaining = (targetTime) => { const currentTime = new Date().getTime(); const timeDifference = targetTime - currentTime; const secondsRemaining = Math.max(Math.floor(timeDifference / 1000), 0); return secondsRemaining; }; const formatTimeRemaining = (seconds) => { const days = Math.floor(seconds / (3600 * 24)); const hours = Math.floor((seconds % (3600 * 24)) / 3600); const minutes = Math.floor((seconds % 3600) / 60); const remainingSeconds = seconds % 60; return { days, hours, minutes, seconds: remainingSeconds, }; }; const showDatePicker = () => { setDatePickerVisibility( true ); }; const hideDatePicker = () => { setDatePickerVisibility( false ); }; const handleConfirm = (date) => { setSelectedDate(date); setNewTimerDateTime(date.toISOString()); setDateSelectedMessage( "Date has been selected successfully" ); hideDatePicker(); setTimeout(() => { setDateSelectedMessage( "" ); }, 1000); }; const toggleModal = () => { setModalVisible(!isModalVisible); }; const handleCategorySelection = (category) => { setSelectedCategory(category); setCategorySelectedMessage( "Category has been selected successfully" ); setModalVisible( false ); setTimeout(() => { setCategorySelectedMessage( "" ); }, 1000); }; const addTimer = () => { if (!newTimerTitle || !selectedCategory || !newTimerDateTime) return ; const targetDateTime = new Date(newTimerDateTime).getTime(); const newTimer = { id: timers.length + 1, category: selectedCategory, targetDateTime, timeRemaining: calculateTimeRemaining(targetDateTime), isRunning: true , title: newTimerTitle, showTitleInput: false , }; setTimers([...timers, newTimer]); setNewTimerTitle( "" ); setNewTimerCategory( "" ); setNewTimerDateTime( "" ); setTimerRunning( true ); }; return ( <ScrollView style={styles.container}> <View style={styles.inputContainer}> <Text style={styles.heading}>Event Countdown Timer</Text> <TextInput style={styles.input} placeholder= "Timer Title" value={newTimerTitle} onChangeText={(text) => setNewTimerTitle(text)} /> <TouchableOpacity style={styles.button} onPress={toggleModal} disabled={!newTimerTitle} > <Text style={styles.buttonText}>Select Category</Text> </TouchableOpacity> <Modal isVisible={isModalVisible}> <View style={styles.modalContainer}> <Text style={styles.modalTitle}>Select a Category</Text> <TouchableOpacity style={styles.categoryButton} onPress={() => handleCategorySelection( "Meeting" )} > <Text style={styles.buttonText}>Meeting</Text> </TouchableOpacity> <TouchableOpacity style={styles.categoryButton} onPress={() => handleCategorySelection( "Birthday" )} > <Text style={styles.buttonText}>Birthday</Text> </TouchableOpacity> <TouchableOpacity style={styles.categoryButton} onPress={() => handleCategorySelection( "Reminder" )} > <Text style={styles.buttonText}>Reminder</Text> </TouchableOpacity> </View> </Modal> <Text style={styles.messageText}> {categorySelectedMessage} </Text> <TouchableOpacity style={styles.button} onPress={showDatePicker} disabled={!newTimerTitle || !selectedCategory} > <Text style={styles.buttonText}>Select Date</Text> </TouchableOpacity> <DateTimePickerModal isVisible={isDatePickerVisible} mode= "datetime" onConfirm={handleConfirm} onCancel={hideDatePicker} /> <Text style={styles.messageText}>{dateSelectedMessage}</Text> <TouchableOpacity style={styles.button} onPress={addTimer} disabled={ !newTimerTitle || !selectedCategory || !newTimerDateTime } > <Text style={styles.buttonText}>Add Timer</Text> </TouchableOpacity> </View> <View style={styles.timersContainer}> {timers.map((timer) => { const timeRemaining = formatTimeRemaining( timer.timeRemaining ); return ( <View key={timer.id} style={[ styles.card, { backgroundColor: categoryColors[timer.category] || "transparent" , }, ]} > <Text style={styles.cardTitle}>{timer.title}</Text> <Text style={styles.cardCategory}> {timer.category} </Text> <View style={styles.timerInfo}> {timeRemaining.days > 0 && ( <View style={styles.timeInfo}> <Text> <Text style={styles.timeValue}> {timeRemaining.days} </Text>{ " " } days </Text> </View> )} <View style={styles.timeInfo}> <Text> <Text style={styles.timeValue}> {timeRemaining.hours} </Text>{ " " } hours </Text> </View> <View style={styles.timeInfo}> <Text> <Text style={styles.timeValue}> {timeRemaining.minutes} </Text>{ " " } minutes </Text> </View> <View style={styles.timeInfo}> <Text> <Text style={styles.timeValue}> {timeRemaining.seconds} </Text>{ " " } seconds </Text> </View> </View> <TouchableOpacity style={styles.button} onPress={() => removeTimer(timer.id)} disabled={timer.timeRemaining <= 0} > <Text style={styles.buttonText}>Remove</Text> </TouchableOpacity> </View> ); })} </View> </ScrollView> ); } export default App; |
Javascript
import { StyleSheet } from "react-native" ; const styles = StyleSheet.create({ container: { flex: 1, }, inputContainer: { margin: 20, }, heading: { fontSize: 30, textAlign: "center" , color: "#0984e3" , margin: 20, fontWeight: "bold" , }, input: { height: 40, borderColor: "gray" , borderWidth: 1, marginBottom: 10, borderRadius: 5, paddingLeft: 10, }, timersContainer: { margin: 10, alignItems: "center" , }, card: { margin: 10, padding: 10, borderRadius: 10, shadowColor: "black" , shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.3, shadowRadius: 4, elevation: 5, backgroundColor: "white" , }, cardTitle: { fontSize: 25, color: "white" , marginBottom: 5, fontWeight: "bold" , }, cardCategory: { fontSize: 20, color: "#2d3436" , marginBottom: 5, fontWeight: "bold" , }, timerInfo: { flexDirection: "row" , alignItems: "center" , }, timeInfo: { backgroundColor: "lightgray" , borderRadius: 5, padding: 5, margin: 2, }, timeValue: { fontWeight: "bold" , }, button: { backgroundColor: "#0984e3" , padding: 10, borderRadius: 5, marginTop: 5, marginBottom: 10, }, buttonText: { color: "white" , textAlign: "center" , }, modalContainer: { backgroundColor: "white" , padding: 20, borderRadius: 10, shadowColor: "black" , shadowOffset: { width: 0, height: 2 }, shadowOpacity: 1, shadowRadius: 4, elevation: 5, }, modalTitle: { fontSize: 18, marginBottom: 10, }, categoryButton: { backgroundColor: "#0984e3" , padding: 10, borderRadius: 5, marginBottom: 10, }, messageText: { color: "green" , textAlign: "center" , marginTop: 10, }, }); export { styles }; |
Steps to run the application:
Step 1: To run react native application use the following command:
npx expo start
Step 2: Depending on your Operating System, type the following command.
- To run on Android:
npx react-native run-android
- To run on iOS:
npx react-native run-ios
Output: