From 568ebc74d0dd158c1413ac6969f3733adbc2d02f Mon Sep 17 00:00:00 2001 From: Sergei Butko Date: Thu, 12 Apr 2018 13:32:10 +0300 Subject: [PATCH 1/6] Update README - Replace properties description with a table - Add installation command using yarn - Minor grammar changes --- README.md | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index ecc2567..45ab8bd 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # React Native WebView Autoheight -React Native WebView which sets it's height automatically with minimal efforts. +React Native WebView that sets its height automatically with minimal efforts. -You can also add custom CSS style or javascript to your webview using below example. +You can also add a custom CSS style or JavaScript to your WebView using below example. @@ -10,7 +10,10 @@ You can also add custom CSS style or javascript to your webview using below exam ## Installation -> npm install --save react-native-webview-autoheight + +Install the package using yarn or npm: + +```yarn add react-native-webview-autoheight``` or ```npm install --save react-native-webview-autoheight``` ## Usage @@ -34,13 +37,17 @@ const htmlContent = "

This is title

Throw your entire HTML here

"; ## Props -* Same as https://facebook.github.io/react-native/docs/webview.html#props -* `autoHeight` (default: true) -* `width` (default: Screen width) -* `defaultHeight` (default height unless autoHeight) +Uses WebView properties (https://facebook.github.io/react-native/docs/webview.html#props) along with following ones: + + Property | Type | Description | +| --------------------------------------- | :-------------------------------------- | :--------------------------------------- | +| `autoHeight` | bool (default true) | Enable or disable auto height | +| `width` |number (default Screen width) | Sets width of WebView | +| `defaultHeight` |number (default height unless autoHeight) | Sets default height of the component | + ## How it works -It is a very simple wrapper around the built-in React Native Webview, which updates the height of the webview based on a state change using `onNavigationStateChange`. +It is a very simple wrapper around the built-in React Native WebView, which updates the height of the WebView based on a state change using `onNavigationStateChange`. ### Feel free to add issues or feature requests From deb536fa47a54de8ae63e29b5d6a9e672dc4db72 Mon Sep 17 00:00:00 2001 From: Sergei Butko Date: Thu, 12 Apr 2018 13:46:49 +0300 Subject: [PATCH 2/6] Minor refactoring --- index.js | 57 +++++++++++++++++++++++++++++--------------------------- 1 file changed, 30 insertions(+), 27 deletions(-) diff --git a/index.js b/index.js index 0c8566c..dae0bf9 100644 --- a/index.js +++ b/index.js @@ -12,34 +12,32 @@ */ import React, { Component } from 'react'; -import { - View, - Dimensions, - WebView, -} from 'react-native'; +import {View, Dimensions, WebView, StyleSheet} from 'react-native'; const injectedScript = function() { function waitForBridge() { - if (window.postMessage.length !== 1){ + if (window.postMessage.length != 1) { setTimeout(waitForBridge, 200); - } - else { + } else { let height = 0; - if(document.documentElement.clientHeight>document.body.clientHeight) - { - height = document.documentElement.clientHeight + if(document.documentElement.clientHeight>document.body.clientHeight) { + height = document.documentElement.clientHeight; } - else - { - height = document.body.clientHeight + else { + height = document.body.clientHeight; } - postMessage(height) + postMessage(height); } } waitForBridge(); }; +const windowWidth = Dimensions.get('window').width + export default class MyWebView extends Component { + private webView; + private setWebViewRef = (ref) => this.webView = ref; + state = { webViewHeight: Number }; @@ -51,8 +49,8 @@ export default class MyWebView extends Component { constructor (props: Object) { super(props); this.state = { - webViewHeight: this.props.defaultHeight - } + webViewHeight: defaultHeight + }; this._onMessage = this._onMessage.bind(this); } @@ -63,25 +61,30 @@ export default class MyWebView extends Component { }); } + private getInjectedJavaScript() { + return '(' + String(injectedScript) + ')();' + 'window.postMessage = String(Object.hasOwnProperty).replace(\'hasOwnProperty\', \'postMessage\');'; + } + stopLoading() { this.webview.stopLoading(); } render () { - const _w = this.props.width || Dimensions.get('window').width; - const _h = this.props.autoHeight ? this.state.webViewHeight : this.props.defaultHeight; + const {width, autoHeight, defaultHeight, style, scrollEnabled, ...props} = this.props; + + const _w = width || windowWidth; + const _h = autoHeight ? this.state.webViewHeight : defaultHeight; return ( { this.webview = ref; }} - injectedJavaScript={'(' + String(injectedScript) + ')();' + - 'window.postMessage = String(Object.hasOwnProperty).replace(\'hasOwnProperty\', \'postMessage\');'} - scrollEnabled={this.props.scrollEnabled || false} + ref={this.setWebViewRef} + injectedJavaScript={this.getInjectedJavaScript()} + scrollEnabled={scrollEnabled || false} onMessage={this._onMessage} - javaScriptEnabled={true} automaticallyAdjustContentInsets={true} - {...this.props} - style={[{width: _w}, this.props.style, {height: _h}]} + {...props} + style={StyleSheet.flatten([{width: _w}, style, {height: _h}])} + javaScriptEnabled={true} /> - ) + ); } } From c04b41c6c8340ffada1d111ba542bb2ad5bed66e Mon Sep 17 00:00:00 2001 From: Sergei Butko Date: Thu, 12 Apr 2018 13:54:01 +0300 Subject: [PATCH 3/6] Minor changes --- index.js | 117 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 59 insertions(+), 58 deletions(-) diff --git a/index.js b/index.js index dae0bf9..5d51cf4 100644 --- a/index.js +++ b/index.js @@ -15,76 +15,77 @@ import React, { Component } from 'react'; import {View, Dimensions, WebView, StyleSheet} from 'react-native'; const injectedScript = function() { - function waitForBridge() { - if (window.postMessage.length != 1) { - setTimeout(waitForBridge, 200); - } else { - let height = 0; - if(document.documentElement.clientHeight>document.body.clientHeight) { - height = document.documentElement.clientHeight; - } - else { - height = document.body.clientHeight; - } - postMessage(height); + function waitForBridge() { + if (window.postMessage.length != 1) { + setTimeout(waitForBridge, 200); + } else { + let height = 0; + if(document.documentElement.clientHeight>document.body.clientHeight) { + height = document.documentElement.clientHeight; + } + else { + height = document.body.clientHeight; + } + postMessage(height); + } } - } - waitForBridge(); + waitForBridge(); }; const windowWidth = Dimensions.get('window').width export default class MyWebView extends Component { - private webView; - private setWebViewRef = (ref) => this.webView = ref; - - state = { - webViewHeight: Number - }; + webView; + setWebViewRef = (ref) => this.webView = ref; - static defaultProps = { - autoHeight: true, - } - - constructor (props: Object) { - super(props); - this.state = { - webViewHeight: defaultHeight + state = { + webViewHeight: Number }; - this._onMessage = this._onMessage.bind(this); - } + static defaultProps = { + autoHeight: true, + } - _onMessage(e) { - this.setState({ - webViewHeight: parseInt(e.nativeEvent.data) - }); - } + constructor (props: Object) { + super(props); + this.state = { + webViewHeight: defaultHeight + }; - private getInjectedJavaScript() { - return '(' + String(injectedScript) + ')();' + 'window.postMessage = String(Object.hasOwnProperty).replace(\'hasOwnProperty\', \'postMessage\');'; - } + this._onMessage = this._onMessage.bind(this); + } - stopLoading() { - this.webview.stopLoading(); - } + _onMessage(e) { + this.setState({ + webViewHeight: parseInt(e.nativeEvent.data) + }); + } - render () { - const {width, autoHeight, defaultHeight, style, scrollEnabled, ...props} = this.props; + getInjectedJavaScript() { + return '(' + String(injectedScript) + ')();' + 'window.postMessage = String(Object.hasOwnProperty).replace(\'hasOwnProperty\', \'postMessage\');'; + } - const _w = width || windowWidth; - const _h = autoHeight ? this.state.webViewHeight : defaultHeight; - return ( - - ); - } + stopLoading() { + this.webview.stopLoading(); + } + + render () { + const {width, autoHeight, defaultHeight, style, scrollEnabled, ...props} = this.props; + + const _w = width || windowWidth; + const _h = autoHeight ? this.state.webViewHeight : defaultHeight; + + return ( + + ); + } } From 7b5444996e5fb88059a342797ce4448a4486e43a Mon Sep 17 00:00:00 2001 From: Sergei Butko Date: Thu, 12 Apr 2018 14:04:31 +0300 Subject: [PATCH 4/6] Add TypeScript types definition --- index.d.ts | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 index.d.ts diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000..96e2046 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,25 @@ +declare module "react-native-webview-autoheight" { + import {Component} from "react"; + import {TextStyle, ViewStyle, WebViewProperties} from "react-native"; + + export interface IMyWebViewProps extends WebViewProperties { + /** + * Enable or disable auto height + * Note: Default true + */ + autoHeight?: boolean; + /** + * Sets width of WebView + * Note: Default Screen width + */ + width?: number; + /** + * Sets default height of the component + * Note: Default height unless autoHeight + */ + defaultHeight?: number; + } + + export default class MyWebView extends Component { + } +} From c5c1970f06e32794720dff0aac5f1b85284e7d22 Mon Sep 17 00:00:00 2001 From: Sergei Butko Date: Thu, 12 Apr 2018 14:12:29 +0300 Subject: [PATCH 5/6] Minor changes --- index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 5d51cf4..8ad6b64 100644 --- a/index.js +++ b/index.js @@ -49,7 +49,7 @@ export default class MyWebView extends Component { constructor (props: Object) { super(props); this.state = { - webViewHeight: defaultHeight + webViewHeight: props.defaultHeight }; this._onMessage = this._onMessage.bind(this); @@ -66,7 +66,7 @@ export default class MyWebView extends Component { } stopLoading() { - this.webview.stopLoading(); + this.webView.stopLoading(); } render () { @@ -74,7 +74,7 @@ export default class MyWebView extends Component { const _w = width || windowWidth; const _h = autoHeight ? this.state.webViewHeight : defaultHeight; - + return ( Date: Thu, 12 Apr 2018 14:18:45 +0300 Subject: [PATCH 6/6] Update README - Add a separated column for default values --- README.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 45ab8bd..574914a 100644 --- a/README.md +++ b/README.md @@ -39,11 +39,11 @@ const htmlContent = "

This is title

Throw your entire HTML here

"; ## Props Uses WebView properties (https://facebook.github.io/react-native/docs/webview.html#props) along with following ones: - Property | Type | Description | -| --------------------------------------- | :-------------------------------------- | :--------------------------------------- | -| `autoHeight` | bool (default true) | Enable or disable auto height | -| `width` |number (default Screen width) | Sets width of WebView | -| `defaultHeight` |number (default height unless autoHeight) | Sets default height of the component | + Property | Type | Default | Description | +| --------------------------------------- | :--------------------------------------: |:--------------------------------------: | :--------------------------------------- | +| `autoHeight` | bool | true | Enable or disable auto height | +| `width` | number | window width | Sets width of WebView | +| `defaultHeight` | number | height unless autoHeight | Sets default height of the component | ## How it works @@ -51,4 +51,3 @@ It is a very simple wrapper around the built-in React Native WebView, which upda ### Feel free to add issues or feature requests -