{"id":21198381,"url":"https://github.com/netyouli/react-native-whc-loading","last_synced_at":"2025-07-10T05:32:51.836Z","repository":{"id":57341528,"uuid":"119474352","full_name":"netyouli/react-native-whc-loading","owner":"netyouli","description":"A react native module to show loading ui, it works on iOS and Android.","archived":false,"fork":false,"pushed_at":"2018-08-30T10:21:48.000Z","size":272,"stargazers_count":33,"open_issues_count":2,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-30T11:51:06.606Z","etag":null,"topics":["loading","react","react-native","react-native-whc-loading","redux","whc","whc-loading"],"latest_commit_sha":null,"homepage":"https://github.com/netyouli/react-native-whcapp","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/netyouli.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":"2018-01-30T03:03:00.000Z","updated_at":"2024-03-24T16:37:24.000Z","dependencies_parsed_at":"2022-09-15T16:21:31.824Z","dependency_job_id":null,"html_url":"https://github.com/netyouli/react-native-whc-loading","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netyouli%2Freact-native-whc-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netyouli%2Freact-native-whc-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netyouli%2Freact-native-whc-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netyouli%2Freact-native-whc-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/netyouli","download_url":"https://codeload.github.com/netyouli/react-native-whc-loading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225622929,"owners_count":17498168,"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":["loading","react","react-native","react-native-whc-loading","redux","whc","whc-loading"],"created_at":"2024-11-20T19:50:59.147Z","updated_at":"2024-11-20T19:50:59.720Z","avatar_url":"https://github.com/netyouli.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-whc-loading\nA react native module to show loading ui, it works on iOS and Android.\n\n[ ![release](https://img.shields.io/github/release/netyouli/react-native-whc-loading.svg?maxAge=2592000?style=flat-square)](https://github.com/netyouli/react-native-whc-loading/releases)\n[ ![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/netyouli/react-native-whc-loading/pulls)\n[ ![NPM version](http://img.shields.io/npm/v/react-native-whc-loading.svg?style=flat)](https://www.npmjs.com/package/react-native-whc-loading)\n[![License MIT](http://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/crazycodeboy/react-native-whc-loading/master/LICENSE)\n[ ![语言 中文](https://img.shields.io/badge/语言-中文-yellow.svg)](https://github.com/netyouli/react-native-whc-loading/blob/master/README.zh.md)\n\n\n\n## Content\n\n- [Installation](#installation)\n- [Demo](#demo)\n- [Getting started](#getting-started)\n- [API](#api)\n- [Contribution](#contribution)\n\n## Installation\n\n* 1.Run `npm i react-native-whc-loading --save`\n* 2.`import Loading from 'react-native-whc-loading'`\n\n## Demo  \n* [Example](https://github.com/netyouli/react-native-whc-loading/tree/master/example)\n\n![Screenshots](https://raw.githubusercontent.com/netyouli/react-native-whc-loading/master/example/screenshots/react-native-whc-loading.gif)\n\n## Getting started  \n\nAdd `react-native-whc-loading` to your js file.\n\n`import Loading from 'react-native-whc-loading'`\n\nInside your component's render method, use Loading:\n\n```javascript\n render() {\n         return (\n             \u003cView style={styles.container}\u003e\n                 ...\n                 \u003cLoading ref=\"loading\"/\u003e\n             \u003c/View\u003e\n         );\n }\n\n```\n\nThen you can use it like this:\n\n```javascript\n /// show loading ui\n this.refs.loading.show();\n\n /// close loading ui\n this.refs.loading.show(false);\n /// or\n this.refs.loading.close();\n```\n\nOr use show prop control show/hide\n```javascript\nrender() {\n          return (\n              \u003cView style={styles.container}\u003e\n                  ...\n                  \u003cLoading show={true/false}/\u003e\n              \u003c/View\u003e\n          );\n  }\n```\n\n### Basic usage\n\n```javascript\nrender() {\n        return (\n            \u003cView style={styles.container}\u003e\n                \u003cTouchableHighlight\n                    onPress={()=\u003e{\n                        this.refs.loading.show();\n                    }}\u003e\n                    \u003cText\u003eStart Loading\u003c/Text\u003e\n                \u003c/TouchableHighlight\u003e\n                \u003cLoading ref=\"loading\"/\u003e\n            \u003c/View\u003e\n        );\n    }\n```\n\n### Custom Loading\n\n```javascript\nrender() {\n        return (\n            \u003cView style={styles.container}\u003e\n                \u003cTouchableHighlight\n                    onPress={()=\u003e{\n                        this.refs.loading.show();\n                    }}\u003e\n                    \u003cText\u003eStart Loading\u003c/Text\u003e\n                \u003c/TouchableHighlight\u003e\n                \u003cLoading\n                    ref=\"loading\"\n                    image=require('../path/imagename.png')\n                    backgroundColor='#ffffffF2'\n                    borderRadius=5\n                    size=70\n                    imageSize=40\n                    indicatorColor='gray'\n                    easing=Loading.EasingType.ease\n                /\u003e\n            \u003c/View\u003e\n        );\n    }\n```\n\n\n## API\n\n\nProps              | Type     | Optional | Default     | Description\n----------------- | -------- | -------- | ----------- | -----------\nimage |  PropTypes.any |true | null  | Custom loading image\nbackgroundColor  | PropTypes.string  | true | '#ffffffF2'  |   Custom loading background color\nborderRadius  | PropTypes.number  | true | 5  |   Custom loading ui border radius\nsize  | PropTypes.number  | true | 70  |   Custom loading ui height width\nimageSize  | PropTypes.number  | true | 40  |   Custom loading image size\nindicatorColor  | PropTypes.string  | true | 'gray'  |   Custom default loading indicator color\neasing  | PropTypes.func  | true | Easing.ease  |   Custom loading image animation type\n\n\n\nMethod   |  Type     | Optional | Description\n----------------- | -------- | -------- | -----------\nshow(bool)   | function | true | show a loading ui\nclose()  |   function  |  -   |   hide loading ui\n\n\n## Contribution\n\nIssues are welcome. Please add a screenshot of bug and code snippet. Quickest way to solve issue is to reproduce it on one of the examples.\n\nPull requests are welcome. If you want to change API or making something big better to create issue and discuss it first.\n\n---\n\n**MIT Licensed**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetyouli%2Freact-native-whc-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetyouli%2Freact-native-whc-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetyouli%2Freact-native-whc-loading/lists"}