Create a Multiple Timezone(Digital & Analog) Clock using React-Native

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:

• React Native
• React Native State
• React Native Props

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 TimeZoneApp

Step 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-analog

Step 3: Install the picker package to selection of the county

npm i @react-native-picker/picker

Step 4: Install the luxon package for multiple countries timezone

npm i luxon

Project 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