{"id":18472548,"url":"https://github.com/wangdicoder/react-native-progress-webview","last_synced_at":"2025-04-08T11:32:57.237Z","repository":{"id":57339239,"uuid":"190840082","full_name":"wangdicoder/react-native-progress-webview","owner":"wangdicoder","description":"🧩 A wrapper of React Native WebView to provide a loading bar on the top of the browser.","archived":false,"fork":false,"pushed_at":"2020-03-19T11:54:56.000Z","size":68,"stargazers_count":22,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-29T13:54:49.219Z","etag":null,"topics":["loading-bar","progress-bar","react-native","react-native-progress-webview","react-native-webview","webview"],"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/wangdicoder.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":"2019-06-08T03:17:07.000Z","updated_at":"2024-06-14T07:38:45.000Z","dependencies_parsed_at":"2022-09-01T22:40:31.663Z","dependency_job_id":null,"html_url":"https://github.com/wangdicoder/react-native-progress-webview","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/wangdicoder%2Freact-native-progress-webview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangdicoder%2Freact-native-progress-webview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangdicoder%2Freact-native-progress-webview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangdicoder%2Freact-native-progress-webview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wangdicoder","download_url":"https://codeload.github.com/wangdicoder/react-native-progress-webview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223318723,"owners_count":17125771,"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-bar","progress-bar","react-native","react-native-progress-webview","react-native-webview","webview"],"created_at":"2024-11-06T10:20:46.960Z","updated_at":"2024-11-06T10:20:47.800Z","avatar_url":"https://github.com/wangdicoder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Progress WebView\n\n![npm](https://img.shields.io/npm/dy/react-native-progress-webview.svg) ![npm](https://img.shields.io/npm/v/react-native-progress-webview.svg) [![star this repo](http://githubbadges.com/star.svg?user=wangdicoder\u0026repo=react-native-progress-webview\u0026style=flat)](https://github.com/wangdicoder/react-native-progress-webview) ![GitHub](https://img.shields.io/github/license/wangdicoder/react-native-progress-webview.svg)\n\n**React Native Progress WebView** is a wrapper of [React Native WebView](https://github.com/react-native-community/react-native-webview) to provide a loading bar on the top of the browser.\n\n\u003cimg src=\"https://raw.githubusercontent.com/wangdicoder/react-native-progress-webview/master/screenshot.gif\" width=\"326\" height=\"576\" /\u003e\n\n## Platforms Supported\n\n- [x] iOS (both UIWebView and WKWebView)\n- [x] Android\n\n## Getting Started\n\nFirstly, read the [Getting Started Guide](https://github.com/react-native-community/react-native-webview) on React Native WebView page to configure the webview component.\n\nThen\n```bash\n$ npm install --save react-native-progress-webview\n```\n\n## Usage\n\nImport the `ProgressWebView` component from `react-native-progress-webview` and use it like so:\n\n```jsx\nimport React, { Component } from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport ProgressWebView from \"react-native-progress-webview\";\n\n// ...\nclass App extends Component {\n  render() {\n    return (\n      \u003cProgressWebView source={{ uri: 'https://facebook.github.io/react-native/' }} /\u003e\n    );\n  }\n}\n```\n\n## API\n\n**React Native Progress Webview** supports all React Native Webview props. Read the [API Reference](https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md) to explore. There are a couple of exclusive props related to the loading bar.\n\n| prop              | type   | default | description                                                 |\n| ----------------- | ------ | ------- | ----------------------------------------------------------- |\n| height            | number | 3       | the height of loading bar                                   |\n| color             | string | #3B78E7 | the normal color of loading bar                             |\n| errorColor        | string | #f30    | the error color of loading bar                              |\n| disappearDuration | number | 300     | the visible duration after the webview finishes the loading |\n\n## Common issues\n\n#### How can I use `ref` to get WebView methods?\n\nIt's same as using raw WebView. You can just pass a `ref` prop to get the instance.\n\n```jsx\nclass App extends Component {\n  constructor(props){\n    super(props);\n    this.ref = React.createRef();\n  }\n\n  componentDidMount() {\n    console.log(this.ref.current);\n  }\n\n  render() {\n    return (\n      \u003cProgressWebView\n        ref={this.ref}\n        source={{ uri: 'https://facebook.github.io/react-native/' }} \n      /\u003e\n    );\n  }\n}\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangdicoder%2Freact-native-progress-webview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwangdicoder%2Freact-native-progress-webview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangdicoder%2Freact-native-progress-webview/lists"}