{"_id":"@balogunofafrica/react-native-skeleton-content-nonexpo","_rev":"1-5ab980a020e0cb7b3b898e5d0831748c","name":"@balogunofafrica/react-native-skeleton-content-nonexpo","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@balogunofafrica/react-native-skeleton-content-nonexpo","version":"1.0.0","keywords":["node","npm"],"author":{"name":"Abdulmumin Usman"},"license":"MIT","_id":"@balogunofafrica/react-native-skeleton-content-nonexpo@1.0.0","maintainers":[{"name":"balogunofafrica","email":"balogunakanbi.k@gmail.com"}],"homepage":"https://github.com/BalogunofAfrica/react-native-skeleton-content-nonexpo#readme","bugs":{"url":"https://github.com/BalogunofAfrica/react-native-skeleton-content-nonexpo/issues"},"dist":{"shasum":"7cdbb91e73f37d79f4cdef13f3d43fdc8ad388fc","tarball":"https://registry.npmjs.org/@balogunofafrica/react-native-skeleton-content-nonexpo/-/react-native-skeleton-content-nonexpo-1.0.0.tgz","fileCount":11,"integrity":"sha512-MoPoeXuLrovEePfHHrH5P3YaMaknj1wuaMb+k5SzxDIZpyWtYDpXQN1fXNYa+kmqTMuAb6iHaUr6VhmGudswYg==","signatures":[{"sig":"MEUCIE+QYj3ZFXa82Nlmlsx3TYM/Bh4E4m/WRX7Wy7eB2YqEAiEAoK/Gaogc7MEOoJBzq2JtSGfEIfNLxFAgC7ztQJdmy9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42942},"jest":{"preset":"react-native","testMatch":["**/*.test.ts?(x)"],"transform":{"^.+\\.(js|jsx|ts|tsx)$":"babel-jest"},"setupFiles":["./setup-test.js"],"moduleFileExtensions":["js","jsx","json","ts","tsx"],"coveragePathIgnorePatterns":["./src/__tests__/"]},"main":"lib/index.js","types":"lib/index.d.ts","gitHead":"d74739fa9cf355680fd32cad1c57c8d0081d8d36","scripts":{"lint":"eslint --fix src/**/*.{js,jsx,ts,tsx}","test":"jest --no-watchman","build":"tsc -p tsconfig.json","format":"prettier --write src/**/*.{js,jsx,ts,tsx}","prepare":"npm run build","version":"npm run format && git add -A src","coveralls":"jest --coverage && cat ./coverage/lcov.info | coveralls","preversion":"npm run lint","postversion":"git push && git push --tags"},"_npmUser":{"name":"balogunofafrica","email":"balogunakanbi.k@gmail.com"},"repository":{"url":"git+https://github.com/BalogunofAfrica/react-native-skeleton-content-nonexpo.git","type":"git"},"_npmVersion":"8.11.0","description":"A simple and fully customizable React Native component that implements a skeleton-like loader","directories":{},"_nodeVersion":"16.15.1","_hasShrinkwrap":false,"devDependencies":{"jest":"^24.9.0","react":"^16.10.2","eslint":"^7.2.0","prettier":"^1.18.2","coveralls":"^3.1.0","babel-jest":"^29.7.0","typescript":"^5.2.2","@types/jest":"^24.0.18","@types/react":"^18.2.21","react-native":"^0.62.3","babel-preset-expo":"^9.5.2","@types/react-native":"^0.72.2","react-test-renderer":"^16.13.1","react-native-reanimated":"^2.1.0","@babel/preset-typescript":"^7.22.15","@types/react-test-renderer":"^16.9.2","react-native-gesture-handler":"^1.7.0","react-native-linear-gradient":"^2.5.6","eslint-config-airbnb-typescript-prettier":"^2.1.1"},"peerDependencies":{"react-native-reanimated":"^2.1.0","react-native-linear-gradient":">=2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/react-native-skeleton-content-nonexpo_1.0.0_1694780078832_0.6953292284707178","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2023-09-15T12:14:38.723Z","modified":"2024-12-19T11:42:49.170Z","1.0.0":"2023-09-15T12:14:39.066Z"},"bugs":{"url":"https://github.com/BalogunofAfrica/react-native-skeleton-content-nonexpo/issues"},"author":{"name":"Abdulmumin Usman"},"license":"MIT","homepage":"https://github.com/BalogunofAfrica/react-native-skeleton-content-nonexpo#readme","keywords":["node","npm"],"repository":{"url":"git+https://github.com/BalogunofAfrica/react-native-skeleton-content-nonexpo.git","type":"git"},"description":"A simple and fully customizable React Native component that implements a skeleton-like loader","maintainers":[{"name":"balogunofafrica","email":"balogunakanbi.k@gmail.com"}],"readme":"## React Native Skeleton Content Nonexpo\r\n\r\n> This a fork of [this package](https://github.com/alexZajac/react-native-skeleton-content-nonexpo), it resolves the issue with using it with reanimated and removes the hard requirement on redash\r\n\r\n<img width=\"220px\" align=\"right\" src=\"https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/main.gif\" />\r\n\r\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.\r\n\r\n### New Features\r\n\r\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\r\n- It finally supports percentages dimensions for bones, for any type of animation!\r\n\r\n[![Build Status](https://travis-ci.org/alexZajac/react-native-skeleton-content-nonexpo.svg?branch=master)](https://travis-ci.org/alexZajac/react-native-skeleton-content-nonexpo) [![Coverage Status](https://coveralls.io/repos/github/alexZajac/react-native-skeleton-content-nonexpo/badge.svg?branch=master)](https://coveralls.io/github/alexZajac/react-native-skeleton-content-nonexpo?branch=master) [![npm version](https://img.shields.io/npm/v/react-native-skeleton-content-nonexpo.svg?style=flat-square)](https://www.npmjs.com/package/react-native-skeleton-content)\r\n\r\n- [React Native Skeleton Content](#react-native-skeleton-content)\r\n  - [Installation](#installation)\r\n  - [Usage](#usage)\r\n  - [Props](#props)\r\n  - [Examples](#examples)\r\n  - [Playground](#playground)\r\n\r\n### Installation\r\n\r\n```shell script\r\nnpm install @balogunofafrica/react-native-skeleton-content-nonexpo\r\n```\r\n\r\nor\r\n\r\n```shell script\r\nyarn add @balogunofafrica/react-native-skeleton-content-nonexpo\r\n```\r\n\r\n> This package requires the `react-native-linear-gradient` package, make sure it's installed and working on your project.\r\n\r\nAlso install the following peer dependencies as the package depends on them. We prefer you install these dependencies\r\ninorder to prevent double instance errors.\r\n\r\n```shell script\r\nnpm install react-native-reanimated\r\n```\r\n\r\nor\r\n\r\n```shell script\r\nyarn add react-native-reanimated\r\n```\r\n\r\n### Usage\r\n\r\n1.  Import react-native-skeleton-content:\r\n\r\n```javascript\r\nimport SkeletonContent from 'react-native-skeleton-content-nonexpo';\r\n```\r\n\r\n2.  Once you create the SkeletonContent, you have two options:\r\n\r\n- **Child Layout** : The component will figure out the layout of its bones with the dimensions of its direct children.\r\n- **Custom Layout** : You provide a prop `layout` to the component specifying the size of the bones (see the [Examples](#examples) section below). Herunder is the example with a custom layout. A key prop is optional but highly recommended.\r\n\r\n```javascript\r\nexport default function Placeholder() {\r\n  return (\r\n    <SkeletonContent\r\n      containerStyle={{ flex: 1, width: 300 }}\r\n      isLoading={false}\r\n      layout={[\r\n        { key: 'someId', width: 220, height: 20, marginBottom: 6 },\r\n        { key: 'someOtherId', width: 180, height: 20, marginBottom: 6 }\r\n      ]}\r\n    >\r\n      <Text style={styles.normalText}>Your content</Text>\r\n      <Text style={styles.bigText}>Other content</Text>\r\n    </SkeletonContent>\r\n  );\r\n}\r\n```\r\n\r\n3.  Then simply sync the prop `isLoading` to your state to show/hide the SkeletonContent when the assets/data are available to the user.\r\n\r\n```javascript\r\nexport default function Placeholder() {\r\n  const [loading, setLoading] = useState(true);\r\n  return (\r\n    <SkeletonContent\r\n      containerStyle={{ flex: 1, width: 300 }}\r\n      isLoading={isLoading}\r\n      {...otherProps}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Props\r\n\r\n| Name               | Type             | Default                 | Description                                                                                                                       |\r\n| ------------------ | ---------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------- |\r\n| isLoading          | bool             | **required**            | Shows the Skeleton bones when true                                                                                                |\r\n| layout             | array of objects | []                      | A custom layout for the Skeleton bones                                                                                            |\r\n| duration           | number           | 1200 ms                 | Duration of one cycle of animation                                                                                                |\r\n| containerStyle     | object           | flex: 1                 | The style applied to the View containing the bones                                                                                |\r\n| easing             | Easing           | bezier(0.5, 0, 0.25, 1) | Easing of the bones animation                                                                                                     |\r\n| animationType      | string           | \"shiver\"                | The animation to be used for animating the bones (see demos below)                                                                |\r\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) |\r\n| boneColor          | string           | \"#E1E9EE\"               | Color of the bones                                                                                                                |\r\n| highlightColor     | string           | \"#F2F8FC\"               | Color of the highlight of the bones                                                                                               |\r\n\r\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.\r\n\r\n### Examples\r\n\r\nSee the playground section to experiment :\r\n**1** - Changing the direction of the animation (animationDirection prop) :\r\n\r\n<p align=\"center\">\r\n<img width=\"300px\" src=\"https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/direction_change.gif\" />\r\n</p>\r\n\r\n```javascript\r\nexport default function Placeholder() {\r\n  return (\r\n    <SkeletonContent\r\n      containerStyle={{ flex: 1, width: 300 }}\r\n      animationDirection=\"horizontalLeft\"\r\n      isLoading={true}\r\n      // ...\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n**2** - Changing the colors and switching to \"pulse\" animation (boneColor, highlightColor and animationType prop) :\r\n\r\n<p align=\"center\">\r\n<img width=\"300px\" src=\"https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/color_change.gif\" />\r\n</p>\r\n\r\n```javascript\r\nexport default function Placeholder() {\r\n  return (\r\n    <SkeletonContent\r\n      containerStyle={{ flex: 1, width: 300 }}\r\n      boneColor=\"#121212\"\r\n      highlightColor=\"#333333\"\r\n      animationType=\"pulse\"\r\n      isLoading={true}\r\n      // ...\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n**3** - Customizing the layout of the bones (layout prop) :\r\n\r\n<p align=\"center\">\r\n<img width=\"300px\" src=\"https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/layout_change.gif\" />\r\n</p>\r\n\r\n```javascript\r\nexport default function Placeholder() {\r\n  return (\r\n    <SkeletonContent\r\n      containerStyle={{ flex: 1, width: 300 }}\r\n      animationDirection=\"horizontalLeft\"\r\n      layout={[\r\n        // long line\r\n        { width: 220, height: 20, marginBottom: 6 },\r\n        // short line\r\n        { width: 180, height: 20, marginBottom: 6 }\r\n        // ...\r\n      ]}\r\n      isLoading={true}\r\n      // ...\r\n    />\r\n  );\r\n}\r\n```\r\n","readmeFilename":"README.md"}