I am using web view to load my rich text editor html content in react native. The problem is I need to render multiple webviews one after the other vertically. And webview need an explicit height to load content. So, after searching I found this article and it helped me to identify height based on content.
The content height on iOS is working fine. But on Android if the actual content height is "1756" it calculates as "8884".
import React, { Component } from "react";
import { View } from "react-native";
import { WebView } from 'react-native-webview';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp
} from "react-native-responsive-screen";
import _ from 'lodash';
const exampleHtml = `<p style="box-sizing: border-box; margin: 0px; padding: 10px 0px; overflow-wrap: break-word; color: rgb(0, 0, 0); font-family: OpenSans-Regular; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><strong style="box-sizing: border-box; margin: 0px; padding: 0px;">Google Pixel 4a: What the design could be like</strong></p>
<p style="box-sizing: border-box; margin: 0px; padding: 10px 0px; overflow-wrap: break-word; color: rgb(0, 0, 0); font-family: OpenSans-Regular; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Ahead of the Pixel 4a's launch, we seen the phone being leaked a number of times. The recent leaks, including a hands on video of the phone, leaked live images have revealed in detail the Pixel 4a's design.</p>
<p style="box-sizing: border-box; margin: 0px; padding: 10px 0px; overflow-wrap: break-word; color: rgb(0, 0, 0); font-family: OpenSans-Regular; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">They show that the Pixel 4a could come with curved edges with thin bezels on it. It is tipped to get a punch-hole design on the display with a single front-facing camera. The back has a squarish camera bump with a single camera and an LED flash, positioned diagonally inside the module. At the center of the smartphone is a circular fingerprint sensor, leading us to believe that Google might skip face unlock on the Pixel 4a.</p>
<p style="box-sizing: border-box; margin: 0px; padding: 10px 0px; overflow-wrap: break-word; color: rgb(0, 0, 0); font-family: OpenSans-Regular; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><strong style="box-sizing: border-box; margin: 0px; padding: 0px;">Pixel 4a: Features</strong></p>
<p style="box-sizing: border-box; margin: 0px; padding: 10px 0px; overflow-wrap: break-word; color: rgb(0, 0, 0); font-family: OpenSans-Regular; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">The Pixel 4a is also expected to be a feature rich phone. However, the phone is tipped to not come with Face Unlock feature. Instead, the phone could instead just go for a capacitive fingerprint scanner at the back. If this happens, it will all but mean that the phone will skip on Face Unlock tech.</p>
<p style="box-sizing: border-box; margin: 0px; padding: 10px 0px; overflow-wrap: break-word; color: rgb(0, 0, 0); font-family: OpenSans-Regular; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">But on the other hand, it should get the Now Playing feature and the new Google Assistant. And considering it's a Pixel smartphone, Google should also bring some of its most loved camera features to the device.</p>`;
class HtmlParser extends Component {
constructor(props) {
super(props);
this.state = {
Height: '100%',
};
}
onNavigationChange(event) {
if (event.title) {
let htmlHeight = Number(event.title) //convert to number
htmlHeight = isNaN(htmlHeight) ? 0 : htmlHeight + 20;
this.setState({ Height: htmlHeight});
}
}
render() {
const { Height } = this.state;
const script = `
<script>
window.location.hash = 1;
var calculator = document.createElement("div");
calculator.id = "height-calculator";
while (document.body.firstChild) {
calculator.appendChild(document.body.firstChild);
}
document.body.appendChild(calculator);
document.title = calculator.clientHeight;
true;
</script>
`;
const style = `
<style>
body, html, #height-calculator {
margin: 0;
padding: 0;
}
#height-calculator {
position: absolute;
top: 0;
left: 0;
right: 0;
}
</style>
`;
const rawHtml = '<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1"></head><body style="font-size:20px;">' + exampleHtml + '</body></html>'
return (
<View
style={{
paddingHorizontal: 10
}}
>
<WebView
useWebKit={true}
source={{ html: rawHtml + script + style }}
style={{
minWidth: wp('95%'),
minHeight: Height,
}}
scrollEnabled={true}
onNavigationStateChange={this.onNavigationChange.bind(this)}
/>
</View>
);
}
}
export default HtmlParser;
