React Native: react-native-clock-analog

clock.mov

• Usage
• License

📖 Getting started

$ npm install react-native-clock-analog --save

💻 Usage

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, ImageBackground } from 'react-native';
import AnalogClock from 'react-native-clock-analog';

const nowDate = () => {
  const d = new Date();
  let second = d.getSeconds();
  let minute = d.getMinutes();
  let hour = d.getHours();
  return { second, minute, hour };
};

const nowTimer = () => {
  const { second, minute, hour } = nowDate();
  const [state, setState] = useState({
    second,
    minute,
    hour,
  });

  useEffect(() => {
    setInterval(() => {
      const { second, minute, hour } = nowDate();
      setState({ second, minute, hour });
    }, 1000);
  }, [useState]);
  return state;
};

export default function App() {
  const { second, minute, hour } = nowTimer();
  return (
    <View style={styles.container}>
      <ImageBackground
        source={{
          uri: 'https://i.pinimg.com/originals/62/6f/84/626f84c40696c1308a77fd8331e12b3e.jpg',
        }}
        style={{
          alignItems: 'center',
          justifyContent: 'center',
          height: 500,
          width: 500,
        }}>
        <AnalogClock size={100} />
        <View style={{ marginBottom: 5 }} />
        <AnalogClock
          colorClock="#2196F3"
          colorNumber="#000000"
          colorCenter="#00BCD4"
          colorHour="#FF8F00"
          colorMinutes="#FFC400"
          hour={hour}
          minutes={minute}
          seconds={second}
          showSeconds
        />
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

💻 AutoStart Mode

import React from 'react';
import { StyleSheet, Text, View, ImageBackground } from 'react-native';
import AnalogClock from 'react-native-clock-analog';

export default function App() {
  return (
    <View style={styles.container}>
      <ImageBackground
        source={{
          uri: 'https://i.pinimg.com/originals/62/6f/84/626f84c40696c1308a77fd8331e12b3e.jpg',
        }}
        style={{
          alignItems: 'center',
          justifyContent: 'center',
          height: 500,
          width: 500,
        }}>
        <AnalogClock size={100} />
        <View style={{ marginBottom: 5 }} />
        <AnalogClock
          colorClock="#2196F3"
          colorNumber="#000000"
          colorCenter="#00BCD4"
          colorHour="#FF8F00"
          colorMinutes="#FFC400"
          autostart={true}
          showSeconds
        />
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

💡 Props

Prop	Type	Default	Note
size	number	180	Clock size.
showSeconds	bool	false	Show the seconds.
autostart	bool	false	Autostart, no need external timer
colorClock	string	rgba(255,255,255,0.8)	Clock color.
colorNumber	string	#000000	Color of the clock numbers.
colorCenter	string	#000000	Clock center color.
colorHour	string	#000000	Clock hour hand color.
colorMinutes	string	rgba(255,255,255,0.7)	Clock minute hand color.
colorSeconds	string	red	Clock second hand color.
hour	number		Hour.
minutes	number		Minutes.
seconds	number		Seconds.

📜 License

This library is provided under the Apache License.