How to create a live clock in React Native

In React Native, creating a live clock is a useful feature to display real-time updates in mobile applications. Developers can build a dynamic clock that updates automatically as time progresses. With the help of JavaScript's built-in Date object and the React Native framework, a live clock can be integrated to enhance the user experience with accurate and up-to-date time information.

Installing dependencies

We'll need to install the react-native-paper package using npm, so make sure that your React Native application is built before we proceed.

You can see here how to create a React Native application.

Navigate to the root directory of your React Native project and install the dependencies using the following commands.

The react-native-paper is useful because it provides a set of pre-designed and customizable UI components, following Google's Material Design guidelines, allowing developers to create visually appealing and consistent user interfaces in React Native applications.

Code

The given code demonstrates how to build a live clock in a React Native application. By updating the state with the current time every second, the clock dynamically displays the accurate time in an appealing card format. The Clock.js component is rendered within the App.js file, and contains all the logic and code for implementing a live clock.

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Card } from 'react-native-paper';

export default class Clock extends React.Component {
  constructor() {
    super();
    this.state = {
      time: new Date(),
    };
  }
  update = () => {
    this.setState({ time: new Date() });
  };
  componentDidMount() {
    setInterval(this.update, 1000);
  }
  render() {
    return (
      <View style={stylesheet.viewstyling}>
        <Card style={stylesheet.cardstyling}>
          <Text style={stylesheet.textstyle}>
            {this.state.time.toLocaleTimeString('en-US')}
          </Text>
        </Card>
      </View>
    );
  }
}

const stylesheet = StyleSheet.create({
  viewstyling: {
    justifyContent: 'center',
    textAlign: 'center',
    marginTop: 95,
  },

  cardstyling: {
    padding: 50,
    marginLeft: 15,
    marginRight: 15,
    textAlign: 'center',
  },

  textstyle: {
    textAlign: 'center',
    justifyContent: 'center',

    fontSize: 35,
    fontWeight: 'bold',
  },
});

Rendering a live clock in React Native

Note: Press 'w' key to see the output in web browser.

Lines 6–11: The constructor is a special method that initializes the state of the Clock component. Here, it sets the initial state with a property named time, which holds the current date and time using the new Date().
Lines 12–14: The update is a class method. The purpose of this method is to update the state of the component by setting the time property to the current date and time using the new Date().
Lines 15–17: The componentDidMount method is a lifecycle hook in React that is called automatically after the component has been rendered to the screen. In this method, a setInterval function is used to call the update method every 1000 milliseconds (1 second). This creates a timer that updates the time state property every second, effectively making the clock display the live time.

The combination of the constructor, update, and componentDidMount methods ensure that the Clock component initializes with the current time and then updates it every second. This results in a live clock display that stays up to date in real time.

Free Resources