{"id":20683387,"url":"https://github.com/meharbhutta/react-native-circular-timer","last_synced_at":"2025-04-22T12:23:30.951Z","repository":{"id":57336050,"uuid":"184382053","full_name":"meharbhutta/react-native-circular-timer","owner":"meharbhutta","description":"Circular Timer component for React Native","archived":false,"fork":false,"pushed_at":"2020-05-12T09:55:19.000Z","size":1058,"stargazers_count":10,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-13T01:09:28.849Z","etag":null,"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"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meharbhutta.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null}},"created_at":"2019-05-01T07:18:11.000Z","updated_at":"2023-01-06T16:07:44.000Z","dependencies_parsed_at":"2022-09-11T02:00:14.822Z","dependency_job_id":null,"html_url":"https://github.com/meharbhutta/react-native-circular-timer","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meharbhutta%2Freact-native-circular-timer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meharbhutta%2Freact-native-circular-timer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meharbhutta%2Freact-native-circular-timer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meharbhutta%2Freact-native-circular-timer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meharbhutta","download_url":"https://codeload.github.com/meharbhutta/react-native-circular-timer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224974655,"owners_count":17401108,"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":["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"],"created_at":"2024-11-16T22:16:26.738Z","updated_at":"2024-11-16T22:16:27.391Z","avatar_url":"https://github.com/meharbhutta.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-circular-timer\n\nCircular Timer component for React Native\n\n\u003ca href=\"https://twitter.com/intent/follow?screen_name=meharbhutta\"\u003e\n    \u003cimg \n        src=\"https://img.shields.io/twitter/follow/meharbhutta.svg?style=social\u0026logo=twitter\"\n        alt=\"follow on Twitter\"\n    \u003e\n\u003c/a\u003e\n\n## NPM\n\n- stable release version: ![version](https://img.shields.io/badge/version-1.1.4-blue.svg?cacheSeconds=2592000)\n- package downloads: ![downloads](https://img.shields.io/badge/downloads-22%2Fweek-brightgreen.svg?cacheSeconds=2592000)\n- [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n\n## Show Case\n\n![](https://raw.githubusercontent.com/meharbhutta/react-native-circular-timer/master/example/react-native-circular-timer.gif)\n\n## Getting Started\n\n### Installation\n\n```bash\nnpm i react-native-circular-timer --save\n```\n\n### Basic Usage\n\n- Initialization of a react-native project\n\n```bash\n$ npx react-native init AwesomeProject\n```\n\n### Note: [GUIDE](https://facebook.github.io/react-native/docs/getting-started)\n\n- Then, edit `AwesomeProject/App.js`, like this:\n\n```javascript\nimport { View } from 'react-native';\nimport CircularTimer from 'react-native-circular-timer';\n\nexport default class App extends Component\u003cProps\u003e {\n  _restartTimer = () =\u003e {\n    if (this._timerRef) this._timerRef.restart();\n  };\n\n  render() {\n    return (\n      \u003cView\n        style={{\n          flex: 1,\n          justifyContent: 'center',\n          alignItems: 'center',\n          backgroundColor: 'white'\n        }}\n      \u003e\n        \u003cCircularTimer\n          ref={refs =\u003e (this._timerRef = refs)}\n          onTimeElapsed={() =\u003e {\n            console.log('Timer Finished!');\n          }}\n          showSecond={true}\n        /\u003e\n        \u003cTouchableOpacity\n          onPress={this._restartTimer}\n          style={{\n            marginTop: 20,\n            borderRadius: 6,\n            backgroundColor: '#000000'\n          }}\n        \u003e\n          \u003cText\n            style={{\n              padding: 16,\n              fontSize: 18,\n              color: 'white',\n              fontWeight: 'bold'\n            }}\n          \u003e\n            Restart Timer\n          \u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n### Props\n\n| parameter             | type     | required | description                          | default     |\n| :-------------------- | :------- | :------- | :----------------------------------- | :---------- |\n| seconds               | number   | yes      | Time in seconds                      |             |\n| radius                | number   | yes      | Radius of the circle                 |             |\n| showSecond            | boolean  | no       | To show the `sec` keyword with timer | `false`     |\n| borderWidth           | number   | no       | The border width of the circle       | `10`        |\n| borderColor           | string   | no       | The color of the border              | `\"#0E3657\"` |\n| borderBackgroundColor | string   | no       | The background color of the border   | `\"#A8C3BC\"` |\n| circleColor           | string   | no       | The color of the circle              | `\"#FFF\"`    |\n| style                 | object   | no       | To apply style to the timer          |             |\n| textStyle             | object   | no       | To override the text style           | default     |\n| secondStyle           | object   | no       | To override the second style         | default     |\n| onTimeElapsed         | function | no       | Callback for the timer end           | () =\u003e {}    |\n\n### Methods\n\n| method  | description                |\n| :------ | :------------------------- |\n| restart | To restart the timer again |\n\n### Note: \nFirstly, 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).\n\n### To run example\n\n```bash\ncd example\nnpm install\nnpx react-native run-android (For android)\nnpx react-native run-ios (For ios)\n```\n\n#### In case of any issue follow the [GUIDE](https://facebook.github.io/react-native/docs/getting-started).\n\n### Supported React Native Versions  \n\nThis project aims to support any version of React Native.\n\nIf you require new features or bug fixes for older versions you can fork this project.\n\n### Credits\n\nThe idea for this modules came from MrToph react-native-countdown-circle package.\n\n### Licenses\n\nCircularTimer - MIT © MeharBhutta\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeharbhutta%2Freact-native-circular-timer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeharbhutta%2Freact-native-circular-timer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeharbhutta%2Freact-native-circular-timer/lists"}