Generating HTML instead of a jpg or png [iOS only] #574
Description
Trying to use this library on iOS results in an odd html being generated instead of a jpg:
<!DOCTYPE html><html lang="en"><head><title data-rh="true"></title><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><style id="expo-reset">#root,body,html{height:100%}body{overflow:hidden}#root{display:flex}</style><style id="react-native-stylesheet">[stylesheet-group="0"]{}
body{margin:0;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
... etc
<div class="css-view-g5y9jx" style="flex:1;justify-content:center;align-items:center"><div dir="auto" class="css-text-146c3p1" style="font-family:BasierSquare-Regular;font-size:28px;line-height:34px;letter-spacing:-0.3px;color:rgba(255,255,255,1.00);text-align:left">Loading...</div></div><!--/$--></div></div><script src="/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=app" defer></script>
</body></html>
Sadly enough this html is empty.
The library works fine on Android.
This happens with both jpg and png as the format
It happens with both useRenderInContext missing and set to false.
Here's a usage example:
<ViewShot ref={viewShotRef} options={{ format: "jpg", quality: 0.9, useRenderInContext: false }} style={{ flex: 1}}>
<Title>ABCD</Title>
</ViewShot>
Capture happens on a no callback function that flows as follows
const handle_share = async () => {
try {
if (viewShotRef.current && viewShotRef.current.capture) {
set_show_referral(true);
// Wait for the state change to be reflected in the UI
await new Promise(resolve => setTimeout(resolve, 100));
const uri = await viewShotRef.current.capture();
set_show_referral(false);
const response = await fetch(uri);
const blob = await response.blob();
const reader = new FileReader();
const base64data = reader.result as string;
const base64 = base64data.split(',')[1];
await upload_stats_image(selected_selfie.id, base64);
};
reader.readAsDataURL(blob);
}
} catch (error) {
console.error('Error sharing:', error);
}
};