react-native-htmlview

react-native-htmlview copied to clipboard

I'm trying to render the entire html where it has p, a, img tags, but the images seems to be cropped instead be shown as 100% width.

I tried add img style, like normal css, but without success.

const styles = StyleSheet.create({
      a: {
        color: style.content.link.color,
        fontWeight: '300',
      },
      p: {
        color: this.props.data.color,
        fontSize: this.props.data.fontSize,
        lineHeight: this.props.data.lineHeight,
        marginBottom: 0,
        marginTop: 0,
        paddingBottom: 0,
        paddingTop: 0,
      },
    });

<HTMLView
addLineBreaks={false}
value={this.props.data.item.content}
stylesheet={styles}
/>

Is there anything to fix this?

"react-native": "0.57.4",
"react-native-htmlview": "^0.13.0",

Having exactly the same issue here. Bump.

Have you solved it

Noop

any workaround ?

Just add renderNode attribute in HTMLView tag like this <HTMLView value={this.state.content} stylesheet={styles} renderNode={this.renderNode} <-- this line /> Copy and paste renderNode function with your custom styling renderNode(node, index, siblings, parent, defaultRenderer) { if (node.name == 'img') { const a = node.attribs; return ( <Image style={{width: 100, height:100}} source={{uri: a.src}}/> ); } }

I did a workaround to solve this issue and it is working fine

import { Image, Dimensions } from 'react-native';

  function renderNode(node) {
    if (node.name === 'img') {
      return (
        <Image
          source={{ uri: node.attribs.src, cache: 'reload' }}
          style={{
            width: 'auto',
            height: node.attribs.height || Dimensions.get('window').height, 
            resizeMode: 'contain',
          }}
        />
      );
    }
  }

 <HTMLView 
   value={content}
 renderNode={renderNode} />