React Native Analog Clock

React native analog clock using setInterval and Javascript styling.

Install

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

Import AnalogClock.js

import AnalogClock from './AnalogClock';

Usage

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'}}>

        <AnalogClock
          minuteHandLength={110}
        />

      </View>
    )
  }
}

Add a background image

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

<Image
  style={{width: this.props.clockSize - this.props.clockBorderWidth*2,
    height: this.props.clockSize - this.props.clockBorderWidth*2}}
  resizeMode='stretch'
  source={require('./img/clockBack.png')}
/>

Properties

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

License

GNU General Public License v3.0