react-native-clock-analog

React Native library to generate analog clock.

Usage no npm install needed!

<script type="module">
  import reactNativeClockAnalog from 'https://cdn.skypack.dev/react-native-clock-analog';
</script>

README

React Native: react-native-clock-analog

GitHub package version github home platforms github home npm

github issues github closed issues Issue Stats github license

📖 Getting started

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

💻 Usage

import * as React from 'react';
import { StyleSheet, Text, View, ImageBackground } from 'react-native';

import AnalogClock from 'react-native-clock-analog';

export default class App extends React.Component {
  render() {
    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="2"
            minutes={55}
          />
        </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.
colorClock string rgba(255,255,255,0.8) Clock color.
colorNumber string #ffffff #ffffff Color of the clock numbers.
colorCenter string #ffffff #ffffff Clock center color.
colorHour string #ffffff #ffffff Clock hour hand color.
colorMinutes string rgba(255,255,255,0.7) Clock minute hand color.
hour number Hour.
minutes number Minutes.

📜 License

This library is provided under the Apache License.