{"id":4063,"url":"https://github.com/tomzaku/react-native-shimmer-placeholder","last_synced_at":"2025-05-14T19:08:00.899Z","repository":{"id":21311978,"uuid":"92276580","full_name":"tomzaku/react-native-shimmer-placeholder","owner":"tomzaku","description":"Placeholder/ Skeleton of React Native","archived":false,"fork":false,"pushed_at":"2024-02-20T11:04:59.000Z","size":6940,"stargazers_count":1079,"open_issues_count":21,"forks_count":93,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-13T13:20:31.402Z","etag":null,"topics":["module","placeholder","react-native","shimmer","skeleton"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/tomzaku.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-05-24T09:47:57.000Z","updated_at":"2025-04-07T21:29:32.000Z","dependencies_parsed_at":"2023-12-13T01:55:28.094Z","dependency_job_id":"25f2b048-e349-4a39-93f3-ef63f3e3a65c","html_url":"https://github.com/tomzaku/react-native-shimmer-placeholder","commit_stats":{"total_commits":141,"total_committers":23,"mean_commits":6.130434782608695,"dds":0.574468085106383,"last_synced_commit":"acad345652968069dee83a6d10219d43b8365d0d"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomzaku%2Freact-native-shimmer-placeholder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomzaku%2Freact-native-shimmer-placeholder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomzaku%2Freact-native-shimmer-placeholder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomzaku%2Freact-native-shimmer-placeholder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomzaku","download_url":"https://codeload.github.com/tomzaku/react-native-shimmer-placeholder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254209859,"owners_count":22032897,"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":["module","placeholder","react-native","shimmer","skeleton"],"created_at":"2024-01-05T20:16:59.953Z","updated_at":"2025-05-14T19:07:59.125Z","avatar_url":"https://github.com/tomzaku.png","language":"JavaScript","funding_links":[],"categories":["Components","Others","JavaScript","Libraries"],"sub_categories":["UI"],"readme":"\n\u003ch2 align=\"center\"\u003e\n  React Native Shimmer Placeholder\n\u003c/h2\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-shimmer-placeholder\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-native-shimmer-placeholder.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-shimmer-placeholder\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/react-native-shimmer-placeholder.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://packagephobia.now.sh/badge?p=react-native-shimmer-placeholder@1.0.29\"\u003e\u003cimg src=\"https://packagephobia.now.sh/badge?p=react-native-shimmer-placeholder@1.0.29\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003ch5 align=\"center\"\u003e\nPlaceholder for both IOS and Android\n\u003c/h5\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/tomzaku/react-native-shimmer-placeholder/blob/master/example.gif?raw=true\"\u003e\n\u003c/p\u003e\n\u003c!-- \u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/tomzaku/react-native-shimmer-placeholder/blob/master/example2.gif?raw=true\"\u003e\n\u003c/p\u003e --\u003e\n\n## Get Started\n![install size](https://packagephobia.now.sh/badge?p=react-native-shimmer-placeholder@1.0.29)\n\n### Installation\n\n`npm i react-native-shimmer-placeholder --save`\n\nor\n\n`yarn add react-native-shimmer-placeholder`\n\n\n### Usage\n\n#### Simple\n\nFor `expo`\n``` jsx\nimport { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'\nimport { LinearGradient } from 'expo-linear-gradient';\n\nconst ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient)\n\n\u003cShimmerPlaceHolder /\u003e\n\u003cShimmerPlaceHolder visible={isFetched}\u003e\n  \u003cText\u003e\n    Wow, awesome here.\n  \u003c/Text\u003e\n\u003c/ShimmerPlaceHolder\u003e\n```\n\nor \n\n``` jsx\nimport ShimmerPlaceHolder from 'react-native-shimmer-placeholder'\nimport { LinearGradient } from 'expo-linear-gradient';\n\n\n\u003cShimmerPlaceHolder LinearGradient={Linear} /\u003e\n\u003cShimmerPlaceHolder visible={isFetched} LinearGradient={Linear}\u003e\n  \u003cText\u003e\n    Wow, awesome here.\n  \u003c/Text\u003e\n\u003c/ShimmerPlaceHolder\u003e\n```\n\nFor `react-native-linear-gradient`\n``` jsx\nimport LinearGradient from 'react-native-linear-gradient';\nimport { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'\n\nconst ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient)\n\n...\n\n\u003cShimmerPlaceHolder /\u003e\n```\nor\n```jsx\nimport LinearGradient from 'react-native-linear-gradient';\nimport ShimmerPlaceHolder from 'react-native-shimmer-placeholder'\n\n...\n\n\u003cShimmerPlaceHolder\n  LinearGradient={LinearGradient}\n/\u003e\n```\n\n#### Connect more components\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/tomzaku/react-native-shimmer-placeholder/blob/master/facebook-load-data.gif?raw=true\"\u003e\n\u003c/p\u003e\n\n```jsx\nimport { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'\nimport LinearGradient from 'react-native-linear-gradient';\n\nconst ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient)\nconst FacebookContent = () =\u003e {\n\n  // Handle animation\n  const avatarRef = React.createRef()\n  const firstLineRef = React.createRef()\n  const secondLineRef = React.createRef()\n  const thirdLineRef = React.createRef()\n\n  React.useEffect(() =\u003e {\n    const facebookAnimated = Animated.stagger(\n      400,\n      [\n        avatarRef.current.getAnimated(),\n        Animated.parallel([\n          firstLineRef.current.getAnimated(),\n          secondLineRef.current.getAnimated(),\n          thirdLineRef.current.getAnimated()\n        ])\n      ]\n    );\n    Animated.loop(facebookAnimated).start();\n  }, [])\n\n  return (\n    \u003cView\u003e\n      \u003cView style={{ flexDirection: \"row\" }}\u003e\n        \u003cShimmerPlaceholder\n          ref={avatarRef}\n          stopAutoRun\n        /\u003e\n        \u003cView style={{ justifyContent: \"space-between\" }}\u003e\n          \u003cShimmerPlaceholder\n            ref={firstLineRef}\n            stopAutoRun\n          /\u003e\n          \u003cShimmerPlaceholder\n            ref={secondLineRef}\n            stopAutoRun\n          /\u003e\n          \u003cShimmerPlaceholder\n            ref={thirdLineRef}\n            stopAutoRun\n          /\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\nMore Detail see [this](https://github.com/tomzaku/react-native-shimmer-placeholder/blob/master/example/App.js)\n\n### Props\n\n| Prop                         | Description                                                                                            | Type      | Default                                           |\n| ---------------------------- | ------------------------------------------------------------------------------------------------------ | --------- | ------------------------------------------------- |\n| **`LinearGradient`**         | Linear Gradient components ('react-native-linear-gradient' or 'expo-linear-gradient')                  | Component | undefined                                         |\n| **`visible`**                | Visible child components                                                                               | boolean   | false                                             |\n| **`style`**                  | Container Style                                                                                        | Style     | `{backgroundColor: '#ebebeb',overflow: 'hidden'}` |\n| **`shimmerStyle`**           | Shimmer Style only                                                                                     | Style     | {}                                                |\n| **`contentStyle`**           | Content Style when visible                                                                             | Style     | {}                                                |\n| **`location`**               | Locations of shimmer                                                                                   | number[]  | *[0.3, 0.5, 0.7]*                                   |\n| **`width`**                  | Width of row                                                                                           | number    | 200                                               |\n| **`duration`**               | Duration of shimmer over a row                                                                         | number    | 1000                                              |\n| **`height`**                 | Height of row                                                                                          | number    | 15                                                |\n| **`shimmerWidthPercent`**    | Percent of shimmer width                                                                               | number    | 1.0                                               |\n| **`isReversed`**             | Reverse direction of animation                                                                         | boolean   | `false`                                           |\n| **`stopAutoRun`**            | Stop running shimmer animation at beginning                                                            | boolean   | `false`                                           |\n| **`isInteraction`**          | Defines whether or not the shimmer animation creates an interaction handle on the `InteractionManager` | boolean   | `true`                                            |\n| **`shimmerColors`**          | Colors of the shimmer.                                                                                 | string[]  | *['#ebebeb', '#c5c5c5', '#ebebeb']*                 |\n| **`containerProps`**         | Props passed to the outermost View                                                                     | ViewProps | undefined                                         |\n| **`shimmerContainerProps`**  | Props passed to the View which contains the loading animation                                          | ViewProps | undefined                                         |\n| **`childrenContainerProps`** | Props passed to the View which contains the children                                                   | ViewProps | undefined                                         |\n\n### Methods\n| Method            | Description                 | Type     |\n| ----------------- | --------------------------- | -------- |\n| **`getAnimated`** | get Animated of Placeholder | Animated |\n\n### Helpers\n\n`createShimmerPlaceholder`\n\n```\n/**\n * To create ShimmerPlaceholder by Linear Gradient. Only useful when you use 3rd party,\n * For example: react-native-linear-gradient\n * @param {Linear Gradient Component} LinearGradient - 'expo-linear-gradient' by default\n *\n * @example\n *\n * import LinearGradient from 'react-native-linear-gradient';\n * import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'\n *\n * const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient)\n *\n * ...\n *\n * \u003cShimmerPlaceHolder /\u003e\n */\n ```\n\n### Contribute\n\nWelcome help me to build this awesome lib.\n\n### License\n\n[MIT](https://github.com/tomzaku/react-native-shimmer-placeholder/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomzaku%2Freact-native-shimmer-placeholder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomzaku%2Freact-native-shimmer-placeholder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomzaku%2Freact-native-shimmer-placeholder/lists"}