AnalogClock React Native Component

A highly customizable analog clock component for React Native. This component allows you to customize various aspects of the clock, including its hands, hour markers, background, and more.

Installation

npm install react-native-analog-watch-face

or using yarn:

yarn add react-native-analog-watch-face

Usage

import React from 'react';
import { View } from 'react-native';
import AnalogClock from 'react-native-analog-watch-face';

const App = () => {
  return (
    <View>
      <AnalogClock
        backgroundImage={{ uri: 'https://i.pinimg.com/736x/f1/e6/8e/f1e68ef9e34b3f0c2dcde5dcffbf580b.jpg'}}
        hourTextStyle={{
          color: '#f9f9f9'
        }}
        date={new Date(2025,0,31,4,18,18)}
        showDate={true}
        dateStyle={{
          backgroundColor: '#fff',
          borderRadius: 5,
        }}
        dateTextStyle={{
          fontWeight: 'bold'
        }}
        blurRadius={4}
        hourHandStyle={{
          backgroundColor: '#dcdcdc'
        }}
      />
    </View>
  );
};

export default App;

Props

Prop	Type	Default	Description
date	Date	new Date()	The initial date and time for the clock.
dateStyle	ViewStyle	{}	Style for the date container.
dateTextStyle	TextStyle	{}	Style for the date text.
pause	boolean	false	Whether the clock should pause ticking.
interval	number	1000	The interval in milliseconds for the clock update.
steps	number	1000	The step increment in milliseconds when updating time.
showDate	boolean	false	Whether to show the date on the clock.
backgroundImage	ImageSource	undefined	image object as the clock's background.
blurRadius	number	0	The blur effect applied to the background image.
minutesLineStyle	ViewStyle	{}	Style for the minute tick marks.
hourMarkerComponent	(hour: number) => ReactNode	undefined	Custom component for the hour markers.
hourTextStyle	TextStyle	{}	Style for the hour marker text.
clockFaceStyle	ViewStyle	{}	Style for the clock face container.
minuteHandStyle	ViewStyle	{}	Style for the minute hand.
secondsHandStyle	ViewStyle	{}	Style for the second hand.
hourHandStyle	ViewStyle	{}	Style for the hour hand.
centerDotStyle	ViewStyle	{}	Style for the center dot of the clock.

Example Customization

<AnalogClock
  showDate={true}
  clockFaceStyle={{ borderWidth: 10, borderColor: 'black', backgroundColor: 'white' }}
  hourHandStyle={{ backgroundColor: 'blue' }}
  minuteHandStyle={{ backgroundColor: 'green' }}
  secondsHandStyle={{ backgroundColor: 'red' }}
  centerDotStyle={{ backgroundColor: 'black' }}
  hourMarkerComponent={(hour) => <Text style={{ color: 'blue' }}>{hour === 0 ? 12 : hour}</Text>}
/>

License

MIT