Merge pull request #3869 from parasharrajat/space-collapsing

[Hold] fixed spaces collapsing in Messages

package.json

@@ -87,7 +87,6 @@
     "react-native-picker-select": "8.0.4",
     "react-native-plaid-link-sdk": "^7.0.5",
     "react-native-reanimated": "^2.1.0",
-    "react-native-render-html": "^6.0.0-alpha.10",
     "react-native-safe-area-context": "^3.1.4",
     "react-native-screens": "^3.0.0",
     "react-native-svg": "^12.1.0",
@@ -153,6 +152,7 @@
     "portfinder": "^1.0.28",
     "pusher-js-mock": "^0.3.3",
     "react-hot-loader": "^4.12.21",
+    "react-native-render-html": "^6.0.0-beta.7",
     "react-native-svg-transformer": "^0.14.3",
     "react-test-renderer": "16.13.1",
     "semver": "^7.3.4",

src/components/RenderHTML/BaseRenderHTML.js

@@ -54,10 +54,14 @@ const EXTRA_FONTS = [
  *
  * @param {number} contentWidth - The content width provided to the HTML
  * component.
+ * @param {number} tagName - tagname of the Element whose maxWidth needs to be set
  * @returns {number} The minimum between contentWidth and MAX_IMG_DIMENSIONS
  */
-function computeImagesMaxWidth(contentWidth) {
-    return Math.min(MAX_IMG_DIMENSIONS, contentWidth);
+function computeEmbeddedMaxWidth(contentWidth, tagName) {
+    if (tagName === 'img') {
+        return Math.min(MAX_IMG_DIMENSIONS, contentWidth);
+    }
+    return contentWidth;
 }
 
 function AnchorRenderer({tnode, key, style}) {
@@ -218,13 +222,18 @@ const BaseRenderHTML = ({html, debug, textSelectable}) => {
             tagsStyles={webViewStyles.tagStyles}
             enableCSSInlineProcessing={false}
             contentWidth={containerWidth}
-            computeImagesMaxWidth={computeImagesMaxWidth}
+            computeEmbeddedMaxWidth={computeEmbeddedMaxWidth}
             systemFonts={EXTRA_FONTS}
-            imagesInitialDimensions={{
-                width: MAX_IMG_DIMENSIONS,
-                height: MAX_IMG_DIMENSIONS,
+            dangerouslyDisableWhitespaceCollapsing
+            renderersProps={{
+                img: {
+                    initialDimensions: {
+                        width: MAX_IMG_DIMENSIONS,
+                        height: MAX_IMG_DIMENSIONS,
+                    },
+                },
             }}
-            html={html}
+            source={{html}}
             debug={debug}
         />
     );