Add TypeScript types definition; minor refactoring; README changes

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 = "<h1>This is title</h1><p>Throw your entire HTML here</p>";
 
 
 ## 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
-

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<IMyWebViewProps> {
+    }
+}

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 (
-      <WebView
-        ref={(ref) => { 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 (
+            <WebView
+                ref={this.setWebViewRef}
+                injectedJavaScript={this.getInjectedJavaScript()}
+                scrollEnabled={scrollEnabled || false}
+                onMessage={this._onMessage}
+                automaticallyAdjustContentInsets={true}
+                {...props}
+                style={StyleSheet.flatten([{width: _w}, style, {height: _h}])}
+                javaScriptEnabled={true}
+            />
+        );
+    }
 }