{"id":3940,"url":"https://github.com/oblador/react-native-progress","last_synced_at":"2025-05-13T19:12:46.935Z","repository":{"id":37451103,"uuid":"45328957","full_name":"oblador/react-native-progress","owner":"oblador","description":"Progress indicators and spinners for React Native","archived":false,"fork":false,"pushed_at":"2024-02-05T10:46:07.000Z","size":945,"stargazers_count":3645,"open_issues_count":121,"forks_count":518,"subscribers_count":41,"default_branch":"master","last_synced_at":"2025-04-20T07:39:38.865Z","etag":null,"topics":[],"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/oblador.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},"funding":{"github":["oblador"]}},"created_at":"2015-11-01T05:07:41.000Z","updated_at":"2025-04-16T03:42:47.000Z","dependencies_parsed_at":"2023-02-17T19:46:00.990Z","dependency_job_id":"3e71ca61-caca-4144-8f1f-f3b080087c08","html_url":"https://github.com/oblador/react-native-progress","commit_stats":{"total_commits":141,"total_committers":39,"mean_commits":"3.6153846153846154","dds":0.2907801418439716,"last_synced_commit":"cbcca1b76d6418218d79de975ecedf65f5673705"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oblador","download_url":"https://codeload.github.com/oblador/react-native-progress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250870884,"owners_count":21500558,"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":[],"created_at":"2024-01-05T20:16:55.953Z","updated_at":"2025-04-25T18:27:04.872Z","avatar_url":"https://github.com/oblador.png","language":"JavaScript","readme":"# react-native-progress\n\nProgress indicators and spinners for React Native using React Native SVG.\n\n![progress-demo](https://cloud.githubusercontent.com/assets/378279/11212043/64fb1420-8d01-11e5-9ec0-5e175a837c62.gif)\n\n## Installation\n\n`$ npm install react-native-progress --save`\n\n### React Native SVG based components\n\nTo use the `Pie` or `Circle` components, you need to install [React Native SVG](https://github.com/react-native-svg/react-native-svg) in your project.\n\n## Usage\n\n_Note: If you don't want the React Native SVG based components and it's dependencies, do a deep require instead: `import ProgressBar from 'react-native-progress/Bar';`._\n\n```js\nimport * as Progress from 'react-native-progress';\n\n\u003cProgress.Bar progress={0.3} width={200} /\u003e\n\u003cProgress.Pie progress={0.4} size={50} /\u003e\n\u003cProgress.Circle size={30} indeterminate={true} /\u003e\n\u003cProgress.CircleSnail color={['red', 'green', 'blue']} /\u003e\n```\n\n### Properties for all progress components\n\n| Prop                                 | Description                                                                  | Default                |\n| ------------------------------------ | ---------------------------------------------------------------------------- | ---------------------- |\n| **`animated`**                       | Whether or not to animate changes to `progress`.                             | `true`                 |\n| **`indeterminate`**                  | If set to true, the indicator will spin and `progress` prop will be ignored. | `false`                |\n| **`indeterminateAnimationDuration`** | Sets animation duration in milliseconds when indeterminate is set.           | `1000`                 |\n| **`progress`**                       | Progress of whatever the indicator is indicating. A number between 0 and 1.  | `0`                    |\n| **`color`**                          | Fill color of the indicator.                                                 | `rgba(0, 122, 255, 1)` |\n| **`unfilledColor`**                  | Color of the remaining progress.                                             | _None_                 |\n| **`borderWidth`**                    | Width of outer border, set to `0` to remove.                                 | `1`                    |\n| **`borderColor`**                    | Color of outer border.                                                       | `color`                |\n\n### `Progress.Bar`\n\nAll of the props under _Properties_ in addition to the following:\n\n| Prop                  | Description                                                                    | Default             |\n| --------------------- | ------------------------------------------------------------------------------ | ------------------- |\n| **`width`**           | Full width of the progress bar, set to `null` to use automatic flexbox sizing. | `150`               |\n| **`height`**          | Height of the progress bar.                                                    | `6`                 |\n| **`borderRadius`**    | Rounding of corners, set to `0` to disable.                                    | `4`                 |\n| **`useNativeDriver`** | Use native driver for the animations.                                          | `false`             |\n| **`animationConfig`** | Config that is passed into the `Animated` function.                            | `{ bounciness: 0 }` |\n| **`animationType`**   | Animation type to animate the progress, one of: `decay`, `timing`, `spring`.   | `spring`            |\n\n### `Progress.Circle`\n\nAll of the props under _Properties_ in addition to the following:\n\n| Prop                       | Description                                                                                                                  | Default            |\n| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------ |\n| **`size`**                 | Diameter of the circle.                                                                                                      | `40`               |\n| **`endAngle`**             | Determines the endAngle of the circle. A number between `0` and `1`. The final endAngle would be the number multiplied by 2π | `0.9`              |\n| **`thickness`**            | Thickness of the inner circle.                                                                                               | `3`                |\n| **`showsText`**            | Whether or not to show a text representation of current progress.                                                            | `false`            |\n| **`formatText(progress)`** | A function returning a string to be displayed for the textual representation.                                                | _See source_       |\n| **`textStyle`**            | Styles for progress text, defaults to a same `color` as circle and `fontSize` proportional to `size` prop.                   | _None_             |\n| **`allowFontScaling`**     | Whether or not to respect device font scale setting.                                                                         | _true_             |\n| **`direction`**            | Direction of the circle `clockwise` or `counter-clockwise`.                                                                  | `clockwise`        |\n| **`strokeCap`**            | Stroke Cap style for the circle `butt`, `square` or `round`.                                                                 | `butt`             |\n| **`fill`**                 | Fill color of the inner circle.                                                                                              | None (transparent) |\n\n### `Progress.Pie`\n\nAll of the props under _Properties_ in addition to the following:\n\n| Prop       | Description          | Default |\n| ---------- | -------------------- | ------- |\n| **`size`** | Diameter of the pie. | `40`    |\n\n### `Progress.CircleSnail`\n\n| Prop                   | Description                                                     | Default                |\n| ---------------------- | --------------------------------------------------------------- | ---------------------- |\n| **`animating`**        | If the circle should animate.                                   | `true`                 |\n| **`hidesWhenStopped`** | If the circle should be removed when not animating.             | `false`                |\n| **`size`**             | Diameter of the circle.                                         | `40`                   |\n| **`color`**            | Color of the circle, use an array of colors for rainbow effect. | `rgba(0, 122, 255, 1)` |\n| **`thickness`**        | Thickness of the circle.                                        | `3`                    |\n| **`duration`**         | Duration of animation.                                          | `1000`                 |\n| **`spinDuration`**     | Duration of spin (orbit) animation.                             | `5000`                 |\n| **`strokeCap`**        | Stroke Cap style for the circle `butt`, `square` or `round`.    | `round`                |\n\n## Examples\n\n- [`Example` project bundled with this module](https://github.com/oblador/react-native-progress/tree/master/Example)\n- [react-native-image-progress](https://github.com/oblador/react-native-image-progress)\n\n## [Changelog](https://github.com/oblador/react-native-progress/releases)\n\n## Thanks\n\nTo [Mandarin Drummond](https://github.com/MandarinConLaBarba) for giving me the NPM name.\n\n## License\n\n[MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson 2015-\n","funding_links":["https://github.com/sponsors/oblador"],"categories":["Components","JavaScript","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foblador%2Freact-native-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foblador%2Freact-native-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foblador%2Freact-native-progress/lists"}