{"id":13475966,"url":"https://github.com/alexZajac/react-native-skeleton-content","last_synced_at":"2025-03-27T01:30:41.229Z","repository":{"id":34943835,"uuid":"192562655","full_name":"alexZajac/react-native-skeleton-content","owner":"alexZajac","description":"A customizable skeleton-like loading placeholder for react native projects using expo. ","archived":false,"fork":false,"pushed_at":"2024-03-17T04:57:47.000Z","size":7120,"stargazers_count":625,"open_issues_count":15,"forks_count":133,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-18T00:12:47.046Z","etag":null,"topics":["animation","component","loader","react-native","skeleton"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-skeleton-content","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/alexZajac.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2019-06-18T15:01:59.000Z","updated_at":"2025-03-15T21:54:33.000Z","dependencies_parsed_at":"2024-01-14T06:04:51.931Z","dependency_job_id":"857e33b2-39db-4554-82f3-bee4bdf16e1d","html_url":"https://github.com/alexZajac/react-native-skeleton-content","commit_stats":{"total_commits":134,"total_committers":15,"mean_commits":8.933333333333334,"dds":0.5970149253731343,"last_synced_commit":"870be8734ae8598c8e4891a38704b492df849b7d"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexZajac%2Freact-native-skeleton-content","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexZajac%2Freact-native-skeleton-content/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexZajac%2Freact-native-skeleton-content/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexZajac%2Freact-native-skeleton-content/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexZajac","download_url":"https://codeload.github.com/alexZajac/react-native-skeleton-content/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245325223,"owners_count":20596818,"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":["animation","component","loader","react-native","skeleton"],"created_at":"2024-07-31T16:01:25.174Z","updated_at":"2025-03-27T01:30:40.091Z","avatar_url":"https://github.com/alexZajac.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","React, React Native"],"sub_categories":["Components"],"readme":"## React Native Skeleton Content\n\n\u003c!---https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/main.gif--\u003e\n\n\u003e If you are not using expo, please head up to [this page](https://github.com/alexZajac/react-native-skeleton-content-nonexpo) instead.\n\n\u003cimg width=\"220px\" align=\"right\" src=\"https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/main.gif\" /\u003e\n\nReact native Skeleton Content, a simple yet fully customizable component made to achieve loading animation in a Skeleton-style. Works in both iOS and Android.\n\n### New Features\n\n- The package has been rewritten to Hooks and is using the declarative [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) package for animations\n- It now supports nested layouts for children bones, see an example on [this snack](https://snack.expo.io/@alexandrezajac/skeleton-content-demo)\n- It finally supports percentages dimensions for bones, for any type of animation!\n\n[![Build Status](https://travis-ci.org/alexZajac/react-native-skeleton-content.svg?branch=master)](https://travis-ci.org/alexZajac/react-native-skeleton-content)\n[![Coverage Status](https://coveralls.io/repos/github/alexZajac/react-native-skeleton-content/badge.svg?branch=master)](https://coveralls.io/github/alexZajac/react-native-skeleton-content?branch=master)\n[![npm version](https://img.shields.io/npm/v/react-native-skeleton-content.svg?style=flat-square)](https://www.npmjs.com/package/react-native-skeleton-content)\n\n- [React Native Skeleton Content](#react-native-skeleton-content)\n  - [Installation](#installation)\n  - [Usage](#usage)\n  - [Props](#props)\n  - [Examples](#examples)\n  - [Playground](#playground)\n\n### Installation\n\n`npm install react-native-skeleton-content`\n\n### Usage\n\n1.  Import react-native-skeleton-content:\n\n```javascript\nimport SkeletonContent from 'react-native-skeleton-content';\n```\n\n2.  Once you create the SkeletonContent, you have two options:\n\n- **Child Layout** : The component will figure out the layout of its bones with the dimensions of its direct children.\n- **Custom Layout** : You provide a prop `layout` to the component specifying the size of the bones (see the [Examples](#examples) section below). Below is an example with a custom layout. A key prop for each child is optional but highly recommended.\n\n```jsx\nexport default function Placeholder() {\n  return (\n    \u003cSkeletonContent\n      containerStyle={{ flex: 1, width: 300 }}\n      isLoading={false}\n      layout={[\n        { key: 'someId', width: 220, height: 20, marginBottom: 6 },\n        { key: 'someOtherId', width: 180, height: 20, marginBottom: 6 }\n      ]}\n    \u003e\n      \u003cText style={styles.normalText}\u003eYour content\u003c/Text\u003e\n      \u003cText style={styles.bigText}\u003eOther content\u003c/Text\u003e\n    \u003c/SkeletonContent\u003e\n  );\n}\n```\n\n3.  Then simply sync the prop `isLoading` to your state to show/hide the SkeletonContent when the assets/data are available to the user.\n\n```jsx\nexport default function Placeholder () {\n  const [loading, setLoading] = useState(true);\n  return (\n    \u003cSkeletonContent\n       containerStyle={{flex: 1, width: 300}}\n        isLoading={isLoading}\u003e\n        {...otherProps}\n    /\u003e\n  )\n}\n```\n\n### Props\n\n| Name               | Type             | Default                 | Description                                                                                                                       |\n| ------------------ | ---------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| isLoading          | bool             | **required**            | Shows the Skeleton bones when true                                                                                                |\n| layout             | array of objects | []                      | A custom layout for the Skeleton bones                                                                                            |\n| duration           | number           | 1200 ms                 | Duration of one cycle of animation                                                                                                |\n| containerStyle     | object           | flex: 1                 | The style applied to the View containing the bones                                                                                |\n| easing             | Easing           | bezier(0.5, 0, 0.25, 1) | Easing of the bones animation                                                                                                     |\n| animationType      | string           | \"shiver\"                | The animation to be used for animating the bones (see demos below)                                                                |\n| animationDirection | string           | \"horizontalRight\"       | Used only for shiver animation, describes the direction and end-point (ex: horizontalRight goes on the x-axis from left to right) |\n| boneColor          | string           | \"#E1E9EE\"               | Color of the bones                                                                                                                |\n| highlightColor     | string           | \"#F2F8FC\"               | Color of the highlight of the bones                                                                                               |\n\n**Note**: The Easing type function is the one provided by [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated), so if you want to change the default you will have to install it as a dependency.\n\n### Examples\n\nSee the playground section to experiment :\n**1** - Changing the direction of the animation (animationDirection prop) :\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"300px\" src=\"https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/direction_change.gif\" /\u003e\n\u003c/p\u003e\n\n```javascript\nexport default function Placeholder () {\n  return (\n    \u003cSkeletonContent\n        containerStyle={{flex: 1, width: 300}}\n        animationDirection=\"horizontalLeft\"\n        isLoading={true}\u003e\n        ...\n    /\u003e\n  )\n}\n```\n\n**2** - Changing the colors and switching to \"pulse\" animation (boneColor, highlightColor and animationType prop) :\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"300px\" src=\"https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/color_change.gif\" /\u003e\n\u003c/p\u003e\n\n```jsx\nexport default function Placeholder () {\n  return (\n    \u003cSkeletonContent\n        containerStyle={{flex: 1, width: 300}}\n        boneColor=\"#121212\"\n        highlightColor=\"#333333\"\n        animationType=\"pulse\"\n        isLoading={true}\u003e\n        ...\n    /\u003e\n  )\n}\n```\n\n**3** - Customizing the layout of the bones (layout prop) :\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"300px\" src=\"https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/layout_change.gif\" /\u003e\n\u003c/p\u003e\n\n```jsx\nexport default function Placeholder () {\n  return (\n    \u003cSkeletonContent\n        containerStyle={{flex: 1, width: 300}}\n        animationDirection=\"horizontalLeft\"\n        layout={[\n        // long line\n        { width: 220, height: 20, marginBottom: 6 },\n        // short line\n        { width: 180, height: 20, marginBottom: 6 },\n        ...\n        ]}\n        isLoading={true}\u003e\n        ...\n    /\u003e\n  )\n}\n```\n\n### Playground\n\nYou can test out the features and different props easily on [**Snack**](https://snack.expo.io/@alexandrezajac/skeleton-content-demo).\nDon't hesitate to take contact if anything is unclear !\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FalexZajac%2Freact-native-skeleton-content","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FalexZajac%2Freact-native-skeleton-content","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FalexZajac%2Freact-native-skeleton-content/lists"}