0.0.7 • Published 7 years ago
react-native-another-analog-clock v0.0.7
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