{"id":13808947,"url":"https://github.com/zeljkoX/react-native-loading-placeholder","last_synced_at":"2025-05-14T03:31:56.688Z","repository":{"id":57338124,"uuid":"92426891","full_name":"zeljkoX/react-native-loading-placeholder","owner":"zeljkoX","description":"React Native Loading Placeholder","archived":false,"fork":false,"pushed_at":"2018-01-10T09:33:08.000Z","size":513,"stargazers_count":176,"open_issues_count":4,"forks_count":17,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-09T18:25:09.924Z","etag":null,"topics":["loader","placeholder","react-native","skeletor"],"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/zeljkoX.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}},"created_at":"2017-05-25T17:19:32.000Z","updated_at":"2024-04-02T17:40:50.000Z","dependencies_parsed_at":"2022-09-07T16:04:43.599Z","dependency_job_id":null,"html_url":"https://github.com/zeljkoX/react-native-loading-placeholder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeljkoX%2Freact-native-loading-placeholder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeljkoX%2Freact-native-loading-placeholder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeljkoX%2Freact-native-loading-placeholder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeljkoX%2Freact-native-loading-placeholder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeljkoX","download_url":"https://codeload.github.com/zeljkoX/react-native-loading-placeholder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224918489,"owners_count":17392076,"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":["loader","placeholder","react-native","skeletor"],"created_at":"2024-08-04T01:01:55.720Z","updated_at":"2024-11-19T00:31:14.835Z","avatar_url":"https://github.com/zeljkoX.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Native Loading Placeholder [![npm version](https://img.shields.io/npm/v/react-native-loading-placeholder.svg?style=flat)](https://www.npmjs.com/package/react-native-loading-placeholder)\n\nA customizable loading placeholder component for React Native.\n\n## Features\n\n- Highly customizable design\n- Async feature to resolve whole PlaceholderContainer content or just Placeholder elements.\n\n\n## Demo\n\n\u003cimg src=\"https://github.com/zeljkoX/react-native-loading-placeholder/blob/master/demo/react-native-loading-placeholder.gif\" width=\"360\"\u003e\n\n\n## Installation\n\n```sh\nnpm install react-native-loading-placeholder\n```\n\n\n## Example\n\n```js\n\nimport React, { Component } from 'react';\nimport { AppRegistry, StyleSheet, Text, View } from 'react-native';\nimport {\n  PlaceholderContainer,\n  Placeholder\n} from 'react-native-loading-placeholder';\nimport LinearGradient from 'react-native-linear-gradient';\n\nexport default class Test extends Component {\n  loadingComponent: Promise\u003cReact.Element\u003c*\u003e\u003e;\n  loadingComponent1: Promise\u003c*\u003e;\n  constructor(props) {\n    super(props);\n  }\n  componentWillMount(): void {\n    this.loadingComponent = new Promise(resolve =\u003e {\n      setTimeout(() =\u003e {\n        resolve(\n          \u003cView\n            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}\n          \u003e\n            \u003cText\u003eResolved\u003c/Text\u003e\n          \u003c/View\u003e\n        );\n      }, 6000);\n    });\n    this.loadingComponent1 = new Promise(resolve =\u003e {\n      setTimeout(() =\u003e {\n        resolve();\n      }, 8000);\n    });\n  }\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cPlaceholderExample loader={this.loadingComponent} /\u003e\n        \u003cPlaceholderExample1 loader={this.loadingComponent1} /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst Gradient = (): React.Element\u003c*\u003e =\u003e {\n  return (\n    \u003cLinearGradient\n      colors={['#eeeeee', '#dddddd', '#eeeeee']}\n      start={{ x: 1.0, y: 0.0 }}\n      end={{ x: 0.0, y: 0.0 }}\n      style={{\n        flex: 1,\n        width: 120\n      }}\n    /\u003e\n  );\n};\n\nconst PlaceholderExample = ({\n  loader\n}: {\n  loader: Promise\u003c*\u003e\n}): React.Element\u003c*\u003e =\u003e {\n  return (\n    \u003cPlaceholderContainer\n      style={styles.placeholderContainer}\n      animatedComponent={\u003cGradient /\u003e}\n      duration={1000}\n      delay={1000}\n      loader={loader}\n    \u003e\n      \u003cView style={{ flexDirection: 'row' }}\u003e\n        \u003cPlaceholder style={[styles.placeholder, { width: 50, height: 50 }]} /\u003e\n        \u003cView\n          style={{\n            flexDirection: 'column',\n            width: '100%',\n            alignItems: 'center',\n            justifyContent: 'center'\n          }}\n        \u003e\n          \u003cPlaceholder\n            style={[\n              styles.placeholder,\n              {\n                width: '50%',\n                height: 10\n              }\n            ]}\n          /\u003e\n          \u003cPlaceholder\n            style={[\n              styles.placeholder,\n              {\n                width: '35%',\n                height: 7\n              }\n            ]}\n          /\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n\n      \u003cPlaceholder\n        style={[styles.placeholder, { marginTop: 20, width: '80%' }]}\n      /\u003e\n      \u003cPlaceholder style={[styles.placeholder, { width: '90%' }]} /\u003e\n      \u003cPlaceholder style={[styles.placeholder, { width: '50%' }]} /\u003e\n    \u003c/PlaceholderContainer\u003e\n  );\n};\n\nconst PlaceholderExample1 = ({\n  loader\n}: {\n  loader: Promise\u003c*\u003e\n}): React.Element\u003c*\u003e =\u003e {\n  return (\n    \u003cPlaceholderContainer\n      style={styles.placeholderContainer}\n      animatedComponent={\u003cGradient /\u003e}\n      duration={1000}\n      delay={1000}\n      loader={loader}\n      replace={true}\n    \u003e\n      \u003cView style={{ flexDirection: 'column' }}\u003e\n        \u003cView style={styles.row}\u003e\n          \u003cText style={{ width: '20%', textAlign: 'center' }}\u003eName\u003c/Text\u003e\n          \u003cPlaceholder\n            style={[\n              styles.placeholder,\n              {\n                width: '50%',\n                height: 10\n              }\n            ]}\n          \u003e\n            \u003cText\u003eJohn Doe\u003c/Text\u003e\n          \u003c/Placeholder\u003e\n\n        \u003c/View\u003e\n\n        \u003cView style={{ flexDirection: 'row' }}\u003e\n          \u003cView style={styles.row}\u003e\n            \u003cText style={{ width: '20%', textAlign: 'center' }}\u003eAge\u003c/Text\u003e\n            \u003cPlaceholder\n              style={[\n                styles.placeholder,\n                {\n                  width: '15%',\n                  height: 10\n                }\n              ]}\n            \u003e\n              \u003cText\u003e47\u003c/Text\u003e\n            \u003c/Placeholder\u003e\n          \u003c/View\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n    \u003c/PlaceholderContainer\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n    paddingTop: 25,\n    backgroundColor: '#f6f7f8'\n  },\n  placeholderContainer: {\n    width: '90%',\n    backgroundColor: '#fff',\n    height: 200\n  },\n  placeholder: {\n    height: 8,\n    marginTop: 6,\n    marginLeft: 15,\n    alignSelf: 'flex-start',\n    justifyContent: 'center',\n    backgroundColor: '#eeeeee'\n  },\n  row: {\n    flexDirection: 'row',\n    width: '100%'\n  }\n});\n```\n\n\n## API\n\nThe package exposes the following components,\n\n### `\u003cPlaceholderContainer /\u003e`\n\nContainer component responsible for orchestrating animations in placeholder components.\n\n#### Props\n\n- `duration` - Animated timing 'speed'\n- `delay` - Delay before starting next placeholder animation\n- `style` - Container style,\n- `animatedComponent` -  Animated component (example: gradient component)\n- `loader` - Promise that resolves to React Component that is going to be displayed instead placeholders. Note: If replace props is set to true loader just need to resolve.\n- `replace` - Flag to indicate if placeholder elements are going to be replaced with its child elements on loader status resolved\n\n\n### `\u003cPlaceholder /\u003e`\n\nComponent that displays animated component\n\n#### Props\n\n- `style` - Object\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FzeljkoX%2Freact-native-loading-placeholder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FzeljkoX%2Freact-native-loading-placeholder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FzeljkoX%2Freact-native-loading-placeholder/lists"}