Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
136 changes: 93 additions & 43 deletions src/constants/autoHeightBridge.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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) {
Expand All @@ -193,7 +241,7 @@ export const AUTO_HEIGHT_BRIDGE = `(() => {
}

if (tag === 'P') {
return !node.textContent || !node.textContent.trim();
return !hasRenderableContent(node);
}

return false;
Expand Down Expand Up @@ -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) {
Expand Down
Loading
Loading