react-native: [WebView] Error trying to display PDF in web view component
Hello,
I am trying to display a pdf file from the app bundle but I could not do it, this is what I have done:
<WebView
startInLoadingState={true}
style={styles.web}
url={"localFile.pdf"}
/>
localFile.pdf is obviously included in the bundle but when I try to display this webview it doesn’t show it properly.
From xcode I have got these error messages:
[85869:8794860] DiskImageCache: Could not resolve the absolute path of the old directory. [85869] <Error>: CGAffineTransformInvert: singular matrix. [85869] <Error>: CGAffineTransformInvert: singular matrix. [85869] <Error>: CGAffineTransformInvert: singular matrix.
And I can’t see it
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Comments: 31 (6 by maintainers)
Commits related to this issue
- Whitelisted the 'pdf' extension in the packager according to @nicklockwood. GH comment: https://github.com/facebook/react-native/issues/1846#issuecomment-199302488 — committed to aprct/react-native by deleted user 8 years ago
- Whitelisted the 'pdf' extension in the packager according to @nicklockwood. GH comment: https://github.com/facebook/react-native/issues/1846#issuecomment-199302488 — committed to aprct/react-native by deleted user 8 years ago
- Whitelist the 'pdf' extension in the packager Summary:The WebView component in iOS currently does not support displaying PDFs without providing a remote URI or manually including the assets in the xc... — committed to facebook/react-native by lelandrichardson 8 years ago
- Whitelist the 'pdf' extension in the packager Summary:The WebView component in iOS currently does not support displaying PDFs without providing a remote URI or manually including the assets in the xc... — committed to ptmt/react-native by lelandrichardson 8 years ago
- Whitelist the 'pdf' extension in the packager Summary:The WebView component in iOS currently does not support displaying PDFs without providing a remote URI or manually including the assets in the xc... — committed to nightingale/react-native by lelandrichardson 8 years ago
- Whitelist the 'pdf' extension in the packager Summary:The WebView component in iOS currently does not support displaying PDFs without providing a remote URI or manually including the assets in the xc... — committed to iodine/react-native by lelandrichardson 8 years ago
- Whitelist the 'pdf' extension in the packager Summary:The WebView component in iOS currently does not support displaying PDFs without providing a remote URI or manually including the assets in the xc... — committed to facebook/metro by lelandrichardson 8 years ago
Removing the
startInLoadingState={true}
line fixes the issue. The pdf gets displayedTEMPORARY SOLUTION:
I have modified the class RCTWebView and method initWithEventDispatcher to have something like this:
the key to solve the problem it has been the line:
_webView = [[UIWebView alloc] initWithFrame:[[UIScreen mainScreen]bounds]];
previously it was something like this:
_webView = [[UIWebView alloc] initWithFrame:self.bounds];
I guess there is some issue getting the bounds of the webview, that’s why I have specified the main screen bounds.
I need to render a pdf online which is why
startInLoadingState={true}
to be helpful to indicate that the page is loading to users. But I came across the same issue that the pdf does not render after settingstartInLoadingState={true}
.An example workaround for this is as follows:
Using
state
, if the page is not loaded I will display my ownActivityIndicator
.WebView
have a functiononLoadEnd
which is called whenWebView
load succeeds or fails. I will use the callback to set the stateloaded
totrue
thus hiding theActivityIndicator
and display theWebView
instead@brentvatne online PDFs not loading with
startInLoadingState={true}
seems to be a bug inWebView
. Shouldn’t this issue be re-opened?@javierM84 you are a champion! Been struggling with this for days and today thought to put this as an issue and you already have a work around and it works! 😃