{"id":4312,"url":"https://github.com/heyman333/react-native-frame-loading","last_synced_at":"2025-04-13T11:12:57.552Z","repository":{"id":57337163,"uuid":"132340859","full_name":"heyman333/react-native-frame-loading","owner":"heyman333","description":"⛹️‍♀️⛹️‍♂️ Like animation LoadingIndicator with frame by frame view in React-Native ","archived":false,"fork":false,"pushed_at":"2018-07-21T18:23:49.000Z","size":262,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-13T11:12:51.936Z","etag":null,"topics":[],"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/heyman333.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-05-06T13:27:20.000Z","updated_at":"2023-03-09T02:37:07.000Z","dependencies_parsed_at":"2022-09-12T13:13:01.563Z","dependency_job_id":null,"html_url":"https://github.com/heyman333/react-native-frame-loading","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-native-frame-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-native-frame-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-native-frame-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-native-frame-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heyman333","download_url":"https://codeload.github.com/heyman333/react-native-frame-loading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248703198,"owners_count":21148118,"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":[],"created_at":"2024-01-05T20:17:07.894Z","updated_at":"2025-04-13T11:12:57.527Z","avatar_url":"https://github.com/heyman333.png","language":"JavaScript","readme":"## react-native-frame-loading [![NPM version](https://img.shields.io/badge/npm-v0.1.4-blue.svg)](https://www.npmjs.com/package/react-native-frame-loading)\n\n##### This package offers Loading indicator with frame by frame view or image\n\n#### Install \n```\nyarn add react-native-frame-loading\n# or \nnpm install react-native-frame-loading --save\n```   \n\n#### Screenshot\n\u003cimg src=\"https://raw.githubusercontent.com/heyman333/react-native-frame-loading/master/screenshot.gif\" width=\"320\" height=\"568\"\u003e\n\n#### Props \n|props     |default|type  |description                                          |\n|:--------:|:-----:|:----:|-----------------------------------------------------|\n|animating |false  |bool  |Determines wheter the loading indicator shows or not\n|views     |[]     |array |Specific views that will be shown frame by frame \n|duration  |450    |number|Determines how long a frame lasts         \n|modalProps|{}     |object|original [Modal component](https://facebook.github.io/react-native/docs/modal.html) props          \n|loadingContainerStyle|`flex: 1, \"center\"`|object|style object of floating view container\n\n\n\n\n#### Usage \n```js\nimport FrameLoading from \"react-native-frame-loading\"\nimport Icon from \"react-native-vector-icons/FontAwesome\"\n\nconst VIEWS = [\n  \u003cView key={1}\u003e\n    \u003cIcon name=\"arrow-up\" size={50} /\u003e\n  \u003c/View\u003e,\n  \u003cView key={2}\u003e\n    \u003cIcon name=\"arrow-right\" size={50} /\u003e\n  \u003c/View\u003e\n  ...\n  \n]\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cButton onPress={this._fetchSomeData} title=\"show animation\" /\u003e\\\n        \u003cFrameLoading\n          animating={this.state.loading}\n          views={VIEWS}\n          duration={250}\n          modalProps={{ transparent: true }}\n          loadingContainerStyle={{\n            justifyContent: \"center\",\n            alignItems: \"center\",\n            flex: 1,\n            backgroundColor: \"rgba(49,49,49,0.4)\"\n          }}\n        /\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n\n```\n","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheyman333%2Freact-native-frame-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheyman333%2Freact-native-frame-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheyman333%2Freact-native-frame-loading/lists"}