Merge pull request #1 from mCodex/fix/emptyHTMLTagsCleanup

Fix/empty html tags cleanup

Author: mCodex

example/package.json

@@ -10,18 +10,18 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "~6.1.2",
-    "expo": "~54.0.21",
+    "expo": "~54.0.23",
     "expo-status-bar": "~3.0.8",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
     "react-native": "0.81.5",
     "react-native-safe-area-context": "^5.6.2",
     "react-native-web": "~0.21.2",
     "react-native-webview": "^13.16.0"
   },
   "private": true,
   "devDependencies": {
-    "react-native-builder-bob": "^0.40.14",
+    "react-native-builder-bob": "^0.40.15",
     "react-native-monorepo-config": "^0.3.0"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-sized-webview",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "React Native WebView that auto-sizes to match its HTML content—whether you load local HTML or full external websites—without manual measurements, timers, or layout flicker.",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",

src/constants/autoHeightBridge.ts

@@ -57,7 +57,6 @@ export const AUTO_HEIGHT_BRIDGE = `(() => {
     microtask: false,
     pendingLoads: 0,
     lastHeight: 0,
-    lastCssHeight: 0,
     anomalyCount: 0,
     fallbackTimer: null,
     fallbackDelay: INITIAL_FALLBACK_MS,
@@ -173,13 +172,62 @@ export const AUTO_HEIGHT_BRIDGE = `(() => {
     return id;
   };
 
+  var RENDERABLE_MEDIA_TAGS = {
+    IMG: true,
+    IFRAME: true,
+    VIDEO: true,
+    SVG: true,
+    CANVAS: true,
+    PICTURE: true,
+    OBJECT: true,
+    EMBED: true,
+    AUDIO: true,
+  };
+
+  var hasRenderableContent = function (node) {
+    if (!node || !node.childNodes || !node.childNodes.length) {
+      return false;
+    }
+
+    var child = node.firstChild;
+    while (child) {
+      if (child.nodeType === 3) {
+        if (child.textContent && child.textContent.trim()) {
+          return true;
+        }
+      } else if (child.nodeType === 1) {
+        var tag = (child.tagName || '').toUpperCase();
+        if (tag === 'BR') {
+          child = child.nextSibling;
+          continue;
+        }
+
+        if (RENDERABLE_MEDIA_TAGS[tag]) {
+          return true;
+        }
+
+        if (hasRenderableContent(child)) {
+          return true;
+        }
+      }
+
+      child = child.nextSibling;
+    }
+
+    return false;
+  };
+
   var pruneTrailingNodes = function (container) {
     if (!container) {
       return;
     }
 
     var isWhitespaceText = function (node) {
-      return node && node.nodeType === 3 && (!node.textContent || !node.textContent.trim());
+      return (
+        node &&
+        node.nodeType === 3 &&
+        (!node.textContent || !node.textContent.trim())
+      );
     };
 
     var isTrimmableElement = function (node) {
@@ -193,7 +241,7 @@ export const AUTO_HEIGHT_BRIDGE = `(() => {
       }
 
       if (tag === 'P') {
-        return !node.textContent || !node.textContent.trim();
+        return !hasRenderableContent(node);
       }
 
       return false;
@@ -231,75 +279,77 @@ export const AUTO_HEIGHT_BRIDGE = `(() => {
     }
   };
 
-  var readRectHeight = function (element) {
-    if (!element || typeof element.getBoundingClientRect !== 'function') {
+  var readElementHeight = function (element) {
+    if (!element) {
       return 0;
     }
 
-    var rect = element.getBoundingClientRect();
-    return typeof rect.height === 'number' ? rect.height : 0;
-  };
-
-  var readMaxValue = function (values) {
-    var max = 0;
-
-    for (var index = 0; index < values.length; index += 1) {
-      var value = values[index];
-      if (typeof value === 'number' && value > max) {
-        max = value;
-      }
+    var rectHeight = 0;
+    if (typeof element.getBoundingClientRect === 'function') {
+      var rect = element.getBoundingClientRect();
+      rectHeight = rect && typeof rect.height === 'number' ? rect.height : 0;
     }
 
-    return max;
+    return Math.max(
+      0,
+      rectHeight,
+      element.scrollHeight || 0,
+      element.offsetHeight || 0,
+      element.clientHeight || 0
+    );
   };
 
   var measureHeight = function () {
     var html = document.documentElement;
     var body = document.body;
     var wrapper = ensureWrapper();
+    var scrollingElement = document.scrollingElement;
 
     pruneTrailingNodes(wrapper);
 
-    var values = [];
+    var targets = [];
 
-    var collect = function (element) {
-      if (!element) {
-        return;
-      }
+    if (wrapper) {
+      targets.push(wrapper);
+    }
 
-      values.push(
-        readRectHeight(element),
-        element.scrollHeight || 0,
-        element.offsetHeight || 0,
-        element.clientHeight || 0
-      );
-    };
+    if (body && targets.indexOf(body) === -1) {
+      targets.push(body);
+    }
 
-    if (wrapper) {
-      collect(wrapper);
-    } else {
-      if (body) {
-        collect(body);
-      }
-      if (html && html !== body) {
-        collect(html);
-      }
+    if (html && targets.indexOf(html) === -1) {
+      targets.push(html);
+    }
+
+    if (
+      scrollingElement &&
+      scrollingElement !== body &&
+      scrollingElement !== html &&
+      targets.indexOf(scrollingElement) === -1
+    ) {
+      targets.push(scrollingElement);
     }
 
-    if (!values.length) {
+    if (!targets.length) {
       return 0;
     }
 
-    return Math.max(0, Math.ceil(readMaxValue(values)));
+    var maxHeight = 0;
+    for (var index = 0; index < targets.length; index += 1) {
+      var value = readElementHeight(targets[index]);
+      if (value > maxHeight) {
+        maxHeight = value;
+      }
+    }
+
+    return Math.max(0, Math.ceil(maxHeight));
   };
 
   var postHeight = function (height) {
     if (!height || height <= 0) {
       return;
     }
 
-    state.lastCssHeight = height;
-
     var sanitized = Math.ceil(height);
 
     if (!isFinite(sanitized) || sanitized <= 0) {