Create a Multiple Timezone (Digital & Analog) Clock using React-Native
Last Updated :
01 Jul, 2025
Improve
Multiple Timezone (Digital & Analog) Clock is a React Native app that allows users to select and view the time in different time zones, both in digital and analog formats, enhancing their understanding of time differences around the world.
To give you a better idea of what we’re going to create, let’s watch a demo video:
Demo Video
Playground
Note: This Section is to interact with the app which you are going to build.
Prerequisite
Approach to create a 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 the selected timezone and current time.
- When users select a timezone, the app updates the current time and country using the Luxon library.
Step-by-Step Implementation
Step 1: Create a React Native Project
Now, create a project with the following command.
npx create-expo-app app-name --template
Note: Replace the app-name with your app name for example : react-native-demo-app
Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.
It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.
Now go into your project folder, i.e., react-native-demo
cd app-nameProject Structure:
Step 2: Run Application
Start the server by using the following command.
npx expo startThen, the application will display a QR code.
For the Android users,
- For the Android Emulator, press " a" as mentioned in the image below.
- For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.
For iOS users, simply scan the QR code using the Camera app.
If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.
Step 3: Updated Dependencies
The updated dependencies in the package.json file will look like:
"dependencies": {
"react-native-paper": "5.14.5",
"@expo/vector-icons": "^14.1.0",
"react-native-clock-analog": "0.0.3",
"luxon": "3.6.1"
}
Step 4: Start Coding
Example: Write the below source code into the App.js file.
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,
},
});
