React-native-render-html: imagesMaxWidth not working

Created on 25 Sep 2020 · 4Comments · Source: meliorence/react-native-render-html

It does not work after changing the RN version from 0.60.3 to 0.63.2.

"react": "16.13.1",

"react-native": "0.63.2",

"react-native-render-html": "^4.2.3",

"react-native-webview": "^10.9.0"

RN

<HTML 
      html={detailData.content}
      imagesMaxWidth={Dimensions.get('window').width}
      imagesInitialDimensions={{ width: Dimensions.get('window').width, height: Dimensions.get('window').width }}
      tagsStyles={{
      p: { fontFamily: Layout.fsFontNsR, marginTop: 5, lineHeight: 20 },
      div: { fontFamily: Layout.fsFontNsR, marginTop: 5, lineHeight: 20 },
      img: { width: Dimensions.get('window').width }
      }}
      />

HTML

<img id="se_object_1598178785239"     src="https://blogfiles.pstatic.net/MjAyMDA4MjNfMjIy/MDAxNTk4MTc4Mzc0NzY3.lP4y6IgYLhsLj98qYypYb1TJCzHGHAArTBsjcafM5ckg.SyBbjTSKLfVT_Tve1bW55GsCgn4NZA74_ZqhxOPWPDYg.JPEG.0610studio/6-%ED%94%BD_01.jpg"
        class="__se_object" s_type="attachment" s_subtype="photo"
        style=" width:1080px; height:1084px; rwidth:1080px; rheight:1084px;" width="1080" height="1084" imgqe="true"
        jsonvalue="%7B%7D" rwidth="1080px" rheight="1084px">

<img id="se_object_1598178852473"        src="https://blogfiles.pstatic.net/MjAyMDA4MjNfMTE2/MDAxNTk4MTc4Mzc0OTkz.aTquUUjfOjIJHOIOQOmKl8EM5J2V8iks6Xjg2ngs7wEg.-qG--Ba8CK8u6LHxmUtn4ApJAyuZUiCykGUta2VRzykg.JPEG.0610studio/6-%ED%94%BD_02.jpg"
        class="__se_object" s_type="attachment" s_subtype="photo"
        style=" width:1080px; height:1076px; rwidth:1080px; rheight:1076px;" width="1080" height="1076" imgqe="true"
        jsonvalue="%7B%7D" rwidth="1080px" rheight="1076px">

KakaoTalk_Photo_2020-09-25-14-01-50

bug

Source

KimJeonghun91

Most helpful comment

@KimJeonghun91 See https://github.com/archriss/react-native-render-html/releases/tag/v5.0.0-alpha.1

jsamr on 26 Sep 2020

🎉2

All 4 comments

@KimJeonghun91 Are you sure it's the RN version changes which cause a different behavior? We have proposed a new RFC for image and moreover media width here. There is a pending PR #389 ready to ship for v5.x. I could merge that to master and publish an alpha for you to test this. Are you interested?

jsamr on 25 Sep 2020

I am interested.
Would you please merge it and publish the alpha for me?
I will test it on my project.

KimJeonghun91 on 26 Sep 2020

@KimJeonghun91 See https://github.com/archriss/react-native-render-html/releases/tag/v5.0.0-alpha.1

jsamr on 26 Sep 2020

🎉2

@KimJeonghun91 I tried your code with the latest (alpha.2) and it works!

yarn add react-native-render-html@unstable

import * as React from 'react';
import {ScrollView, StyleSheet, useWindowDimensions} from 'react-native';
import HTML from 'react-native-render-html';

const html = `
<img id="se_object_1598178785239"     src="https://blogfiles.pstatic.net/MjAyMDA4MjNfMjIy/MDAxNTk4MTc4Mzc0NzY3.lP4y6IgYLhsLj98qYypYb1TJCzHGHAArTBsjcafM5ckg.SyBbjTSKLfVT_Tve1bW55GsCgn4NZA74_ZqhxOPWPDYg.JPEG.0610studio/6-%ED%94%BD_01.jpg"
        class="__se_object" s_type="attachment" s_subtype="photo"
        style=" width:1080px; height:1084px; rwidth:1080px; rheight:1084px;" width="1080" height="1084" imgqe="true"
        jsonvalue="%7B%7D" rwidth="1080px" rheight="1084px">

<img id="se_object_1598178852473"        src="https://blogfiles.pstatic.net/MjAyMDA4MjNfMTE2/MDAxNTk4MTc4Mzc0OTkz.aTquUUjfOjIJHOIOQOmKl8EM5J2V8iks6Xjg2ngs7wEg.-qG--Ba8CK8u6LHxmUtn4ApJAyuZUiCykGUta2VRzykg.JPEG.0610studio/6-%ED%94%BD_02.jpg"
        class="__se_object" s_type="attachment" s_subtype="photo"
        style=" width:1080px; height:1076px; rwidth:1080px; rheight:1076px;" width="1080" height="1076" imgqe="true"
        jsonvalue="%7B%7D" rwidth="1080px" rheight="1076px">
`;

export default function App() {
  const {width} = useWindowDimensions();
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <HTML contentWidth={width} html={html} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
  },
});

Notice that you don't need to set explicit width to your images anymore. The crucial step is to provide contentWidth prop. If you want to have images max width computed from content width, you'll need to use computeImagesMaxWidth prop. A great addition with using useWindowDimensions is that the image will handle screen rotations gracefully.

2020-09-26-081034_430x888_scrot