{"id":19502870,"url":"https://github.com/phamfoo/react-native-animated-spinkit","last_synced_at":"2025-04-09T10:10:11.805Z","repository":{"id":39373378,"uuid":"223931589","full_name":"phamfoo/react-native-animated-spinkit","owner":"phamfoo","description":"A collection of loading indicators for React Native","archived":false,"fork":false,"pushed_at":"2021-06-26T14:46:40.000Z","size":2487,"stargazers_count":315,"open_issues_count":0,"forks_count":22,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-02T06:07:45.730Z","etag":null,"topics":["animations","loading","react-native","spinkit","spinners"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/phamfoo.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}},"created_at":"2019-11-25T11:22:52.000Z","updated_at":"2025-03-28T18:58:21.000Z","dependencies_parsed_at":"2022-07-13T06:50:52.823Z","dependency_job_id":null,"html_url":"https://github.com/phamfoo/react-native-animated-spinkit","commit_stats":null,"previous_names":["tienphaw/react-native-animated-spinkit"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Freact-native-animated-spinkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Freact-native-animated-spinkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Freact-native-animated-spinkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Freact-native-animated-spinkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phamfoo","download_url":"https://codeload.github.com/phamfoo/react-native-animated-spinkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248018061,"owners_count":21034048,"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":["animations","loading","react-native","spinkit","spinners"],"created_at":"2024-11-10T22:18:42.780Z","updated_at":"2025-04-09T10:10:11.781Z","avatar_url":"https://github.com/phamfoo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Animated SpinKit\n\n[![Stable Release](https://img.shields.io/npm/v/react-native-animated-spinkit.svg)](https://npm.im/react-native-animated-spinkit) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)\n\nA pure JavaScript port of [SpinKit](https://github.com/tobiasahlin/SpinKit) for React Native.\n\n![](demo.gif)\n\n## Why Another Port?\n\nThe previous port of [SpinKit](https://github.com/tobiasahlin/SpinKit) for React Native ([react-native-spinkit](https://github.com/maxs15/react-native-spinkit)) is a native module so it requires extra native dependencies and can't be used in [Expo](https://expo.io) projects without ejecting.\n\nThis library is a pure JavaScript port of SpinKit implemented with the [Animated](https://facebook.github.io/react-native/docs/animated) API, which means you can use it in any React Native project and the spinners will look identical on Android and iOS.\n\n## Installation\n\n```sh\nyarn add react-native-animated-spinkit\n```\n\nor\n\n```sh\nnpm install react-native-animated-spinkit\n```\n\n## Usage\n\n```js\nimport { Plane } from 'react-native-animated-spinkit'\n\nfunction App() {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cPlane size={48} color=\"#FFF\" /\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n## Props\n\nInherits [View Props](https://facebook.github.io/react-native/docs/view#props)\n\n### size\n\n\u003e `number` | defaults to `48`\n\nWidth and height of the spinner.\n\n### color\n\n\u003e `string` | defaults to `#000`\n\nColor of the spinner.\n\n### animating\n\n\u003e `boolean` | defaults to `true`\n\nWhether to show the indicator or hide it.\n\n### hidesWhenStopped\n\n\u003e `boolean` | defaults to `true`\n\nWhether the indicator should hide when not animating.\n\n## Spinners\n\nAll the spinners from [SpinKit](https://github.com/tobiasahlin/SpinKit) have been ported.\n\n- `\u003cPlane /\u003e`\n- `\u003cChase /\u003e`\n- `\u003cBounce /\u003e`\n- `\u003cWave /\u003e`\n- `\u003cPulse /\u003e`\n- `\u003cFlow /\u003e`\n- `\u003cSwing /\u003e`\n- `\u003cCircle /\u003e`\n- `\u003cCircleFade /\u003e`\n- `\u003cGrid /\u003e`\n- `\u003cFold /\u003e`\n- `\u003cWander /\u003e`\n\n## Example\n\nTo run the example project, follow these steps:\n\n- Clone the repo\n- Run these commands\n\n```sh\nyarn\ncd example\nyarn \u0026\u0026 yarn start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphamfoo%2Freact-native-animated-spinkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphamfoo%2Freact-native-animated-spinkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphamfoo%2Freact-native-animated-spinkit/lists"}