react-native-clock

A simple and customizable React Native analog clock component without any external dependency.

Installation

Supported version: react-native >= 0.59.0

npm install react-native-clock

or

yarn add react-native-clock

Example

import Clock from 'react-native-clock';

....

<Clock />
<Clock
 radius={350}
 outerFaceColor={'#686de0'}
 innerFaceColor={'#686de0'}
 secondHandColor={'#badc58'}
 minutesHandColor={'#130f40'}
 hourHandColor={'#30336b'}
 centerDotColor={'#6ab04c'}
/>
<Clock
 secondHandColor={'#badc58'}
 minutesHandColor={'#130f40'}
 hourHandColor={'#30336b'}
 centerDotColor={'#6ab04c'}
 enableTickAnimation
/>

Props

Prop	Description	Type	Default	Required
radius	clock face radius	Number	300	false
showSecondsHand	show clock second hand	Bool	true	false
secondHandColor	second hand color	String	'rgb(227,71,134)'	false
showOuterFace	show/hide clock outer face	Bool	true	false
outerFaceColor	clock outer face color	String	'rgba(200,200,200,0.2)'	false
outerFaceOpacity	clock outer face opacity	Number		false
innerFaceColor	clock inner face color	String	'rgba(200,200,200,0.4)'	false
minutesHandColor	clock minutes hand color	String	'rgba(0,0,0,0.8)'	false
hourHandColor	clock hour hand color	String	'rgba(0,0,0,0.6)'	false
enableTickAnimation	enable/disable second hand tick animation	Bool	false	false
centerDotColor	clock center dot color	String		false

TODO

• Add hour indicators
• Add second indicators
• Add option to enable numbers
• Add time change callback
• Add digital mode

License

This project is licenced under the MIT License.