Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

renderNode return image not working

See original GitHub issue

i have a lot of images in my api that has <img style="height:.. ; width=.." /> others has nothing due to my rich text editor when i render html without calling renderNode my images are not displayed and but whaen i use renderNode like this its works but with static height and width codes below

 renderNode (node, index, siblings, parent, defaultRenderer) {
        
            if (node.name === 'img') {
              const a = node.attribs;
       
              return ( 
               <Image
                key={index}
                source={{uri: a.src}}
                //resizeMode={'stretch'}
                style={{
                  flex:1,
	          width: Dimensions.get('window').width ,
                  height:200
                  }}

                />
              );
            }
          }

renderNode function to return image with calculated width and height but not working because i want to keep my aspect ration and i decided to use Image.getSize to return original image size and i used promise because with return brock only would execute before Image.getSize but this renderNode function return nothing i don’t know where am wrong

renderNode(node, index, siblings, parent, defaultRenderer) {
            return new Promise((resolve, reject) => {
                let finalwidth;
                let finalheight;
                if (node.name === 'img') {
                    const a = node.attribs;
            
                    Image.getSize(a.src, (width, height) => {
            
                        let screenSize = Dimensions.get('window');
                        let hRatio = screenSize.width / width;
                        let vRatio = screenSize.height / height;
                        let ratio = Math.min(hRatio, vRatio);
                        let rat = hRatio / vRatio;
                        finalwidth = parseInt(width * ratio);
                        finalheight = parseInt(height * ratio);
            
                        resolve( <Image key = { index }
                                         source = {{ uri: a.src }}
                                        style = {{
                                        width: finalwidth, //finalwidth is null here
                                        height: finalheight, //finalheight is null here
                                    }}
            
                                />
                            )
                       
            
                    });
                }
            });
            }

this how i render html

<HTMLView
                value={data.content.replace(/\r?\n|\r/g, '')}
                addLineBreaks={true}
                renderNode={this.renderNode}
                stylesheet={htmlstyles}
                textComponentProps={{ style: styles.defaultStyle }}  />

Issue Analytics

State:
Created 6 years ago
Comments:13

Top GitHub Comments

3reactions

WajeehZantoutcommented, Feb 20, 2018

Hello, this is my code. I hope it can help you

import HTMLView from 'react-native-htmlview';
import React, { Component } from 'react';
import { Image, Dimensions, PixelRatio } from 'react-native';

const { width } = Dimensions.get('window');

export default class HtmlView extends Component {
  renderNode(node, index, siblings, parent, defaultRenderer) {
    if (node.name == 'img') {
      const { src, height } = node.attribs;
      const imageHeight = height || 300;
      return (
        <Image
          key={index}
          style={{ width: width * PixelRatio.get(), height: imageHeight * PixelRatio.get() }}
          source={{ uri: src }} />
      );
    }
  }

  render() {
    return (
      <HTMLView
        value={`<html><body>${this.props.content}</body></html>`}
        renderNode={this.renderNode}
        stylesheet={this.props.stylesheet} />
    )
  }
}

PixelRatio.get() returns the device pixel density.

0reactions

WajeehZantoutcommented, May 9, 2018

@jaychenjun No, I ended up using my solution.