Improve auto height bridge logic and update dependencies

Refactored the autoHeightBridge to enhance content detection and height measurement, including more robust handling of renderable content and element height calculation. Updated dependencies in example/package.json to latest patch versions for expo, react, react-dom, and dev tools. These changes improve reliability and maintain compatibility with the latest ecosystem updates.

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"
   }
 }

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) {