Replace react-native-autoheight-webview with WebView

index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import _ from 'lodash';
-import AutoHeightWebView from 'react-native-autoheight-webview';
+
+import { WebView } from 'react-native';
 
 const defaultOptions = {
 	messageStyle: 'none',
@@ -17,31 +17,56 @@ const defaultOptions = {
 };
 
 class MathJax extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			height: 1
+		};
+	}
+
+	handleMessage(message) {
+		this.setState({
+			height: Number(message.nativeEvent.data)
+		});
+	}
+
 	wrapMathjax(content) {
 		const options = JSON.stringify(
-			_.merge(defaultOptions, this.props.mathJaxOptions)
+			Object.assign({}, defaultOptions, this.props.mathJaxOptions)
 		);
+
 		return `
 			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 			<script type="text/x-mathjax-config">
 				MathJax.Hub.Config(${options});
+
 				MathJax.Hub.Queue(function() {
-					document.getElementById("formula").style.visibility = '';
-				});
+					var height = document.documentElement.scrollHeight;
 
+					window.postMessage(String(height));
+				});
 			</script>
+
 			<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"></script>
 
-			<div id="formula" style="visibility: hidden;">
-				${content}
-			</div>
+			${content}
 		`;
 	}
 	render() {
+		const html = this.wrapMathjax(this.props.html);
+
+		// Create new props without `props.html` field. Since it's deprecated.
+		const props = Object.assign({}, this.props, { html: undefined });
+
 		return (
-			<AutoHeightWebView
-				source={{ html: this.wrapMathjax(this.props.html) }}
-				{...this.props}
+			<WebView
+				scrollEnabled={false}
+				onMessage={ this.handleMessage.bind(this) }
+				source={{ html: html }}
+				style={{ height: this.state.height, ...props.style }}
+
+				{...props}
 			/>
 		);
 	}