How to set imagesMaxWidth when html string already has a width

Question

I am using react-native-render-html to transfer a string into html elements while developing React Native Apps. I received the string by RESTful APIs from backend, and there has already had width and height set in <img> tag:

<img class="aligncenter" src="https://www.allfin.com/u/cms/www/201811/13142949sf02.jpg" width="600" height="408" />

But I want the image to be resized to the largest width of the window, so I use :

imagesMaxWidth={Dimensions.get('window').width}

The whole segment is below:

  <ScrollView style={styles.content}>
    <Text style={styles.title}>{this.props.title}</Text>
    <Text>{this.props.date}</Text>
    <HTML
      html={this.props.content}
      imagesMaxWidth={Dimensions.get('window').width - 40}
    />
  </ScrollView>

But the image could not be resized to the max width of the window.

So how could I set this?

Thank you

score 3 · Answer 1 · edited Jul 10 '20 at 12:03

3

Use ignoredStyles prop to ignore width and height of the original pictures. Use ignoredStyles={['height', 'width']} to fix the issue.

edited Jul 10 '20 at 12:03

Jules Sam. Randolph

3,610
2
31
50

answered Feb 19 '20 at 12:46

Da Huo

45
1
7

Jules Sam. Randolph · Answer 2 · 2021-02-24T17:14:26.153

With the latest 5.0 pre-releases, there is a much cleaner solution. Use the brand new contentWidth prop with useWindowDimensions hook, and images will automatically scale to content width!

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 class="aligncenter" src="https://www.allfin.com/u/cms/www/201811/13142949sf02.jpg" width="600" height="408" />
`;

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,
  },
});

Result:

In addition, if you want this behavior and don't want images to be greater than, let's say, 300, you can use the new computeEmbeddedMaxWidth prop:

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

const html = `
<img class="aligncenter" src="https://www.allfin.com/u/cms/www/201811/13142949sf02.jpg" width="600" height="408" />
`;

function computeEmbeddedMaxWidth(contentWidth, tagName) {
  if (tagName === 'img') {
    return Math.min(contentWidth, 300);
  }
  return contentWidth;
}

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

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

Result:

How to set imagesMaxWidth when html string already has a width

2 Answers2