Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

imagesMaxWidth not working #412

Closed
KimJeonghun91 opened this issue Sep 25, 2020 · 4 comments
Closed

imagesMaxWidth not working #412

KimJeonghun91 opened this issue Sep 25, 2020 · 4 comments
Labels
bug Crush'em all.

Comments

@KimJeonghun91
Copy link

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
@KimJeonghun91 KimJeonghun91 added the bug Crush'em all. label Sep 25, 2020
@jsamr
Copy link
Collaborator

jsamr commented Sep 25, 2020

@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?

@KimJeonghun91
Copy link
Author

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

jsamr added a commit that referenced this issue Sep 26, 2020
@jsamr
feat: a revamped scalable HTMLImage component
751c886 
BREAKING: imagesMaxWidth prop is discontinued in favor of contentWidth and
computeImagesMaxWidth. See RFC001 for an exhaustive description.

This patch offers a rewrite of the HTMLImage component to get a close
match with RFC001, “a deterministic approach to images scaling”. The only
part of this RFC which is unsupported is the unitConverter behavior, which
is planned for a later major release.

In addition to the capabilities defined in the RFC, this patch provides
the following features and behaviors:

- new property enableExperimentalPercentWidth. It allows percent width
  for <img> tags, computed relatively to contentWidth.
- take margins into account when scaling down images;
- support for overriding image styles, including resizeMode;
- support for minWidth, minHeight, maxWidth, maxHeight styles.

This patch also fixes #141, #172 and provides the features offered in
PR #242 and #315.

OPTIMIZATIONS: The imageBoxDimensions are computed when required. In
addition, requirements are also recomputed when necessary, preventing
expensive operations from happening too often. Also, because we need to
flatten the style prop to infer requirements, this flatten value is now
cached and re-evaluated when appropriate. Finally, styles have been
moved to a stylesheet when that is possible, to avoid commiting updates
to the native side. Note that these performance optimizations are made
possible by the high coverage rate of the HTMLImage component.

fixes #141
fixes #172
updates #412 (could fix)
closes #315
closes #242
jsamr added a commit that referenced this issue Sep 26, 2020
@jsamr
feat: a revamped scalable HTMLImage component
2060a9c 
BREAKING: imagesMaxWidth prop is discontinued in favor of contentWidth and
computeImagesMaxWidth. See RFC001 for an exhaustive description.

This patch offers a rewrite of the HTMLImage component to get a close
match with RFC001, “a deterministic approach to images scaling”. The only
part of this RFC which is unsupported is the unitConverter behavior, which
is planned for a later major release.

In addition to the capabilities defined in the RFC, this patch provides
the following features and behaviors:

- new property enableExperimentalPercentWidth. It allows percent width
  for <img> tags, computed relatively to contentWidth.
- take margins into account when scaling down images;
- support for overriding image styles, including resizeMode;
- support for minWidth, minHeight, maxWidth, maxHeight styles.

This patch also fixes #141, #172 and provides the features offered in
PR #242 and #315.

OPTIMIZATIONS: The imageBoxDimensions are computed when required. In
addition, requirements are also recomputed when necessary, preventing
expensive operations from happening too often. Also, because we need to
flatten the style prop to infer requirements, this flatten value is now
cached and re-evaluated when appropriate. Finally, styles have been
moved to a stylesheet when that is possible, to avoid commiting updates
to the native side. Note that these performance optimizations are made
possible by the high coverage rate of the HTMLImage component.

fixes #141
fixes #172
updates #412 (could fix)
closes #315
closes #242
@jsamr
Copy link
Collaborator

jsamr commented Sep 26, 2020

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

@jsamr
Copy link
Collaborator

jsamr commented Sep 26, 2020 •
edited
Loading

@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

I'm closing now, but feel free to respond and / or add feedback.

@jsamr jsamr closed this as completed Sep 26, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Crush'em all.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jsamr @KimJeonghun91