feat: add loading bar height prop

Author: wangdicoder

README.md

@@ -43,11 +43,12 @@ class App extends Component {
 
 **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.
 
-| prop              | type   | default | description                                             |
-| ----------------- | ------ | ------- | ------------------------------------------------------- |
-| color             | string | #3B78E7 | normal color of loading bar                             |
-| errorColor        | string | #f30    | error color of loading bar                              |
-| disappearDuration | number | 300     | the visible duration after loading bar loading finished |
+| 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 |
 
 ## License
 

lib/loading-bar.js

@@ -2,10 +2,11 @@ import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 
-const LoadingBar = ({ color, percent }) => {
+const LoadingBar = ({ color, percent, height }) => {
 	const style = {
 		backgroundColor: color,
-		width: `${percent * 100}%`
+		width: `${percent * 100}%`,
+		height,
 	};
 	return <View style={[styles.container, style]} />;
 };
@@ -17,7 +18,6 @@ LoadingBar.propTypes = {
 const styles = StyleSheet.create({
 	container: {
 		position: 'absolute',
-		height: 3,
 		zIndex: 10,
 		top: 0,
 		left: 0,

lib/webview.js

@@ -7,6 +7,7 @@ import LoadingBar from "./loading-bar";
 export default class ProgressBarWebView extends React.PureComponent {
 
 	static propTypes = {
+		height: PropTypes.number,
 		color: PropTypes.string,
 		errorColor: PropTypes.string,
 		disappearDuration: PropTypes.number,
@@ -17,6 +18,7 @@ export default class ProgressBarWebView extends React.PureComponent {
 	};
 
 	static defaultProps = {
+		height: 3,
 		color: '#3B78E7',
 		errorColor: '#f30',
 		disappearDuration: 300,
@@ -59,10 +61,11 @@ export default class ProgressBarWebView extends React.PureComponent {
 	}
 
 	render() {
+		const { height } = this.props;
 		const { percent, color, visible } = this.state;
 		return (
 			<View style={styles.container}>
-				{visible && <LoadingBar color={color} percent={percent}/>}
+				{visible && <LoadingBar height={height} color={color} percent={percent}/>}
 				<WebView
 					onLoadStart={this._onLoadStart}
 					onLoadEnd={this._onLoadEnd}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-progress-webview",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "React Native Progress WebView is a wrapper of React Native WebView to provide the loading status.",
   "main": "index.js",
   "scripts": {