jsdf/react-native-htmlview

Cannot resize the image and empty spaces

Bayramito opened this issue · 5 comments

Bayramito commented

Hello,

I started to useing this package today actually i really loved it becouse of its renderMode prop.

Anyways, I have 2 weird problems.

  1. I cant resize the image.
    Firstly, i tried to render my html data with default example. But i got interesting errors with webView component. yogaNode etc....
    Then i saw this renderMode method where actually you can create your custom setup to render the html tags.

And used the renderMode to use regular react native components to render the parsed data.
I used Image component from react-native to use image source, but this time i can't render the entire image. Its actually rendering half of it. Im sure this is a styling error somewhere but i could not find the solution.

Here is the image... On the original image face of the lady at middle is visible completely.
2

  1. There are some weird white spaces between the tags as you can see the top image but, on second image you can see the difference better. How can avoid this issue?
    1

here is my code:

`
const WebView = (props) => {
const htmlData = props.html;

console.log(htmlData);
function renderNode(node, index, siblings, parent, defaultRenderer) {
	console.log("node", node);
	if (node.name == "iframe") {
		const a = node.attribs;
		const videoId = a.src.split("/")[4];
		return (
			<Text style={{ flex: 1, backgroundColor: "blue" }}>
				<YoutubePlayer
					key={index}
					height={width * 0.55}
					width={width}
					videoId={videoId}
					play={false}
					onChangeState={(event) => console.log(event)}
					onReady={() => console.log("ready")}
					onError={(e) => console.log("error", e)}
					onPlaybackQualityChange={(q) => console.log(q)}
					volume={50}
					playbackRate={1}
					playerParams={{
						cc_lang_pref: "us",
						showClosedCaptions: true,
					}}
				/>
			</Text>
		);
	}

	if (node.name == "img") {
		const a = node.attribs;
		return (
			<Image
				key={index}
				style={{ width: width, height: width * 0.55 }}
				source={{ uri: a.src }}
			/>
		);
	}
}

return (
	<HTMLView value={htmlData} stylesheet={styles} renderNode={renderNode} />
);

};
const styles = StyleSheet.create({
a: {
fontWeight: "300",
color: "#FF3366", // make links coloured pink
},

img: {
	width: 400,
	height: 50,
},

});
export default WebView;
`

yue-f commented

I have the same problem. Have you solved it?

andreyoit commented

Regarding the issue of white spaces I've found a solution:
I'm applying a style to the <p> elements with the property stylesheets:

<HTML style={{padding: 10}} value={item.content.rendered} addLineBreaks={true} paragraphBreak={false} stylesheet={{ p: {marginTop: -60, fontSize: 18}, img: {width: imageWidth, height: imageHeight} }} />
I'm adding a marginTop negative by 60 so the white spaces disappeared, it's not an elegant solution, but works in mobile and tablet screens.

As you can see I'm trying to set an height and width to the images too, but this one is not working

CyberCyclone commented

I'm facing the same issue. On Android, <img> inside a <a> tag is pushed half way down the container, giving the impression that the image is missing the lower half.

Bayramito commented

i gave to img full width of the screen manually and solved my issue.

CyberCyclone commented

There seems to be issues with placing Image components inside a Text component, which is what this plugin does. I found that you need to override it in 'renderNode' so that it doesn't use a Text component.

Find the parent container and using a View to wrap it, and then place the children (which in this case is the Image itself). In this case, it's a html <a> tag that we're wanting to replace with a View. Below we target the Text container and replace it with <View>, then place in our unmodified Image ({defaultRenderer(node.children, parent)}). I've wrapped it all with < TouchableWithoutFeedback> since it's an <a> tag with href that we still need to use.

if (node.name == 'a' && node.children && node.children[0] && node.children[0].name == 'img') {
	let attribs = node.attribs;
	return (
		<TouchableWithoutFeedback
			key={index}
			onPress={async () => await WebBrowser.openBrowserAsync(attribs.href)}
			onLongPress={async () => await WebBrowser.openBrowserAsync(attribs.href)}
		>
			<View>
				{defaultRenderer(node.children, parent)}
			</View>
		</TouchableWithoutFeedback>
	);
}