Wondering what’s next for npm?Check out our public roadmap! »

    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

    Install

    npm i react-native-progress-webview

    DownloadsWeekly Downloads

    54

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    8.75 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar