I'm trying to render images using react-native-htmlview package but in Android it just places the image position on start of the line. It works pretty well on iOS.

Android:

iOS:

The react-native-htmlview basically renders a html string replacing with React Native components.

I tried to change the styles to position:'absolute', justifyContent: 'flex-start', flexDirection:'row', set a paddingTop: imgWidth, but nothing works...

When I make some change to the code and the Android simulator refreshes, the images move to the right position!

The code:

import React from 'react';
import { StyleSheet, Dimensions, Image } from 'react-native';
import ImageZoom from 'react-native-image-pan-zoom';
import HTMLView from 'react-native-htmlview';

export function HtmlView(props) {
  let now = new Date().getTime()

  const renderNode = (node, index, siblings, parent, defaultRenderer) => {
    if (node.name === 'img') {
      const data = node.attribs;
      const imgWidth = Dimensions.get('window').width - 100

      return (
        <View key={`${now}-img-view`} style={props.type == 'resolution'? styles.imgViewResolution: styles.imgView}>
          <ImageZoom key={`${now}-img-zoom`} style={styles.imageZoom} cropWidth={imgWidth} cropHeight={imgWidth} imageWidth={imgWidth} imageHeight={imgWidth}>
            <Image resizeMode="contain" key={`${now}-img`} source={{ uri: data.src }} style={{ width: imgWidth, height: imgWidth, aspectRatio: 1 }} />
          </ImageZoom>
          <Text key={`${now}-img-text`} style={props.type == 'cell'? cellStyles.zoomImageText : styles.zoomImageText}><Ionicons name="resize-outline" size={12}/> utilize o zoom para ampliar a imagem</Text>
        </View>
      );
    }

  return (
    <HTMLView key={`${now}-htmlview`} stylesheet={styles} renderNode={renderNode} paragraphBreak={props.paragraphBreak || '\n'} value={props.value}/>
  )  
}