{"_id":"@03balogun/react-native-skeleton-content","name":"@03balogun/react-native-skeleton-content","dist-tags":{"latest":"1.0.25"},"versions":{"1.0.25":{"name":"@03balogun/react-native-skeleton-content","version":"1.0.25","description":"A simple and fully customizable React Native component that implements a skeleton-like loader","main":"lib/index.js","types":"lib/index.d.ts","keywords":["react native","skeleton","loader","placeholders","gradient","animation"],"scripts":{"build":"tsc -p tsconfig.json","format":"prettier --write src/**/*.{js,jsx,ts,tsx}","lint":"eslint --fix src/**/*.{js,jsx,ts,tsx}","prepare":"npm run build","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags","test":"jest --no-watchman","coveralls":"jest --coverage && cat ./coverage/lcov.info | coveralls"},"jest":{"preset":"jest-expo","setupFiles":["./setup-test.js"],"moduleFileExtensions":["js","jsx","json","ts","tsx"],"transform":{"^.+\\.(js|jsx|ts|tsx)$":"babel-jest"},"testMatch":["**/*.test.ts?(x)"],"coveragePathIgnorePatterns":["./src/__tests__/"]},"repository":{"type":"git","url":"git+https://github.com/03balogun/react-native-skeleton-content.git"},"author":{"name":"Balogun Wahab"},"license":"MIT","bugs":{"url":"https://github.com/03balogun/react-native-skeleton-content/issues"},"homepage":"https://github.com/03balogun/react-native-skeleton-content#readme","devDependencies":{"@babel/preset-typescript":"^7.10.1","@types/jest":"^24.0.18","@types/react":"^16.9.5","@types/react-native":"^0.60.19","@types/react-test-renderer":"^16.9.2","@unimodules/react-native-adapter":"^5.2.0","babel-preset-expo":"^8.2.1","coveralls":"^3.0.7","eslint":"^7.2.0","eslint-config-airbnb-typescript-prettier":"^2.1.1","jest":"^24.9.0","jest-expo":"^37.0.0","prettier":"^1.18.2","react":"^16.10.2","react-native":"^0.62.2","react-native-gesture-handler":"^1.6.1","react-native-reanimated":"^2.1.0","react-native-unimodules":"^0.7.0-rc.1","react-test-renderer":"^16.13.1","typescript":"4.4.4"},"dependencies":{"react-native-redash":"^16.2.4","expo-modules-core":"^0.9.1","expo-linear-gradient":"~11.3.0","react-native-reanimated":"~2.8.0"},"gitHead":"faba830e1f177b69bcbf7ed87db7fbc42801c635","_id":"@03balogun/react-native-skeleton-content@1.0.25","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-iP5yOmdEuAkNqjvoL1PUrQSITYm5HicTZNCnTd1QRhWXY2Mz7RQ3/nDhlIJzvZadMty7m47KUL5sZv2WU+g/ig==","shasum":"3401d337aa7c8a2e44d72f1e0b9e12dee9a6d57d","tarball":"https://registry.npmjs.org/@03balogun/react-native-skeleton-content/-/react-native-skeleton-content-1.0.25.tgz","fileCount":11,"unpackedSize":42926,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8DvwSmbp8y5ylYW1SRICuTl/T1F4UOK2l0K/QqU3EuQIhAMwsmUibVuR9QWEOc6wUdcr7dfF5OqOZyPdEkrmcf3FB"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidy3MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSxxAAjFpLlUNHaMysHnD/uOs2BDA73p2xDi6BaLGx5IAfOaK+RZD0\r\nLKLfVKOnwWI8oZ9/CV0sfZxNHeZjvKMavgfNbnHyaU1Pyut58Q5dywL06TY/\r\n90OttcsdjK5I8pafvFQi4yw91Q2g3qYytWfpG348bD9Zswi+uloDkNsKUxpK\r\nenwD9r5EEOAWZbimWf4mfLR70o0nCCcVSh9/wYSt8p8XLcur6dp4/aKkTXvV\r\nIwW1L7ciJF0+q/045thU15303aqr7VpJLeA40+t3smZ/p+6Drjb5Ap8R8sSJ\r\nv+mtEfhHN9vo/fphmunnOHq4dt4AlRrKsaCXSIcE1R7RJZTseno6jEIhVo9w\r\ncn3jQxmyvHvyNeKKePvJfxUj00rUb/W6JwocZhIueFwwwplqQygbVl7LhkHr\r\ngDIVBqlnEYB3x8OnFcv9xYsYEqXNdel0pQZ4uzH8AhMBZioDrBCs4T4GFWgP\r\nw2O3hMQmy74A3manoHV7pIys6pALPMIKwrPRPnZQB6wRjidcYCyUH6fFL6tM\r\nCH62zD+vDTiTg45WZ/htKO38Q5VI+62eHxIJOw4Smn3EnEBDRLvE6Xjx4Zaz\r\nup9ukaCn5G/ke5LeqtlInqn8eJgrmSPW3GPQ6XiDA/7MJkO9cLKRUoryLYuV\r\nEi9lpRE7Yy2YXe1u++2tPmUGYRszvatbb3I=\r\n=R+Vp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"03balogun","email":"03balogun@gmail.com"},"directories":{},"maintainers":[{"name":"03balogun","email":"03balogun@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-skeleton-content_1.0.25_1651977676032_0.9399094041998717"},"_hasShrinkwrap":false}},"time":{"created":"2022-05-08T02:41:15.975Z","1.0.25":"2022-05-08T02:41:16.279Z","modified":"2022-05-08T02:41:16.416Z"},"maintainers":[{"name":"03balogun","email":"03balogun@gmail.com"}],"description":"A simple and fully customizable React Native component that implements a skeleton-like loader","homepage":"https://github.com/03balogun/react-native-skeleton-content#readme","keywords":["react native","skeleton","loader","placeholders","gradient","animation"],"repository":{"type":"git","url":"git+https://github.com/03balogun/react-native-skeleton-content.git"},"author":{"name":"Balogun Wahab"},"bugs":{"url":"https://github.com/03balogun/react-native-skeleton-content/issues"},"license":"MIT","readme":"## Warning\n\nThis repository isn't an official repository; you can use this repo while the library has not been updated to support Expo SDK 45. Remember to check the [official repository](https://github.com/alexZajac/react-native-skeleton-content) regularly.\n\n### What changes ?\n\n- tested for Expo 45\n- expo-linear-gradient : 10.0.3 => 11.3.0\n- react-native-reanimated : 2.2.0 => 2.8.0\n\n## React Native Skeleton Content\n\n<!---https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/main.gif-->\n\n> If you are not using expo, please head up to [this page](https://github.com/alexZajac/react-native-skeleton-content-nonexpo) instead.\n\n<img width=\"220px\" align=\"right\" src=\"https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/main.gif\" />\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    <SkeletonContent\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    >\n      <Text style={styles.normalText}>Your content</Text>\n      <Text style={styles.bigText}>Other content</Text>\n    </SkeletonContent>\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    <SkeletonContent\n       containerStyle={{flex: 1, width: 300}}\n        isLoading={isLoading}>\n        {...otherProps}\n    />\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<p align=\"center\">\n<img width=\"300px\" src=\"https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/direction_change.gif\" />\n</p>\n\n```javascript\nexport default function Placeholder () {\n  return (\n    <SkeletonContent\n        containerStyle={{flex: 1, width: 300}}\n        animationDirection=\"horizontalLeft\"\n        isLoading={true}>\n        ...\n    />\n  )\n}\n```\n\n**2** - Changing the colors and switching to \"pulse\" animation (boneColor, highlightColor and animationType prop) :\n\n<p align=\"center\">\n<img width=\"300px\" src=\"https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/color_change.gif\" />\n</p>\n\n```jsx\nexport default function Placeholder () {\n  return (\n    <SkeletonContent\n        containerStyle={{flex: 1, width: 300}}\n        boneColor=\"#121212\"\n        highlightColor=\"#333333\"\n        animationType=\"pulse\"\n        isLoading={true}>\n        ...\n    />\n  )\n}\n```\n\n**3** - Customizing the layout of the bones (layout prop) :\n\n<p align=\"center\">\n<img width=\"300px\" src=\"https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/layout_change.gif\" />\n</p>\n\n```jsx\nexport default function Placeholder () {\n  return (\n    <SkeletonContent\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}>\n        ...\n    />\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","readmeFilename":"README.md"}