{"id":4345,"url":"https://github.com/maitrungduc1410/react-native-loader-kit","last_synced_at":"2025-05-07T20:12:34.369Z","repository":{"id":38851127,"uuid":"261696447","full_name":"maitrungduc1410/react-native-loader-kit","owner":"maitrungduc1410","description":"✳️Purely native loader indicators for React Native ✳️","archived":false,"fork":false,"pushed_at":"2024-09-19T02:12:24.000Z","size":10153,"stargazers_count":184,"open_issues_count":1,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T20:12:26.333Z","etag":null,"topics":["react-native","react-native-indicator","react-native-loader","react-native-loader-kit","react-native-loading"],"latest_commit_sha":null,"homepage":"","language":"Java","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/maitrungduc1410.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2020-05-06T08:24:39.000Z","updated_at":"2025-05-03T08:19:55.000Z","dependencies_parsed_at":"2024-01-08T01:02:55.316Z","dependency_job_id":"4c0f416f-3c29-42e5-9eea-a14d43525247","html_url":"https://github.com/maitrungduc1410/react-native-loader-kit","commit_stats":{"total_commits":4,"total_committers":1,"mean_commits":4.0,"dds":0.0,"last_synced_commit":"402be9074c83ff8af40c836566b7a04489e17ef8"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Freact-native-loader-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Freact-native-loader-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Freact-native-loader-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Freact-native-loader-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maitrungduc1410","download_url":"https://codeload.github.com/maitrungduc1410/react-native-loader-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252949285,"owners_count":21830153,"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":["react-native","react-native-indicator","react-native-loader","react-native-loader-kit","react-native-loading"],"created_at":"2024-01-05T20:17:09.012Z","updated_at":"2025-05-07T20:12:34.334Z","avatar_url":"https://github.com/maitrungduc1410.png","language":"Java","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cdiv\u003e\n    React Native Loader Kit\n  \u003c/div\u003e\n  \u003cdiv\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-loader-kit\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dw/react-native-loader-kit\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/react-native-loader-kit\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-native-loader-kit\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/maitrungduc1410/react-native-loader-kit\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/maitrungduc1410/react-native-loader-kit\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/maitrungduc1410/react-native-loader-kit\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/maitrungduc1410/react-native-loader-kit?style=social\" /\u003e\n  \u003c/a\u003e\n  \n  \u003c/div\u003e\n  \u003cbr\u003e\n  \u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./images/demo_android.gif\" style=\"margin-right: 30px;\" /\u003e\n    \u003cimg src=\"./images/demo_ios.gif\" /\u003e\n  \u003c/div\u003e\n  \u003ch2 align=\"center\"\u003e\n    If you like this project, encourage me by giving a ⭐️. Happy hacking\n  \u003c/h2\u003e\n\u003c/h1\u003e\n\n# Table of Contents\n1. [Installation](#Installation)\n2. [Usage](#usage)\n3. [List animations](#list-animations)\n4. [Demo](#demo)\n\n# Installation\nWith npm:\n`$ npm install react-native-loader-kit --save`\n\nWith yarn:\n`$ yarn add react-native-loader-kit`\n\n## For iOS (React Native CLI project)\nRun the following command to setup for iOS:\n```\nnpx pod-install ios\n```\n## For Expo project\nYou need to run `prebuild` in order for native code takes effect:\n```\nnpx expo prebuild\n\nnpx pod-install ios\n```\n# Usage\n```js\nimport LoaderKit from 'react-native-loader-kit'\n\n\u003cLoaderKit\n  style={{ width: 50, height: 50 }}\n  name={'BallPulse'} // Optional: see list of animations below\n  color={'red'} // Optional: color can be: 'red', 'green',... or '#ddd', '#ffffff',...\n/\u003e\n```\n# List animations\nAs shown in the demo above, animations are as follows: \n## Default animations (both Android and iOS)\n```json\n  '1': 'BallPulse',\n  '2': 'BallGridPulse',\n  '3': 'BallClipRotate',\n  '4': 'SquareSpin',\n  '5': 'BallClipRotatePulse',\n  '6': 'BallClipRotateMultiple',\n  '7': 'BallPulseRise',\n  '8': 'BallRotate',\n  '9': 'CubeTransition',\n  '10': 'BallZigZag',\n  '11': 'BallZigZagDeflect',\n  '12': 'BallTrianglePath',\n  '13': 'BallScale',\n  '14': 'LineScale',\n  '15': 'LineScaleParty',\n  '16': 'BallScaleMultiple',\n  '17': 'BallPulseSync',\n  '18': 'BallBeat',\n  '19': 'LineScalePulseOut',\n  '20': 'LineScalePulseOutRapid',\n  '21': 'BallScaleRipple',\n  '22': 'BallScaleRippleMultiple',\n  '23': 'BallSpinFadeLoader',\n  '24': 'LineSpinFadeLoader',\n  '25': 'TriangleSkewSpin',\n  '26': 'Pacman',\n  '27': 'BallGridBeat',\n  '28': 'SemiCircleSpin'\n```\n## iOS extra animations\n```json\n  '29': 'BallRotateChase',\n  '30': 'Orbit',\n  '31': 'AudioEqualizer',\n  '32': 'CircleStrokeSpin',\n  '33': 'BallDoubleBounce'\n```\n# Troubleshooting\n## uses-sdk:minSdkVersion XX cannot be smaller than version YY\n\nYou can override sdk version to use any version in your `android/build.gradle` \u003e `buildscript` \u003e `ext`\n```gradle\nbuildscript {\n    ext {\n        LoaderKit_compileSdkVersion = 34\n        LoaderKit_minSdkVersion = 26\n        LoaderKit_targetSdkVersion = 34\n    }\n}\n```\n\n# Demo\nA fully working demo is located at [example folder](./example/src/App.tsx)\n\n# Thanks\nBig thanks to [81813780](https://github.com/81813780/AVLoadingIndicatorView) and [ninjaprox](https://github.com/ninjaprox/NVActivityIndicatorView) for their great works","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaitrungduc1410%2Freact-native-loader-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaitrungduc1410%2Freact-native-loader-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaitrungduc1410%2Freact-native-loader-kit/lists"}