{"id":15516696,"url":"https://github.com/alexvcasillas/react-native-loading-dots","last_synced_at":"2025-04-23T03:51:35.752Z","repository":{"id":48882073,"uuid":"192181779","full_name":"alexvcasillas/react-native-loading-dots","owner":"alexvcasillas","description":"A React Native loading component with dots or custom components and a smooth animation","archived":false,"fork":false,"pushed_at":"2024-10-02T07:34:59.000Z","size":6583,"stargazers_count":22,"open_issues_count":2,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-17T19:17:23.754Z","etag":null,"topics":["animated","animation","dots","loading","native","react","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-loading-dots","language":null,"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/alexvcasillas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"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":"alexvcasillas","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-06-16T11:12:13.000Z","updated_at":"2025-04-09T22:45:05.000Z","dependencies_parsed_at":"2024-03-12T10:15:39.802Z","dependency_job_id":null,"html_url":"https://github.com/alexvcasillas/react-native-loading-dots","commit_stats":{"total_commits":17,"total_committers":2,"mean_commits":8.5,"dds":0.05882352941176472,"last_synced_commit":"d6d05732e0957afe6ab25a778c3fa38a51494845"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexvcasillas%2Freact-native-loading-dots","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexvcasillas%2Freact-native-loading-dots/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexvcasillas%2Freact-native-loading-dots/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexvcasillas%2Freact-native-loading-dots/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexvcasillas","download_url":"https://codeload.github.com/alexvcasillas/react-native-loading-dots/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250366685,"owners_count":21418768,"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":["animated","animation","dots","loading","native","react","react-native"],"created_at":"2024-10-02T10:09:33.640Z","updated_at":"2025-04-23T03:51:35.738Z","avatar_url":"https://github.com/alexvcasillas.png","language":null,"funding_links":["https://github.com/sponsors/alexvcasillas"],"categories":[],"sub_categories":[],"readme":"## React Native Loading Dots\n\nSmooth dot loading component for your React Native project.\n\n![Showcase of React Native Loading Dots](https://github.com/alexvcasillas/react-native-loading-dots/blob/master/ios-demo.gif?raw=true)\n\n## Installation\n\n```\nnpm i react-native-loading-dots\n```\n\n```\nyarn add react-native-loading-dots\n```\n\n## Usage\n\n```js\nimport React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport LoadingDots from \"react-native-loading-dots\";\n\nfunction LoadingScreen() {\n  return (\n    \u003cView style={styles.loadingScreen}\u003e\n      \u003cView style={styles.dotsWrapper}\u003e\n        \u003cLoadingDots /\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  loadingScreen: {\n    flex: 1,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  dotsWrapper: {\n    width: 100,\n  },\n});\n```\n\nThe above code will produce the same outcome as the demo screen capture.\n\n## Customization\n\nYou can pass a few props to configure the outcome a little:\n\n### dots\n\n```js\n@type Number\ndefault 4\n```\n\nThis prop will change the number of dots that will be displayed in the animation.\n\n### colors\n\n```js\n@type String[]\ndefault [\"#4dabf7\", \"#3bc9db\", \"#38d9a9\", \"#69db7c\"]\n```\n\nThis prop will change the color of the dots in the given array order. If you declare the array but the length doesn't match with the amount of dots defined, the dot that cannot take a color from this array will instead use a fallback color of `\"#4dabf7\"`.\n\n### size\n\n```js\n@type Number\ndefault 20\n```\n\nThis prop will control the size of each dot that will be displayed for the animation.\n\n### borderRadius\n\n```\n@type Number\n```\n\nThis prop will control the border radius of the dots in case you want a specific amount of border radius. If you don't fill this prop it will use a rounded border radius with the formula: `size / 2`.\n\n### bounceHeight\n\n```js\n@type Number\ndefault 20\n```\n\nThis prop will control the height of the bouncing for the loading dots. The higher the value the higher the will bounce up and down. From `0` to `bounceHeight` and from `0` to `-bounceHeight`.\n\n### components\n\n```js\n@type React.ReactNode[]\ndefault null\n```\n\nThis prop will allow you to pass an array of the elements that you'd like to be rendered instead of the colored dots. If you pass `components` the `dots`, `colors`, `size` and `borderRadius` props will be ignored.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexvcasillas%2Freact-native-loading-dots","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexvcasillas%2Freact-native-loading-dots","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexvcasillas%2Freact-native-loading-dots/lists"}