https://github.com/gaetanozappi/react-native-clock-analog
React Native library to generate analog clock.
https://github.com/gaetanozappi/react-native-clock-analog
analog analog-clock clock react-native
Last synced: 8 months ago
JSON representation
React Native library to generate analog clock.
- Host: GitHub
- URL: https://github.com/gaetanozappi/react-native-clock-analog
- Owner: gaetanozappi
- License: apache-2.0
- Created: 2019-02-04T15:47:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-03-11T13:17:34.000Z (over 4 years ago)
- Last Synced: 2025-02-07T20:04:56.513Z (over 1 year ago)
- Topics: analog, analog-clock, clock, react-native
- Language: JavaScript
- Homepage:
- Size: 135 KB
- Stars: 9
- Watchers: 2
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native: react-native-clock-analog
[](https://github.com/gaetanozappi/react-native-clock-analog)
[](https://www.npmjs.com/package/react-native-clock-analog)
[](https://github.com/gaetanozappi/react-native-clock-analog)
[](https://www.npmjs.com/package/react-native-clock-analog)
[](https://github.com/gaetanozappi/react-native-clock-analog/issues)
[](https://github.com/gaetanozappi/react-native-clock-analog/issues?q=is%3Aissue+is%3Aclosed)
[](http://github.com/gaetanozappi/react-native-clock-analog/issues)
[]()
https://user-images.githubusercontent.com/20476002/153429759-b280998a-715c-4f39-ab2c-c62ac1d3b6ed.mov
- [Usage](#-usage)
- [License](#-license)
## 📖 Getting started
`$ npm install react-native-clock-analog --save`
## 💻 Usage
```javascript
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 (
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
});
```
## 💻 AutoStart Mode
```javascript
import React from 'react';
import { StyleSheet, Text, View, ImageBackground } from 'react-native';
import AnalogClock from 'react-native-clock-analog';
export default function App() {
return (
);
}
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.