diff --git a/README.md b/README.md index ecc2567..574914a 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,14 +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 | 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 -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 - 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 { + } +} diff --git a/index.js b/index.js index 0c8566c..8ad6b64 100644 --- a/index.js +++ b/index.js @@ -12,76 +12,80 @@ */ 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){ - setTimeout(waitForBridge, 200); + 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); + } } - 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 { - state = { - webViewHeight: Number - }; + webView; + setWebViewRef = (ref) => this.webView = ref; - static defaultProps = { - autoHeight: true, - } + state = { + webViewHeight: Number + }; - constructor (props: Object) { - super(props); - this.state = { - webViewHeight: this.props.defaultHeight + static defaultProps = { + autoHeight: true, } - this._onMessage = this._onMessage.bind(this); - } + constructor (props: Object) { + super(props); + this.state = { + webViewHeight: props.defaultHeight + }; + + this._onMessage = this._onMessage.bind(this); + } - _onMessage(e) { - this.setState({ - webViewHeight: parseInt(e.nativeEvent.data) - }); - } + _onMessage(e) { + this.setState({ + webViewHeight: parseInt(e.nativeEvent.data) + }); + } - stopLoading() { - this.webview.stopLoading(); - } + getInjectedJavaScript() { + return '(' + String(injectedScript) + ')();' + 'window.postMessage = String(Object.hasOwnProperty).replace(\'hasOwnProperty\', \'postMessage\');'; + } - render () { - const _w = this.props.width || Dimensions.get('window').width; - const _h = this.props.autoHeight ? this.state.webViewHeight : this.props.defaultHeight; - return ( - { this.webview = ref; }} - injectedJavaScript={'(' + String(injectedScript) + ')();' + - 'window.postMessage = String(Object.hasOwnProperty).replace(\'hasOwnProperty\', \'postMessage\');'} - scrollEnabled={this.props.scrollEnabled || false} - onMessage={this._onMessage} - javaScriptEnabled={true} - automaticallyAdjustContentInsets={true} - {...this.props} - style={[{width: _w}, this.props.style, {height: _h}]} - /> - ) - } + 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 ( + + ); + } }