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 (
+
+ );
+ }
}