Multiple Timezone (Digital & Analog) Clock is a React Native app that allows users to select and view the time in different timezones, both in digital and analog formats, enhancing the understanding of time differences across the world.
Preview of final output: Let us have a look at how the final output will look like.
Output Preview
Prerequisite:
Approach To create Multiple Timezone Clock:
- The app enables users to choose a timezone corresponding to different countries.
- It begins by showing the current time for “India.”
- To manage user choices, the app employs useState for both selected timezone and current time.
- When users select a timezone, the app updates the current time and country using the luxon library.
Steps to Create React Native Application:
Step 1: Create a react native application by using this command in command prompt
React-native init TimeZoneAppStep 2: After initiating the project, install the react-native-clock-analog package to view the analog clock of different countries
npm install react-native-clock-analogStep 3: Install the picker package to selection of the county
npm i @react-native-picker/pickerStep 4: Install the luxon package for multiple countries timezone
npm i luxonProject Structure:
Project Structure
The updated dependencies in package.json file will look like:
"dependencies": {
"react-native-paper": "4.9.2",
"@expo/vector-icons": "^13.0.0",
"react-native-clock-analog": "*",
"luxon": "*"
}
Example: Write the below source code into the App.js file.
Javascript
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View,
SafeAreaView, Picker
} from 'react-native';
import AnalogClock from 'react-native-clock-analog';
import { DateTime } from 'luxon';
const getTimeInTimeZone = (timeZone) => { return DateTime.now().setZone(timeZone).toFormat('T');
};const timeZones = [ { label: 'London', value: 'Europe/London', color: '#93E2E0' },
{ label: 'Tokyo', value: 'Asia/Tokyo', color: '#DCA0E3' },
{ label: 'Sydney', value: 'Australia/Sydney', color: '#F1DD8B' },
{ label: 'Indian Time Zone', value: 'Asia/Kolkata', color: '#DE9181' },
{ label: 'United States', value: 'America/New_York', color: '#8189DE' },
{ label: 'United Kingdom', value: 'Europe/London', color: '#93E2E0' },
{ label: 'Japan', value: 'Asia/Tokyo', color: '#DCA0E3' },
{ label: 'Australia', value: 'Australia/Sydney', color: '#F1DD8B' },
{ label: 'Canada', value: 'America/Toronto', color: '#F1DD8B' },
{ label: 'Germany', value: 'Europe/Berlin', color: '#93E2E0' },
{ label: 'France', value: 'Europe/Paris', color: '#F1DD8B' },
{ label: 'China', value: 'Asia/Shanghai', color: '#F1DD8B' },
{ label: 'Brazil', value: 'America/Sao_Paulo', color: '#93E2E0' },
{ label: 'India', value: 'Asia/Kolkata', color: '#DE9181' },
{ label: 'South Africa', value: 'Africa/Johannesburg', color: '#8189DE' },
{ label: 'Mexico', value: 'America/Mexico_City', color: '#F1DD8B' },
];const countryTimeZones = { 'United States': 'America/New_York',
'United Kingdom': 'Europe/London',
'Japan': 'Asia/Tokyo',
'Australia': 'Australia/Sydney',
'Canada': 'America/Toronto',
'Germany': 'Europe/Berlin',
'France': 'Europe/Paris',
'China': 'Asia/Shanghai',
'Brazil': 'America/Sao_Paulo',
'India': 'Asia/Kolkata',
'South Africa': 'Africa/Johannesburg',
'Mexico': 'America/Mexico_City',
};export default function App() {
const [selectedTimeZone, setSelectedTimeZone] =
useState(timeZones[0].value);
const [time, setTime] =
useState(DateTime.now());
const [clockType, setClockType] =
useState('analog');
useEffect(() => {
const interval = setInterval(() => {
setTime(DateTime.now());
}, 1000);
return () => clearInterval(interval);
}, []);
const renderClock = () => {
if (clockType === 'analog') {
return (
<AnalogClock
colorClock={
timeZones.find(
(zone) =>
zone.value ===
selectedTimeZone).color
}
colorNumber="#000000"
colorCenter="#00BCD4"
colorHour="#FF8F00"
colorMinutes="#FFC400"
hour={time.setZone(selectedTimeZone).hour}
minutes={time.setZone(selectedTimeZone).minute}
seconds={time.setZone(selectedTimeZone).second}
autostart={true}
showSeconds={true}
key={time.toISO()}
/>
);
} else {
return (
<Text style={
[styles.digitalClock,
{
color:
timeZones.find(
(zone) =>
zone.value ===
selectedTimeZone).color
}]}>
{getTimeInTimeZone(selectedTimeZone)}
</Text>
);
}
};
return (
<SafeAreaView style={styles.container}>
<Text style={styles.heading}>GeekforGeeks</Text>
<Text style={styles.subHeading}>
Multiple Timezone Digital & Analog App
</Text>
<View style={styles.controlsContainer}>
<View style={styles.timezonePicker}>
<View style={styles.country}>
<Text style=
{
{ fontWeight: 'bold' }
}>
Select Country
</Text>
<Picker
selectedValue={selectedTimeZone}
onValueChange=
{
(itemValue) =>
setSelectedTimeZone(itemValue)
}>
{Object.entries(countryTimeZones)
.map(([country, timeZone]) => (
<Picker.Item label={`${country}`}
value={timeZone} key={country} />
))}
</Picker>
</View>
</View>
<View style={styles.clockTypePicker}>
<View style={{
padding: 10,
borderRadius: 20,
marginTop: 20,
backgroundColor: 'lightgreen',
elevation: 5,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 4,
}}>
<Text style={{ fontWeight: 'bold' }}>
Select Clock Type
</Text>
<Picker
selectedValue={clockType}
onValueChange={
(itemValue) =>
setClockType(itemValue)
}>
<Picker.Item label="Analog Clock" value="analog" />
<Picker.Item label="Digital Clock" value="digital" />
</Picker>
</View>
</View>
</View>
<View style={styles.clockContainer}>
<View style=
{
[styles.colorMarker,
{
backgroundColor:
timeZones.find(
(zone) =>
zone.value ===
selectedTimeZone).color
}
]} />
<Text style=
{
[styles.title,
{
color:
timeZones.find(
(zone) =>
zone.value ===
selectedTimeZone).color
}]}>
{
timeZones.find(
(zone) =>
zone.value ===
selectedTimeZone).label
}
</Text>
{renderClock()}
</View>
</SafeAreaView>
);
}const styles = StyleSheet.create({ container: {
flex: 1,
alignItems: 'center',
margin: 10,
backgroundColor: '#FEFFF1',
borderRadius: 10,
elevation: 5,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 4,
},
timezonePicker: {
marginBottom: 20,
},
clockContainer: {
alignItems: 'center',
},
title: {
fontSize: 23,
marginBottom: 10,
},
digitalClock: {
fontSize: 20,
},
controlsContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 20,
marginLeft: 20,
marginRight: 20,
},
clockTypePicker: {
flex: 1,
marginLeft: 10,
},
heading: {
fontSize: 40,
color: 'darkgreen',
fontWeight: 'bold',
marginTop: 20,
backgroundColor: '#99FF99',
borderRadius: 10,
elevation: 5,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 4,
},
subHeading: {
marginBottom: 20,
fontSize: 20,
padding: 20,
color: 'darkgreen',
fontWeight: 'bold',
marginTop: 10,
},
country: {
padding: 10,
borderRadius: 20,
marginTop: 20,
backgroundColor: 'lightgreen',
elevation: 5,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 4,
},
}); |
Step to run the Project:
Step 1: Depending on your operating system type the following command in terminal
- For android:
React-native run-android
- For IOS:
React-native run-ios
Output:
output