react-native-progress-webview

1.2.0 • Public • Published

React Native Progress WebView

npm npm star this repo GitHub

React Native Progress WebView is a wrapper of React Native WebView to provide a loading bar on the top of the browser.

Platforms Supported

  • iOS (both UIWebView and WKWebView)
  • Android

Getting Started

Firstly, read the Getting Started Guide on React Native WebView page to configure the webview component.

Then

$ npm install --save react-native-progress-webview

Usage

Import the ProgressWebView component from react-native-progress-webview and use it like so:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import ProgressWebView from "react-native-progess-webview";
 
// ...
class App extends Component {
  render() {
    return (
      <ProgressWebView source={{ uri: 'https://facebook.github.io/react-native/' }} />
    );
  }
}

API

React Native Progress Webview supports all React Native Webview props. Read the API Reference to explore. There are a couple of exclusive props related to the loading bar.

prop type default description
height number 3 the height of loading bar
color string #3B78E7 the normal color of loading bar
errorColor string #f30 the error color of loading bar
disappearDuration number 300 the visible duration after the webview finishes the loading

Common issues

How can I use ref to get WebView methods?

It's same as using raw WebView. You can just pass a ref prop to get the instance.

class App extends Component {
  constructor(props){
    super(props);
    this.ref = React.createRef();
  }
 
  componentDidMount() {
    console.log(this.ref.current);
  }
 
  render() {
    return (
      <ProgressWebView
        ref={this.ref}
        source={{ uri: 'https://facebook.github.io/react-native/' }} 
      />
    );
  }
}

License

MIT

Dependencies (1)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i react-native-progress-webview

    Weekly Downloads

    88

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    8.75 kB

    Total Files

    10

    Last publish

    Collaborators

    • wangdicoder