{"_id":"@alanantar_sb/react-native-skeleton-content","_rev":"1-ddfedfe0481eb54eb22f448e94f7ddbd","name":"@alanantar_sb/react-native-skeleton-content","dist-tags":{"latest":"1.0.31"},"versions":{"1.0.30":{"name":"@alanantar_sb/react-native-skeleton-content","version":"1.0.30","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/**/*.{ts,tsx}","lint":"eslint --fix src/**/*.{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.ts"],"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/alexZajac/react-native-skeleton-content.git"},"author":{"name":"Alexandre Zajac"},"license":"MIT","bugs":{"url":"https://github.com/alexZajac/react-native-skeleton-content/issues"},"homepage":"https://github.com/alexZajac/react-native-skeleton-content#readme","devDependencies":{"@babel/preset-typescript":"^7.18.6","@types/jest":"^26.0.24","@types/react":"18.0.0","@types/react-native":"^0.69.5","@types/react-test-renderer":"18.0.0","babel-preset-expo":"^9.5.1","coveralls":"^3.1.1","eslint":"8.22.0","eslint-config-airbnb-typescript-prettier":"^5.0.0","jest":"^26.0.24","jest-expo":"^46.0.0","prettier":"^2.7.1","react":"18.2.0","react-native":"^0.69.5","react-native-gesture-handler":"^2.12.1","react-test-renderer":"18.2.0","typescript":"5.1.6"},"dependencies":{"expo-linear-gradient":"^12.1.2","expo-modules-core":"^1.5.9","react-native-reanimated":"^3.4.2"},"gitHead":"ec2a9612eb9e413950f81a23cdb953390adc06a5","_id":"@alanantar_sb/react-native-skeleton-content@1.0.30","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-w2CdvobRitBAJPJMKAAFMESMdp9l7kBznFNesAZH6q+8+gDIpVevoJi157B7lgeqdtsGMQQ/SaZf2/wPSv2obQ==","shasum":"3eb0f21dee753bde291e36a017f74ba12cd500ce","tarball":"https://registry.npmjs.org/@alanantar_sb/react-native-skeleton-content/-/react-native-skeleton-content-1.0.30.tgz","fileCount":11,"unpackedSize":42500,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID52Qz0NYiMU9F6/+i6wcfn0npoNYoJpz82VVIg7GOLTAiBIZCn7xJQzLHPIDzbKm+OoxiC42vA8mWpl7VRuVmIl4A=="}]},"_npmUser":{"name":"alanantar_sb","email":"alan@shadowboxer.co"},"directories":{},"maintainers":[{"name":"alanantar_sb","email":"alan@shadowboxer.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-skeleton-content_1.0.30_1692063872574_0.5252581935650866"},"_hasShrinkwrap":false},"1.0.31":{"name":"@alanantar_sb/react-native-skeleton-content","version":"1.0.31","description":"A simple and fully customizable React Native component that implements a skeleton-like loader using Reanimated 3","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/**/*.{ts,tsx}","lint":"eslint --fix src/**/*.{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.ts"],"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/alexZajac/react-native-skeleton-content.git"},"author":{"name":"Alexandre Zajac"},"license":"MIT","bugs":{"url":"https://github.com/alexZajac/react-native-skeleton-content/issues"},"homepage":"https://github.com/alexZajac/react-native-skeleton-content#readme","devDependencies":{"@babel/preset-typescript":"^7.18.6","@types/jest":"^26.0.24","@types/react":"18.0.0","@types/react-native":"^0.69.5","@types/react-test-renderer":"18.0.0","babel-preset-expo":"^9.5.1","coveralls":"^3.1.1","eslint":"8.22.0","eslint-config-airbnb-typescript-prettier":"^5.0.0","jest":"^26.0.24","jest-expo":"^46.0.0","prettier":"^2.7.1","react":"18.2.0","react-native":"^0.69.5","react-native-gesture-handler":"^2.12.1","react-test-renderer":"18.2.0","typescript":"5.1.6"},"dependencies":{"expo-linear-gradient":"^12.3.0","expo-modules-core":"^1.5.9","react-native-reanimated":"^3.4.2"},"gitHead":"ec2a9612eb9e413950f81a23cdb953390adc06a5","_id":"@alanantar_sb/react-native-skeleton-content@1.0.31","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-jvWQtzX63xjS2Pi9DL7uzPKUuRoDVDJQDmZSmup4fGcaZLuh3kmoPv+iT8KJZvi6pde1Key3uIUa0eherQ4KOw==","shasum":"ee9c4342a6331bca949d065f14da3730b753d6f0","tarball":"https://registry.npmjs.org/@alanantar_sb/react-native-skeleton-content/-/react-native-skeleton-content-1.0.31.tgz","fileCount":11,"unpackedSize":42519,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPFRl8znfO1QHe2VooDokYypftLCK5UmlIqMUtmzi6TwIgKoZ0hbtUNvfoCrR2y6q8SvMMi/4BB/fAVhqOLrfsZJw="}]},"_npmUser":{"name":"alanantar_sb","email":"alan@shadowboxer.co"},"directories":{},"maintainers":[{"name":"alanantar_sb","email":"alan@shadowboxer.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-skeleton-content_1.0.31_1692066966693_0.12835417289990603"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-15T01:44:32.474Z","1.0.30":"2023-08-15T01:44:32.770Z","modified":"2023-08-15T02:36:07.091Z","1.0.31":"2023-08-15T02:36:06.922Z"},"maintainers":[{"name":"alanantar_sb","email":"alan@shadowboxer.co"}],"description":"A simple and fully customizable React Native component that implements a skeleton-like loader using Reanimated 3","homepage":"https://github.com/alexZajac/react-native-skeleton-content#readme","keywords":["react native","skeleton","loader","placeholders","gradient","animation"],"repository":{"type":"git","url":"git+https://github.com/alexZajac/react-native-skeleton-content.git"},"author":{"name":"Alexandre Zajac"},"bugs":{"url":"https://github.com/alexZajac/react-native-skeleton-content/issues"},"license":"MIT","readme":"## React Native Skeleton Content\n\n\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\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 \n Your content\n Other content\n \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 \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

\n\n

\n\n```javascript\nexport default function Placeholder () {\n return (\n \n ...\n />\n )\n}\n```\n\n**2** - Changing the colors and switching to \"pulse\" animation (boneColor, highlightColor and animationType prop) :\n\n

\n\n

\n\n```jsx\nexport default function Placeholder () {\n return (\n \n ...\n />\n )\n}\n```\n\n**3** - Customizing the layout of the bones (layout prop) :\n\n

\n\n

\n\n```jsx\nexport default function Placeholder () {\n return (\n \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"}