upgrade dependencies & use react-native-webview

autoHeightWebView/index.ios.js

@@ -2,12 +2,14 @@
 
 import React, { PureComponent } from 'react';
 
-import { Animated, StyleSheet, WebView } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
 
 import PropTypes from 'prop-types';
 
 import { commonPropTypes } from './propTypes.js';
 
+import { WebView } from 'react-native-webview';
+
 import {
   isEqual,
   setState,
@@ -39,7 +41,6 @@ export default class AutoHeightWebView extends PureComponent {
 
   static defaultProps = {
     baseUrl: 'web/',
-    scalesPageToFit: false,
     enableAnimation: true,
     animationDuration: 255,
     heightOffset: 12
@@ -133,7 +134,6 @@ export default class AutoHeightWebView extends PureComponent {
       onLoadStart,
       onLoadEnd,
       onShouldStartLoadWithRequest,
-      scalesPageToFit,
       enableAnimation,
       heightOffset,
       style,
@@ -169,7 +169,6 @@ export default class AutoHeightWebView extends PureComponent {
           onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
           style={styles.webView}
           scrollEnabled={!!scrollEnabled}
-          scalesPageToFit={scalesPageToFit}
           injectedJavaScript={script}
           source={source}
           onNavigationStateChange={this.handleNavigationStateChange}
@@ -184,12 +183,16 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent'
   },
   webView: {
-    flex: 1,
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
+    flex: 1
   }
 });
 
+// add viewport setting to meta for WKWebView
 const commonScript = `
+    var meta = document.createElement('meta'); 
+    meta.setAttribute('name', 'viewport'); 
+    meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);
     updateSize();
     window.addEventListener('load', updateSize);
     window.addEventListener('resize', updateSize);

package.json

@@ -29,18 +29,19 @@
   "homepage": "https://github.com/iou90/react-native-autoheight-webview#readme",
   "peerDependencies": {
     "react": "*",
-    "react-native": ">= 0.56.0"
+    "react-native": ">= 0.57.0"
   },
   "dependencies": {
     "immutable": "^3.8.2",
-    "prop-types": "^15.6.2"
+    "prop-types": "^15.7.1",
+    "react-native-webview": "^5.0.7"
   },
   "devDependencies": {
-    "babel-eslint": "^8.2.2",
+    "babel-eslint": "^8.2.6",
     "eslint": "^4.18.1",
     "eslint-plugin-jsx": "^0.0.2",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
-    "eslint-plugin-react-native": "^3.2.1"
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-native": "^3.6.0"
   }
 }