{"id":18487239,"url":"https://github.com/talalmajali/react-native-countdown-component","last_synced_at":"2025-04-08T20:30:49.542Z","repository":{"id":27228704,"uuid":"112860023","full_name":"talalmajali/react-native-countdown-component","owner":"talalmajali","description":"React Native CountDown","archived":false,"fork":false,"pushed_at":"2024-01-18T00:22:40.000Z","size":100,"stargazers_count":276,"open_issues_count":67,"forks_count":241,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-06T18:08:01.214Z","etag":null,"topics":["countdown","countdown-timer","counter","react-native","timer"],"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/talalmajali.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-02T16:59:11.000Z","updated_at":"2025-04-04T13:27:06.000Z","dependencies_parsed_at":"2024-06-18T13:40:09.237Z","dependency_job_id":"7e3af067-0ccd-4eee-a399-5855a270f362","html_url":"https://github.com/talalmajali/react-native-countdown-component","commit_stats":{"total_commits":74,"total_committers":6,"mean_commits":"12.333333333333334","dds":0.06756756756756754,"last_synced_commit":"ed831e2dbbc2809401ac653f2a095eab02e5967c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talalmajali%2Freact-native-countdown-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talalmajali%2Freact-native-countdown-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talalmajali%2Freact-native-countdown-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talalmajali%2Freact-native-countdown-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/talalmajali","download_url":"https://codeload.github.com/talalmajali/react-native-countdown-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247922687,"owners_count":21018845,"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":["countdown","countdown-timer","counter","react-native","timer"],"created_at":"2024-11-06T12:50:20.636Z","updated_at":"2025-04-08T20:30:48.888Z","avatar_url":"https://github.com/talalmajali.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-native-countdown\nReact Native CountDown\n\n## Installation\nRun `npm install react-native-countdown-component --save` OR `yarn add react-native-countdown-component --save`\n\n## Props\n| Name | Description | Type | Default Value |\n| :--- | :----- | :--- | :---: |\n| id | Counter id, to determine whether to reset the counter or not | string | null |\n| style | Override the component style | object | {} |\n| digitStyle |  Digit style | object | {backgroundColor: ![#FAB913](https://placehold.it/15/FAB913/000000?text=+) `'#FAB913'`} |\n| digitTxtStyle | Digit Text style | object | {color: ![#FAB913](https://placehold.it/15/000000/000000?text=+) `'#000'`} |\n| timeLabelStyle | Time Label style | object | {color: ![#FAB913](https://placehold.it/15/000000/000000?text=+) `'#000'`} |\n| separatorStyle | Separator style | object | {color: ![#FAB913](https://placehold.it/15/000000/000000?text=+) `'#000'`} |\n| size | Size of the countdown component | number | 15 |\n| until | Number of seconds to countdown | number | 0 |\n| onFinish | What function should be invoked when the time is 0 | func | null |\n| onChange | What function should be invoked when the timer is changing | func | null |\n| onPress | What function should be invoked when clicking on the timer | func | null |\n| timeToShow | What Digits to show | array | ['D', 'H', 'M', 'S'] |\n| timeLabels | Text to show in time label | object | {d: 'Days', h: 'Hours', m: 'Minutes', s: 'Seconds'} |\n| showSeparator | Should show separator | bool | false |\n| running | a boolean to pause and resume the component | bool | true |\n\n\n## Preview\n\n![React Native Countdown](https://media.giphy.com/media/xT0xeLWYNSaLerFGko/giphy.gif \"React Native Countdown\")\n\n## Code\n```javascript\nimport CountDown from 'react-native-countdown-component';\n\nrender() {\n    return (\n      \u003cCountDown\n        until={10}\n        onFinish={() =\u003e alert('finished')}\n        onPress={() =\u003e alert('hello')}\n        size={20}\n      /\u003e\n    )\n}\n```\n\n## Custom Styling Example\n\n![React Native Countdown](https://media.giphy.com/media/wIwc1dinsZhx6v2PxB/giphy.gif \"React Native Countdown\")\n\n## Code\n```javascript\nimport CountDown from 'react-native-countdown-component';\n\nrender() {\n    return (\n      \u003cCountDown\n        until={60 * 10 + 30}\n        size={30}\n        onFinish={() =\u003e alert('Finished')}\n        digitStyle={{backgroundColor: '#FFF'}}\n        digitTxtStyle={{color: '#1CC625'}}\n        timeToShow={['M', 'S']}\n        timeLabels={{m: 'MM', s: 'SS'}}\n      /\u003e\n    )\n}\n```\n\n\n## Separator Example\n\n![React Native Countdown](https://media.giphy.com/media/4H7qQF4UPwQKEc0Qpx/giphy.gif \"React Native Countdown\")\n\n\n## Code\n```javascript\nimport CountDown from 'react-native-countdown-component';\n\nrender() {\n    return (\n      \u003cCountDown\n        size={30}\n        until={1000}\n        onFinish={() =\u003e alert('Finished')}\n        digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}\n        digitTxtStyle={{color: '#1CC625'}}\n        timeLabelStyle={{color: 'red', fontWeight: 'bold'}}\n        separatorStyle={{color: '#1CC625'}}\n        timeToShow={['H', 'M', 'S']}\n        timeLabels={{m: null, s: null}}\n        showSeparator\n      /\u003e\n    )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalalmajali%2Freact-native-countdown-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftalalmajali%2Freact-native-countdown-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalalmajali%2Freact-native-countdown-component/lists"}