Skip to content

Fix for missing images in web screenshots - CORS handling and rendering delay #565

Open
@NovaBG03

Description

@NovaBG03

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

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions