{"id":16750047,"url":"https://github.com/n4kz/react-native-indicators","last_synced_at":"2025-05-15T10:00:47.930Z","repository":{"id":49730150,"uuid":"88839657","full_name":"n4kz/react-native-indicators","owner":"n4kz","description":"Activity indicator collection for React Native","archived":false,"fork":false,"pushed_at":"2023-07-08T05:33:29.000Z","size":309,"stargazers_count":937,"open_issues_count":17,"forks_count":128,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-30T09:51:35.096Z","etag":null,"topics":["android","ios","react","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":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/n4kz.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"license.txt","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-04-20T08:24:52.000Z","updated_at":"2025-04-29T10:45:01.000Z","dependencies_parsed_at":"2024-06-18T12:25:34.556Z","dependency_job_id":"d85951c5-651f-43e1-a882-aabb1d592214","html_url":"https://github.com/n4kz/react-native-indicators","commit_stats":{"total_commits":150,"total_committers":1,"mean_commits":150.0,"dds":0.0,"last_synced_commit":"381d56b1f2ec1799c9f8a7df05c610eb263d181b"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n4kz%2Freact-native-indicators","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n4kz%2Freact-native-indicators/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n4kz%2Freact-native-indicators/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n4kz%2Freact-native-indicators/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/n4kz","download_url":"https://codeload.github.com/n4kz/react-native-indicators/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252321859,"owners_count":21729428,"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":["android","ios","react","react-native"],"created_at":"2024-10-13T02:26:53.571Z","updated_at":"2025-05-15T10:00:47.689Z","avatar_url":"https://github.com/n4kz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[npm-badge]: https://img.shields.io/npm/v/react-native-indicators.svg?colorB=ff6d00\n[npm-url]: https://npmjs.com/package/react-native-indicators\n[license-badge]: https://img.shields.io/npm/l/react-native-indicators.svg?colorB=448aff\n[license-url]: https://raw.githubusercontent.com/n4kz/react-native-indicators/master/license.txt\n[travis-badge]: https://api.travis-ci.org/n4kz/react-native-indicators.svg?branch=master\n[travis-url]: https://travis-ci.org/n4kz/react-native-indicators?branch=master\n[example-url]: https://user-images.githubusercontent.com/2055622/28246049-e82c70e8-6a1b-11e7-93cc-8aa6d0d19867.gif\n[indicator]: https://facebook.github.io/react-native/docs/activityindicator.html\n[v014-url]: https://github.com/n4kz/react-native-indicators/releases/tag/0.14.0\n\n# react-native-indicators\n\n[![npm][npm-badge]][npm-url]\n[![license][license-badge]][license-url]\n[![travis][travis-badge]][travis-url]\n\nActivity indicator collection for React Native\n\n![example][example-url]\n\n## Features\n\n* Easy to use\n* Consistent look and feel on iOS and Android\n* Can be used as drop-in replacement for [ActivityIndicator][indicator]\n* Configurable appearance and animation\n* Configurable indicator size\n* Native driver based animation\n* Pure javascript implementation\n* Compatible with RN 0.45+, for older versions use [0.14.0][v014-url]\n\n## Installation\n\n```bash\nnpm install --save react-native-indicators\n```\n\n## Usage\n\n```javascript\nimport React, { Component } from 'react';\nimport {\n  BallIndicator,\n  BarIndicator,\n  DotIndicator,\n  MaterialIndicator,\n  PacmanIndicator,\n  PulseIndicator,\n  SkypeIndicator,\n  UIActivityIndicator,\n  WaveIndicator,\n} from 'react-native-indicators';\n\nclass Example extends Component {\n  render() {\n    return (\n      \u003cDotIndicator color='white' /\u003e\n    );\n  }\n}\n```\n\n## Common properties\n\n name               | description                   | type     | default\n:------------------ |:----------------------------- | --------:|:-------------\n animationEasing    | Animation easing function     | Function | Easing.linear\n animationDuration  | Animation duration in ms      |   Number | 1200\n animating          | Animation toggle              |  Boolean | true\n interaction        | Animation is interaction      |  Boolean | true\n hidesWhenStopped   | Hide when not animating       |  Boolean | true\n\n## BallIndicator properties\n\n name  | description         | type   | default\n:----- |:------------------- | ------:|:------------\n color | Component color     | String | rgb(0, 0, 0)\n count | Component count     | Number | 8\n size  | Base component size | Number | 40\n\n## BarIndicator properties\n\n name  | description         | type   | default\n:----- |:------------------- | ------:|:------------\n color | Component color     | String | rgb(0, 0, 0)\n count | Component count     | Number | 3\n size  | Base component size | Number | 40\n\n## DotIndicator properties\n\n name  | description         | type   | default\n:----- |:------------------- | ------:|:------------\n color | Component color     | String | rgb(0, 0, 0)\n count | Component count     | Number | 4\n size  | Base component size | Number | 16\n\n## MaterialIndicator properties\n\n name       | description           | type   | default\n:---------- |:--------------------- | ------:|:------------\n color      | Component color       | String | rgb(0, 0, 0)\n size       | Base component size   | Number | 40\n trackWidth | Indicator track width | Number | size / 10\n\n## PacmanIndicator properties\n\n name  | description         | type   | default\n:----- |:------------------- | ------:|:------------\n color | Component color     | String | rgb(0, 0, 0)\n size  | Base component size | Number | 48\n\n## PulseIndicator properties\n\n name  | description         | type   | default\n:----- |:------------------- | ------:|:------------\n color | Component color     | String | rgb(0, 0, 0)\n size  | Base component size | Number | 40\n\n## SkypeIndicator properties\n\n name     | description             | type   | default\n:-------- |:----------------------- | ------:|:------------\n color    | Component color         | String | rgb(0, 0, 0)\n count    | Component count         | Number | 5\n size     | Base component size     | Number | 40\n minScale | Minimum component scale | Number | 0.2\n maxScale | Maximum component scale | Number | 1.0\n\n## UIActivityIndicator properties\n\n name  | description         | type   | default\n:----- |:------------------- | ------:|:------------\n color | Component color     | String | rgb(0, 0, 0)\n count | Component count     | Number | 12\n size  | Base component size | Number | 40\n\n## WaveIndicator properties\n\n name       | description         | type   | default\n:---------- |:------------------- | ------:|:------------\n color      | Component color     | String | rgb(0, 0, 0)\n count      | Component count     | Number | 4\n size       | Base component size | Number | 40\n waveFactor | Wave base number    | Number | 0.54\n waveMode   | Wave appearance     | String | fill\n\nPossible values for `waveMode` are `fill` and `outline`\n\n## Example\n\n```bash\ngit clone https://github.com/n4kz/react-native-indicators\ncd react-native-indicators/example\nnpm install\nnpm run ios # or npm run android\n```\n\n## Copyright and License\n\nBSD License\n\nCopyright 2017-2019 Alexander Nazarov. All rights reserved.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fn4kz%2Freact-native-indicators","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fn4kz%2Freact-native-indicators","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fn4kz%2Freact-native-indicators/lists"}