{"id":25670148,"url":"https://github.com/mmusaib/react-native-skeleton-loading","last_synced_at":"2025-04-23T02:26:00.701Z","repository":{"id":205161555,"uuid":"713427595","full_name":"mmusaib/react-native-skeleton-loading","owner":"mmusaib","description":"React Native's Skeleton Loading Component","archived":false,"fork":false,"pushed_at":"2024-11-18T05:10:13.000Z","size":107,"stargazers_count":20,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T19:26:51.461Z","etag":null,"topics":["expo","expo-skeleton-loader","expo-skeleton-loading","loading","react-native","react-native-skeleton-loader","react-native-skeleton-loading","skeleton","skeleton-loader","skeleton-loading","skeletonloader"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-skeleton-loading","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/mmusaib.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2023-11-02T13:57:18.000Z","updated_at":"2025-02-12T10:24:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"8bcccf88-fcac-44f3-a725-43ab4dc2a495","html_url":"https://github.com/mmusaib/react-native-skeleton-loading","commit_stats":{"total_commits":13,"total_committers":2,"mean_commits":6.5,"dds":0.07692307692307687,"last_synced_commit":"6f9ad5a06f408f5673259ddb18013c43930fff13"},"previous_names":["mmusaib/react-native-skeleton-loading"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmusaib%2Freact-native-skeleton-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmusaib%2Freact-native-skeleton-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmusaib%2Freact-native-skeleton-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmusaib%2Freact-native-skeleton-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmusaib","download_url":"https://codeload.github.com/mmusaib/react-native-skeleton-loading/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250356221,"owners_count":21417048,"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":["expo","expo-skeleton-loader","expo-skeleton-loading","loading","react-native","react-native-skeleton-loader","react-native-skeleton-loading","skeleton","skeleton-loader","skeleton-loading","skeletonloader"],"created_at":"2025-02-24T11:30:34.548Z","updated_at":"2025-04-23T02:26:00.676Z","avatar_url":"https://github.com/mmusaib.png","language":"TypeScript","funding_links":["https://paypal.me/mmusaib"],"categories":[],"sub_categories":[],"readme":"|                          | |  |   |   |\n| --------------------------------------- | -------- | ---------- |---------- |---------- |\n| \u003ca href=\"https://www.npmjs.com/package/react-native-skeleton-loading\"\u003e![NPM VERSION](https://img.shields.io/npm/v/react-native-skeleton-loading?style=for-the-badge)\u003c/a\u003e | \u003ca href=\"https://www.npmjs.com/package/react-native-skeleton-loading\"\u003e![NPM WEEKLY DOWNLOADS](https://img.shields.io/npm/dw/react-native-skeleton-loading?color=%232CA215\u0026label=WEEKLY%20DOWNLOADS\u0026style=for-the-badge)\u003c/a\u003e | \u003ca href=\"https://github.com/mmusaib/react-native-skeleton-loading/stargazers\"\u003e![GITHUB STAR](https://img.shields.io/github/stars/mmusaib/react-native-skeleton-loading?label=Give%20Us%20A%20Star\u0026style=for-the-badge)\u003c/a\u003e | \u003ca href=\"https://www.youtube.com/channel/UCSwIR2KBHiqiProH3Me8IZQ\"\u003e![YOUTUBE VIEWS](https://img.shields.io/youtube/channel/views/UCSwIR2KBHiqiProH3Me8IZQ?label=YOUTUBE%20VIEWS\u0026style=for-the-badge)\u003c/a\u003e | \u003ca href=\"https://www.npmjs.com/package/react-native-skeleton-loading\"\u003e![NPM LIFETIME DOWNLOADS](https://img.shields.io/npm/dt/react-native-skeleton-loading?color=%232CA215\u0026style=for-the-badge)\u003c/a\u003e\n\n\u003ch1 align=\"center\"\u003e\n  🏳️‍🌈  React Native Skeleton Loading\n\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n🟢 Skeleton Loading Component for React Native powered apps \n\n\u003ca href=\"https://twitter.com/_mmusaib\" target=\"_blank\"\u003e\u003c/a\u003e\n\u003cimg src=\"https://i.imgur.com/toxEFWe.png\" width=\"500\" /\u003e\n\u003c/div\u003e\n\n\n\n\u003ch4\u003eLight Weight and \u003cb\u003eRobust\u003c/b\u003e Skeleton Loader.\u003c/h4\u003e\n\n-   Design skeleton loading screen of your choice \n-   Pass colors of your choice\n-   Powered by Reanimated 3\n-   Make your apps professional in UI/UX\n\n\n\n\n# Compatibility\n\n\n|  iOS  | Android | React Native Cli |\n--------|---------|------|\n|  ✅  |    ✅    |  ✅  |\n\n\n# Expo Equivalent\nFor Expo Loader [(Click Here)](https://github.com/mmusaib/expo-skeleton-loading)\n\n\n\n# 🔌 Installation\n\n```sh\n$ npm install react-native-skeleton-loading\n\n```\n\nOR\n\n```sh\n$ yarn add react-native-skeleton-loading\n```\n\n# Setup\nThis package is based on react-natve-reanimated 3 so according to their documentation, \nyou need to initialize that in babel.config.js. To do that stop the metro bundler and\nthen add following line of code to the return object of babel.config.js\n\n```js\nplugins: ['react-native-reanimated/plugin']\n```\n\nAfter adding the line of code, start the bundler or project with --clear tag like,\n\n```sh\nnpx expo start --clear\n```\nThis will clear the bundler cache and you are ready to go.\n\n\n\n# 😎 Displaying the skeleton loading\nAll you need is to just import the skeleton loading component, and in between the\nclosing and ending tags, you can design the UI of your skeleton loading screen\nas shown in the code snippet below:\n\n```jsx\nimport SkeletonLoading from 'react-native-skeleton-loading'\n\nconst App = () =\u003e {\n\n  return(\n    \u003cSkeletonLoading background={\"#adadad\"} highlight={\"#ffffff\"}\u003e\n        \u003cView style={{ flexDirection: 'row', justifyContent: 'space-between' }}\u003e\n          \u003cView style={{ width: 100, height: 100, backgroundColor: \"#adadad\", borderRadius: 10 }} /\u003e\n\n          \u003cView style={{ flex:1, marginLeft: 10 }}\u003e\n              \u003cView style={{ backgroundColor: \"#adadad\", width: \"50%\", height: 10, marginBottom: 3, borderRadius: 5 }} /\u003e\n              \u003cView style={{ backgroundColor: \"#adadad\", width: '20%', height: 8, borderRadius: 5 }} /\u003e\n              \u003cView style={{ backgroundColor: \"#adadad\", width: '15%', height: 8, borderRadius: 5, marginTop: 3 }} /\u003e\n          \u003c/View\u003e\n        \u003c/View\u003e\n    \u003c/SkeletonLoading\u003e\n  )\n\n};\n```\n\n\n\nFor Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-skeleton-loading?platform=android)\n\n# ⭐ Props  for  the component\n| Name | Type | Description |\n| ---- | ----------- | ----------- |\n| background | hex color string | Hex color string for the background of loading component\n| highlight | hex color string | Hex color string for the highlight of loading component\n\n\n\n\n# 💲 Would you like to support me?\n\nIf you would like me come up with similar packages, buy me a cup of coffee to boost my energy.\n\u003cbr\u003e\u003cbr\u003e\n[![Paypal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-100px.png)](https://paypal.me/mmusaib)\n\u003cbr\u003e\u003cbr\u003e\n\n\n\n# ▶️ Watch Tutorial Video \n\n [![Watch video](https://i.imgur.com/DdfMsly.png)](https://www.youtube.com/watch?v=QIStdt9sx5Y\u0026list=PLbMQyvHNUAyKVjlOwqkLATvGG9e1Lgw0O\u0026index=11\u0026pp=gAQBiAQB)\n\n\n\u003c!-- For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-stock-star-rating)\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmusaib%2Freact-native-skeleton-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmusaib%2Freact-native-skeleton-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmusaib%2Freact-native-skeleton-loading/lists"}