Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meharbhutta/react-native-circular-timer
Circular Timer component for React Native
https://github.com/meharbhutta/react-native-circular-timer
circular circular-timer circular-timer-component react-native react-native-circular-timer react-native-component react-native-timer react-native-ui react-native-ui-components timer timer-component
Last synced: about 17 hours ago
JSON representation
Circular Timer component for React Native
- Host: GitHub
- URL: https://github.com/meharbhutta/react-native-circular-timer
- Owner: meharbhutta
- License: mit
- Created: 2019-05-01T07:18:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-05-12T09:55:19.000Z (over 4 years ago)
- Last Synced: 2024-10-13T01:09:28.849Z (about 1 month ago)
- Topics: circular, circular-timer, circular-timer-component, react-native, react-native-circular-timer, react-native-component, react-native-timer, react-native-ui, react-native-ui-components, timer, timer-component
- Language: JavaScript
- Size: 1.01 MB
- Stars: 10
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# react-native-circular-timer
Circular Timer component for React Native
## NPM
- stable release version: 
- package downloads: 
- [](http://opensource.org/licenses/MIT)
## Show Case
## Getting Started
### Installation
```bash
npm i react-native-circular-timer --save
```
### Basic Usage
- Initialization of a react-native project
```bash
$ npx react-native init AwesomeProject
```
### Note: [GUIDE](https://facebook.github.io/react-native/docs/getting-started)
- Then, edit `AwesomeProject/App.js`, like this:
```javascript
import { View } from 'react-native';
import CircularTimer from 'react-native-circular-timer';
export default class App extends Component {
_restartTimer = () => {
if (this._timerRef) this._timerRef.restart();
};
render() {
return (
(this._timerRef = refs)}
onTimeElapsed={() => {
console.log('Timer Finished!');
}}
showSecond={true}
/>
Restart Timer
);
}
}
```
### Props
| parameter | type | required | description | default |
| :-------------------- | :------- | :------- | :----------------------------------- | :---------- |
| seconds | number | yes | Time in seconds | |
| radius | number | yes | Radius of the circle | |
| showSecond | boolean | no | To show the `sec` keyword with timer | `false` |
| borderWidth | number | no | The border width of the circle | `10` |
| borderColor | string | no | The color of the border | `"#0E3657"` |
| borderBackgroundColor | string | no | The background color of the border | `"#A8C3BC"` |
| circleColor | string | no | The color of the circle | `"#FFF"` |
| style | object | no | To apply style to the timer | |
| textStyle | object | no | To override the text style | default |
| secondStyle | object | no | To override the second style | default |
| onTimeElapsed | function | no | Callback for the timer end | () => {} |
### Methods
| method | description |
| :------ | :------------------------- |
| restart | To restart the timer again |
### Note:
Firstly, you need to create reference of the component and then call the restart method using that reference [GUIDE](https://stackoverflow.com/questions/37949981/call-child-method-from-parent).
### To run example
```bash
cd example
npm install
npx react-native run-android (For android)
npx react-native run-ios (For ios)
```
#### In case of any issue follow the [GUIDE](https://facebook.github.io/react-native/docs/getting-started).
### Supported React Native Versions
This project aims to support any version of React Native.
If you require new features or bug fixes for older versions you can fork this project.
### Credits
The idea for this modules came from MrToph react-native-countdown-circle package.
### Licenses
CircularTimer - MIT © MeharBhutta