{"id":4307,"url":"https://github.com/xinghui0000/react-native-progress-button","last_synced_at":"2025-07-31T13:31:02.278Z","repository":{"id":143805346,"uuid":"98965266","full_name":"xinghui0000/react-native-progress-button","owner":"xinghui0000","description":"A react native button component that can show progress.","archived":false,"fork":false,"pushed_at":"2017-08-18T09:07:52.000Z","size":8069,"stargazers_count":19,"open_issues_count":1,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-30T16:43:53.377Z","etag":null,"topics":["button","progress-bar","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xinghui0000.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}},"created_at":"2017-08-01T06:02:11.000Z","updated_at":"2024-10-25T11:05:14.000Z","dependencies_parsed_at":"2024-01-27T01:19:47.064Z","dependency_job_id":"2448e44a-6b2a-4d10-86cf-063b0218ec84","html_url":"https://github.com/xinghui0000/react-native-progress-button","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/xinghui0000%2Freact-native-progress-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xinghui0000%2Freact-native-progress-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xinghui0000%2Freact-native-progress-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xinghui0000%2Freact-native-progress-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xinghui0000","download_url":"https://codeload.github.com/xinghui0000/react-native-progress-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228248582,"owners_count":17891447,"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":["button","progress-bar","react-native"],"created_at":"2024-01-05T20:17:07.579Z","updated_at":"2024-12-05T06:31:41.939Z","avatar_url":"https://github.com/xinghui0000.png","language":"JavaScript","readme":"# react-native-progress-button\n[![npm version](https://badge.fury.io/js/react-native-progress-button.svg)](https://badge.fury.io/js/react-native-progress-button)\n[![Build Status](https://travis-ci.org/xinghui0000/react-native-progress-button.svg?branch=master)](https://travis-ci.org/xinghui0000/react-native-progress-button)\n\nA react native button component that can show progress.\n\n![ScreenShot-ios](https://github.com/xinghui0000/react-native-progress-button/blob/master/screenshots/react-native-progress-demo-ios.gif?raw=true)\n![ScreenShot-android](https://github.com/xinghui0000/react-native-progress-button/blob/master/screenshots/react-progress-button-demo-android.gif?raw=true)\n\n## Installation\n`\n$ npm install react-native-progress-button --save\n`\n\n## Usage\n```\nimport {ProgressButton} from 'react-native-progress-button';\n\n\u003cProgressButton {...props}/\u003e\n```\n\n### Properties\nProps | Description | Default \n------- | ------- |------- \n`style` | button style\u003cbr\u003e -`width`: width of button\u003cbr\u003e -`height`:height of button.\u003cbr\u003e -`borderWidth`:width of outer border. \u003cbr\u003e-`borderRadius`: radius of outer border, this will influence inner progress view in android.\u003cbr\u003e -`backgroundColor`: background color of button, not visiable when `buttonState` is 'static'.\u003cbr\u003e -`padding`: padding area betweenn outer border and inner progresss view  | -`width`:400\u003cbr\u003e -`height`:40\u003cbr\u003e -`borderWidth`:0\u003cbr\u003e -`borderRadius`:5\u003cbr\u003e-`backgroundColor`:'limegreen'\u003cbr\u003e-`padding`:0\n`buttonState` | the state which control button whether in progress, one of three follow value:\u003cbr\u003e-`'staic'`: static button, button not in progress.\u003cbr\u003e-`'indeterminate'`: indeterminate progress button, `activityIndicator` is shown.\u003cbr\u003e-`'progress'`: like progress bar. | `'static'`\n`smoothly` | whether the progress is smooth,only used when `buttonState` is `'progress'` | `true`\n`paused` | Whether to pause the animation of progress,\u003cbr\u003e-`false`: pause a progress animation or deley new progress animation start.\u003cbr\u003e-`true`: restart a progress animation, The progress speed is the same as before the pause, **so try not set `timingConfig` before restart the progress**| `false`\n`timingConfig` | config of the [Animated.timing()](https://facebook.github.io/react-native/docs/animated.html#timing) in which smooth progress animation used. `duration`, `delay`, `easing` | `{duration: 100}`\n`progressColor` | background color of inner progress bar. | `'limegreen'`\n`unfilledColor` | Color of the remaining progress. | `'lightgrey'`\n`progress` | Progress value when the button in 'progress' state. A number between 0 and `maxProgress`| 0 \n`activityIndicator` | a indetermimate indicator when `buttonState` is `'indetermimate'`,shown left of text | [ActitvityIndicator](https://facebook.github.io/react-native/docs/activityindicator.html)\n`activityIndicatorPadding` | padding area between indetermimate indicator and text | 5\n`text` | Text shown in the center of the button | 'OK'\n`textStyle` | text style of the text. they will be included in `style` attr of text | `textStyle:{color: 'white'}`\n`onPress` | A function to be called as soon as the user press the button.`(event, buttonState, progress) =\u003e {}` | \n`onProgressAnimatedFinished` | A function to be called as soon as the progress animation finished, `(progress) =\u003e {}`\n\n\n## Notes\nBecause of [`overflow:hidden` is not supported on Android](https://github.com/facebook/react-native/issues/3198), inner progress view displayed diffrently between android and ios when `buttonState` is progress. inner progress view will has border radius , but not in ios, according to outer border radius in android. And when the progress is small, inner progress view will look odd.**So try not to set border radius too large in android.**\n\n## License\nMIT\n","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxinghui0000%2Freact-native-progress-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxinghui0000%2Freact-native-progress-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxinghui0000%2Freact-native-progress-button/lists"}