auto height adjustment is not working

[shivam0831]

auto height adjustment of webview is not working in this library, any suggestions?

[harsh-kukreja]

Hey @shivam0831 were you able to solve?

[shivam0831]

@harsh-kukreja I am using react-native-autoheight-webview instead of react-native-webview

[swaroopaillinda]

@shivam0831 this autoheight module worked for ios but not wokring in android can u explain how you fixed for android

[shivam0831]

@swaroopaillinda try to use react-native-autoheight-webview instead of react-native-webview inside index.js. it should work.

[swaroopaillinda]

@shivam0831 <View style={{ ...props.style}}> <AutoHeightWebView scrollEnabled={true} //onSizeUpdated={this.handleMessage.bind(this)} scalesPageToFit onMessage={this.handleMessage.bind(this)} source={{ html }} {...props} /> </View>

done like this only but in android the height is fixed so the html content cutting it is not updating with respect to the html content

[swaroopaillinda]

@shivam0831 please respond as its very important to me

[shivam0831]

@swaroopaillinda try this.

import React from 'react';
import { View, Dimensions, ScrollView } from 'react-native';
import AutoHeightWebView from 'react-native-autoheight-webview';

const defaultOptions = {
	showMathMenu: false,
	messageStyle: 'none',
	extensions: ['tex2jax.js'],
	jax: ['input/TeX', 'output/HTML-CSS'],
	tex2jax: {
		inlineMath: [['$', '$'], ['\\(', '\\)']],
		displayMath: [['$$', '$$'], ['\\[', '\\]']],
		processEscapes: true,
	},
	TeX: {
		extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js']
	}
};

class MathJax extends React.Component {
	constructor(props) {
		super(props);
	}

	wrapMathjax(content) {
		const options = JSON.stringify(
			Object.assign({}, defaultOptions, this.props.mathJaxOptions)
		);
		const contentHtml = JSON.stringify(content);
                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() {
							var height = document.documentElement.scrollHeight;
							window.postMessage(String(height));
							document.getElementById("formula").style.visibility = '';
						});
					</script>
					<script type="text/javascript"
						src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-MML-AM_CHTML">
					</script>
					<div id="formula" style="visibility:;">
						${content}
					</div>
				  `;
       }
	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 (
			<View style={{ ...props.style, overflow: 'hidden' }}>
				<AutoHeightWebView
					scrollEnabled={false}
					source={{ html }}
					style={{
						opacity: 0.99,
					}}
                                        {...props}
				/>
			</View>
		);
	}
}

export default MathJax;