Open
Description
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch react-native-view-shot@4.0.3
for the project I'm working on.
I encountered an issue where images weren't being rendered in screenshots taken in web environments, despite the images being loaded.
The issue appears to be related to:
CORS restrictions for cross-origin images
Timing issues where html2canvas runs before images are fully rendered in the DOM
Here is the diff that solved my problem:
diff --git a/node_modules/react-native-view-shot/src/RNViewShot.web.js b/node_modules/react-native-view-shot/src/RNViewShot.web.js
index 135ec8b..f8ef919 100644
--- a/node_modules/react-native-view-shot/src/RNViewShot.web.js
+++ b/node_modules/react-native-view-shot/src/RNViewShot.web.js
@@ -7,9 +7,16 @@ async function captureRef(view, options) {
"For compatibility, it currently returns the same result as data-uri");
}
+ // Short delay to ensure initial DOM rendering
+ await new Promise(resolve => setTimeout(resolve, 200));
+
// TODO: implement snapshotContentContainer option
- const h2cOptions = {};
+ const h2cOptions = {
+ useCORS: true, // Handle cross-origin images
+ allowTaint: true // Allow cross-origin images to taint canvas
+ };
+
let renderedCanvas = await html2canvas(view, h2cOptions);
if (options.width && options.height) {
This small patch ensures that cross-origin images are properly captured and rendered in the screenshot.
Metadata
Metadata
Assignees
Labels
No labels