{"id":25407876,"url":"https://github.com/gaetanozappi/react-native-clock-analog","last_synced_at":"2025-10-31T03:30:30.885Z","repository":{"id":34077926,"uuid":"169102714","full_name":"gaetanozappi/react-native-clock-analog","owner":"gaetanozappi","description":"React Native library to generate analog clock.","archived":false,"fork":false,"pushed_at":"2022-03-11T13:17:34.000Z","size":138,"stargazers_count":9,"open_issues_count":3,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-07T20:04:56.513Z","etag":null,"topics":["analog","analog-clock","clock","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gaetanozappi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-04T15:47:20.000Z","updated_at":"2024-01-24T11:16:42.000Z","dependencies_parsed_at":"2022-08-08T00:00:42.515Z","dependency_job_id":null,"html_url":"https://github.com/gaetanozappi/react-native-clock-analog","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-native-clock-analog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-native-clock-analog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-native-clock-analog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-native-clock-analog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gaetanozappi","download_url":"https://codeload.github.com/gaetanozappi/react-native-clock-analog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238902730,"owners_count":19549796,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analog","analog-clock","clock","react-native"],"created_at":"2025-02-16T07:19:07.784Z","updated_at":"2025-10-31T03:30:30.557Z","avatar_url":"https://github.com/gaetanozappi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native: react-native-clock-analog\n\n[![GitHub package version](https://img.shields.io/github/package-json/v/gaetanozappi/react-native-clock-analog.svg?style=flat\u0026colorB=2b7cff)](https://github.com/gaetanozappi/react-native-clock-analog)\n[![github home](http://img.shields.io/npm/v/react-native-clock-analog.svg?style=flat)](https://www.npmjs.com/package/react-native-clock-analog)\n![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?style=flat\u0026colorB=191A17)\n[![github home](https://img.shields.io/badge/gaetanozappi-react--native--clock--analog-blue.svg?style=flat)](https://github.com/gaetanozappi/react-native-clock-analog)\n[![npm](https://img.shields.io/npm/dm/react-native-clock-analog.svg?style=flat\u0026colorB=007ec6)](https://www.npmjs.com/package/react-native-clock-analog)\n\n[![github issues](https://img.shields.io/github/issues/gaetanozappi/react-native-clock-analog.svg?style=flat)](https://github.com/gaetanozappi/react-native-clock-analog/issues)\n[![github closed issues](https://img.shields.io/github/issues-closed/gaetanozappi/react-native-clock-analog.svg?style=flat\u0026colorB=44cc11)](https://github.com/gaetanozappi/react-native-clock-analog/issues?q=is%3Aissue+is%3Aclosed)\n[![Issue Stats](https://img.shields.io/issuestats/i/github/gaetanozappi/react-native-clock-analog.svg?style=flat\u0026colorB=44cc11)](http://github.com/gaetanozappi/react-native-clock-analog/issues)\n[![github license](https://img.shields.io/github/license/gaetanozappi/react-native-clock-analog.svg)]()\n\nhttps://user-images.githubusercontent.com/20476002/153429759-b280998a-715c-4f39-ab2c-c62ac1d3b6ed.mov\n\n-   [Usage](#-usage)\n-   [License](#-license)\n\n## 📖 Getting started\n\n`$ npm install react-native-clock-analog --save`\n\n## 💻 Usage\n\n```javascript\nimport React, { useState, useEffect } from 'react';\nimport { StyleSheet, Text, View, ImageBackground } from 'react-native';\nimport AnalogClock from 'react-native-clock-analog';\n\nconst nowDate = () =\u003e {\n  const d = new Date();\n  let second = d.getSeconds();\n  let minute = d.getMinutes();\n  let hour = d.getHours();\n  return { second, minute, hour };\n};\n\nconst nowTimer = () =\u003e {\n  const { second, minute, hour } = nowDate();\n  const [state, setState] = useState({\n    second,\n    minute,\n    hour,\n  });\n\n  useEffect(() =\u003e {\n    setInterval(() =\u003e {\n      const { second, minute, hour } = nowDate();\n      setState({ second, minute, hour });\n    }, 1000);\n  }, [useState]);\n  return state;\n};\n\nexport default function App() {\n  const { second, minute, hour } = nowTimer();\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cImageBackground\n        source={{\n          uri: 'https://i.pinimg.com/originals/62/6f/84/626f84c40696c1308a77fd8331e12b3e.jpg',\n        }}\n        style={{\n          alignItems: 'center',\n          justifyContent: 'center',\n          height: 500,\n          width: 500,\n        }}\u003e\n        \u003cAnalogClock size={100} /\u003e\n        \u003cView style={{ marginBottom: 5 }} /\u003e\n        \u003cAnalogClock\n          colorClock=\"#2196F3\"\n          colorNumber=\"#000000\"\n          colorCenter=\"#00BCD4\"\n          colorHour=\"#FF8F00\"\n          colorMinutes=\"#FFC400\"\n          hour={hour}\n          minutes={minute}\n          seconds={second}\n          showSeconds\n        /\u003e\n      \u003c/ImageBackground\u003e\n    \u003c/View\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: '#ecf0f1',\n    padding: 8,\n  },\n});\n```\n\n## 💻 AutoStart Mode\n\n```javascript\nimport React from 'react';\nimport { StyleSheet, Text, View, ImageBackground } from 'react-native';\nimport AnalogClock from 'react-native-clock-analog';\n\nexport default function App() {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cImageBackground\n        source={{\n          uri: 'https://i.pinimg.com/originals/62/6f/84/626f84c40696c1308a77fd8331e12b3e.jpg',\n        }}\n        style={{\n          alignItems: 'center',\n          justifyContent: 'center',\n          height: 500,\n          width: 500,\n        }}\u003e\n        \u003cAnalogClock size={100} /\u003e\n        \u003cView style={{ marginBottom: 5 }} /\u003e\n        \u003cAnalogClock\n          colorClock=\"#2196F3\"\n          colorNumber=\"#000000\"\n          colorCenter=\"#00BCD4\"\n          colorHour=\"#FF8F00\"\n          colorMinutes=\"#FFC400\"\n          autostart={true}\n          showSeconds\n        /\u003e\n      \u003c/ImageBackground\u003e\n    \u003c/View\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: '#ecf0f1',\n    padding: 8,\n  },\n});\n```\n\n## 💡 Props\n\n| Prop              | Type       | Default | Note                                                                                                       |\n| ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- |\n| `size`       | `number`   |  `180`  | Clock size.\n| `showSeconds`      | `bool`   | `false` | Show the seconds.\n| `autostart`      | `bool`   | `false`  | Autostart, no need external timer\n| `colorClock`      | `string`   | `rgba(255,255,255,0.8)` | Clock color.\n| `colorNumber`      | `string`   | `#000000` | Color of the clock numbers.\n| `colorCenter`      | `string`   | `#000000` | Clock center color.\n| `colorHour`      | `string`   | `#000000`  | Clock hour hand color.\n| `colorMinutes`      | `string`   | `rgba(255,255,255,0.7)`  | Clock minute hand color.\n| `colorSeconds`      | `string`   | `red`  | Clock second hand color.\n| `hour`      | `number`   |  | Hour.\n| `minutes`      | `number`   |  | Minutes.\n| `seconds`      | `number`   |  | Seconds.\n\n## 📜 License\nThis library is provided under the Apache License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaetanozappi%2Freact-native-clock-analog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaetanozappi%2Freact-native-clock-analog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaetanozappi%2Freact-native-clock-analog/lists"}