React-native-render-html: i used imagesMaxWidth but some of my images can't get windows width

Created on 20 Jan 2018 · 11Comments · Source: meliorence/react-native-render-html

some of my images seems to be largee than my devices screen width here are my codes

 <HTML 
                html={data.content} 
                imagesMaxWidth={Dimensions.get('window').width} 
                tagsStyles={ {a: { fontStyle: 'italic', color: '#039BE5',fontWeight: 'bold' } }}
                baseFontStyle={{fontSize:15}}
                />

enhancement

Source

nsanzumuhire

Most helpful comment

@Exilz it would be nice if you show me the pratical good way to use ignoredStyles since am using it like this

<HTML 
                html={data.content} 
                imagesMaxWidth={Dimensions.get('window').width} 
                tagsStyles={{a: { color: '#039BE5',fontWeight: 'bold' } }}
                baseFontStyle={{fontSize:16,fontFamily: 'sans-serif-light',color:'#090f0f'}}
                ignoredStyles={['height','width']} />

nsanzumuhire on 15 Feb 2018

❤3 👍3

All 11 comments

all images are inline whitch means they are all wrapped in <p><img style="height:.. width:.."/></p> thats how my rich text editor generate them so i cant change it and i arleady have a lot of genereted content and ofcourse my rich text editor generate images with width and height and as docs says imagesMaxWidth will be ignored but am asking if there is a way of rendering my custom images renderer (example) and remove that generated height and width from the api . any help will be appreciated

nsanzumuhire on 24 Jan 2018

👍1

Hi,
you should be able to remove height and width from your images with alterNode.

Something like that (untested) :

alterNode = (node) => {
    const { name, parent, attribs } = node;
    if (name === 'img') {
        // delete width and height properties
        return node;
    }
};

Exilz on 5 Feb 2018

👍3

Regarding your styles not being ignored by ignoredStyles, this is because the <img> tag uses a custom renderer that doesn't take into account this prop.

I guess this is counter-intuitive and it shouldn't work this way. HTMLImage.js needs an update.

Exilz on 5 Feb 2018

Okay, so it turns out it's working fine for my on 3.7.0.

<img src="http://placehold.it/250x250" style="width:125px;height:125px;" />

When using these props :

{ ignoredStyles: ['width', 'height'], imagesMaxWidth: 50 }

width and height styles are properly ignored, and imagesMaxWidth works.

However, if width and height are supplied as html attributes and not as styles, llike this : <img src="http://placehold.it/250x250" style="width:125px;height:125px;" width=125 height=125 />, the image is displayed in 125 by 125 pixels.

This is because ignoredStyles only filters styles in the style property.

I improved ignoredStyles so it also removes all styles added directly through html attributes, too. This should cover all cases.

Exilz on 7 Feb 2018

👍4

@Exilz it would be nice if you show me the pratical good way to use ignoredStyles since am using it like this

<HTML 
                html={data.content} 
                imagesMaxWidth={Dimensions.get('window').width} 
                tagsStyles={{a: { color: '#039BE5',fontWeight: 'bold' } }}
                baseFontStyle={{fontSize:16,fontFamily: 'sans-serif-light',color:'#090f0f'}}
                ignoredStyles={['height','width']} />

nsanzumuhire on 15 Feb 2018

❤3 👍3

@Exilz i love u man, its working like a charm. Good work this library is > than react-native-htmlview i have tried it too

nsanzumuhire on 15 Feb 2018

@Exilz @Kush5900
You beautiful people!!! You saved my life!!!!

smubarak-ali on 5 Mar 2019

@Exilz，如果您向我展示使用ignoreStyles的实用方法，那就太好了，因为我正在像这样使用它

<HTML 
                html={data.content} 
                imagesMaxWidth={Dimensions.get('window').width} 
                tagsStyles={{a: { color: '#039BE5',fontWeight: 'bold' } }}
                baseFontStyle={{fontSize:16,fontFamily: 'sans-serif-light',color:'#090f0f'}}
                ignoredStyles={['height','width']} />

Hello，I set ‘imagesMaxWidth={Dimensions.get('window').width} ’， but img width beyond the screen，s there any way? Thanks，