[![Language](]( [![Platforms](](

Usage no npm install needed!

<script type="module">
  import reactNativeAnotherAnalogClock from '';


Language Platforms Donate

React Native Analog Clock

React native analog clock using setInterval and Javascript styling.

Analog Clock preview


This component is built with React Native 0.39+ and works for Android and iOS.

Import AnalogClock.js

import AnalogClock from './AnalogClock';


Basic Usage

import React, { Component } from 'react';
import { View } from 'react-native';
import AnalogClock from './AnalogClock';

export default class ClockContainer extends Component {

  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>



Add a background image

Uncomment the following in the AnalogClock.js render function and change image source to path to your image.

  style={{width: this.props.clockSize - this.props.clockBorderWidth*2,
    height: this.props.clockSize - this.props.clockBorderWidth*2}}


Property name Type Default Description
clockSize number 270 The size of the clock frame
clockBorderColor string 'black' The color of the frame border
clockBorderWidth number 7 The width of the frame border
clockCentreColor string 'black' The color of the clock centre
clockCentreSize number 15 The size of the clock centre
hourHandColor string 'black' The color of the hour hand
hourHandCurved boolean true Curved hour hand tip
hourHandLength number 70 The length of the hour hand
hourHandWidth number 5.5 The width of the hour hand
hourHandOffset number 0 Hour hand offset from the centre
minuteHandColor string 'black' The color of the minute hand
minuteHandCurved boolean true Curved minute hand tip
minuteHandLength number 100 The length of the minute hand
minuteHandWidth number 5 The width of the minute hand
minuteHandOffset number 0 Minute hand offset from the centre
secondHandColor string 'black' The color of the second hand
secondHandCurved boolean false Curved hour second tip
secondHandLength number 120 The length of the second hand
secondHandWidth number 2 The width of the second hand
secondHandOffset number 0 Second hand offset from the centre


GNU General Public License v3.0