[WebView] Error trying to display PDF in web view component #1846

fjmorant · 2015-07-02T11:04:07Z

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] : CGAffineTransformInvert: singular matrix.
[85869] : CGAffineTransformInvert: singular matrix.
[85869] : CGAffineTransformInvert: singular matrix.

And I can't see it

The text was updated successfully, but these errors were encountered:

fjmorant · 2015-07-02T11:10:26Z

TEMPORARY SOLUTION:

I have modified the class RCTWebView and method initWithEventDispatcher to have something like this:

- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
{
  RCTAssertParam(eventDispatcher);

  if ((self = [super initWithFrame:CGRectZero])) {
    super.backgroundColor = [UIColor clearColor];
    _automaticallyAdjustContentInsets = YES;
    _contentInset = UIEdgeInsetsZero;
    _eventDispatcher = eventDispatcher;
    _webView = [[UIWebView alloc] initWithFrame:[[UIScreen mainScreen]bounds]];
    _webView.delegate = self;
    [self addSubview:_webView];
  }
  return self;
}

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.

adnanakbar · 2015-07-03T01:05:38Z

@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! :)

michaelfranz · 2015-07-03T08:56:14Z

Great job!

fjmorant · 2015-07-03T09:02:49Z

thx for the compliment, I was struggling with this issue too and I thought that maybe this could help to more people temporarily

nicklockwood · 2015-07-03T10:38:36Z

Hmm, the issue I have with this is that the webview may not be the full size of the screen, so using [[UIScreen mainScreen] bounds] seems questionable.

If I understand correctly, the problem is that self.bounds is {0,0,0,0} when the view is first created, and the webview doesn't like trying to display a PDF when it's size is zero. I guess the solution is either to defer setting the content until the webview has been sized correctly, or to init the webview with some temporary nonzero size, and then set it correctly later.

fjmorant · 2015-07-03T10:57:31Z

yes totally agree this is not a correct solution, we should provide the correct size of the webview.

I guess it works because somehow the value is adjusted properly later, but definitively it needs a value at the beginning

brentvatne · 2015-07-04T01:21:35Z

I agree with @nicklockwood's assessment - if you are using flex attributes, add an onLayout callback and set the state to point to the pdf in there.

booxood · 2015-07-31T13:49:36Z

Finally, how to solve?

I also meet the questions... 😂 #2188

sbdd · 2015-08-11T07:00:56Z

If this is still an issue you can just inject the html and open the file with javascript eg.

var html = '<body style="margin:0;padding:0;width:100%;height:100%;">' +
            '<div class="">Opening PDF</div>' +
            '<script type="text/javascript">window.location.href="' + this.props.url + '"</script>' +
            '</body>';
        var options = {
            automaticallyAdjustContentInsets: false,
            html: html,
            style: {
                flex: 1,
                marginTop: 55
            }
        };
        return React.createElement(WebView, options);```

julianacipa · 2015-10-09T10:01:57Z

@JavierM84 Thank you for your help Javier!

julianacipa · 2015-10-09T11:07:14Z

 <WebView
                startInLoadingState={true}
                style={styles.web}
                url={"localFile.pdf"}
                />

Removing the startInLoadingState={true} line fixes the issue. The pdf gets displayed

brentvatne · 2015-10-09T16:50:14Z

Thanks @julianacipa for the follow up!

SFantasy · 2015-12-07T07:09:02Z

@julianacipa Thank you for help 👍

alvaromb · 2016-02-09T12:03:32Z

Does this work on Android? I can show the pdf in iOS but not in Android.

tommywu23 · 2016-02-16T03:26:32Z

great job!

esthersweon · 2016-03-01T19:30:48Z

I also am not able to get this working in Android.

bomalley · 2016-03-09T18:23:34Z

I can't even get this to work on iOS. I must be missing something in the source attribute now the URL is deprecated.

<WebView source={require('./foobar.pdf')}/>

That fails with Unable to resolve module.

Can anyone point me in the right direction?

bomalley · 2016-03-10T19:15:02Z

Okay, for future generations, here's how I solved this problem:

iOS only

render: function() {
  return <WebView source={{uri: 'My.pdf'}}/>
}

The trick is that you need to include My.pdf into your project in Xcode and make sure it's added to your build target.

Just copying it into your React Native project folder wasn't enough. It had to be part of the Xcode project itself.

nicklockwood · 2016-03-10T20:11:05Z

@BOMaley the require(./foobar.pdf) version should work if the pdf file is located in the same folder as your js. It's possible I forgot to add pdf to the packager whitelist though, if so let me know and I'll fix it.

bomalley · 2016-03-10T22:57:28Z

@nicklockwood The require syntax did not work for me. It worked if I wanted to load an html file, but replace .html with .pdf and it fails.

ivesy85 · 2016-03-21T08:54:11Z

@brentvatne The only way I have been able to get this to work is using the hack method that @JavierM84 originally posted. Just wondering if you could elaborate on your solution of adding an onLayout callback. My code is like this

var React = require('react-native');

var {
    StyleSheet,
    WebView
    } = React;

var styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column'
    }
});

class ContentView extends React.Component {
    render(){
        var url = this.props.url;
        return (
            <WebView
                ref={'webView'}
                style={styles.container}
                source= {{uri: url}}
                scalesPageToFit={true}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                decelerationRate="normal"
                startInLoadingState={true}
                automaticallyAdjustContentInsets={true}
            />
        )
    }
}

module.exports = ContentView;

I know it will work if I remove startInLoadingState={true} however my pdf's are online and I need the loading spinner to show the user that it is loading.

nicklockwood · 2016-03-21T14:12:49Z

@bomalley The fix is just to add the "pdf" file extension in all the places where I added "html" and other extensions in this PR:

81fb985#commitcomment-15932047

If you want to put up a PR for that, I'll accept it.

…kwood

…kwood. GH comment: facebook#1846 (comment)

…kwood

…kwood. GH comment: facebook#1846 (comment)

Summary:The WebView component in iOS currently does not support displaying PDFs without providing a remote URI or manually including the assets in the xcodeproj itself. This is because the packager has not whitelisted the 'pdf' extension. I've gone ahead and whitelisted the 'pdf extension according to the recommendation by nicklockwood GH comment: #1846 (comment) Closes #7004 Differential Revision: D3196019 Pulled By: nicklockwood fb-gh-sync-id: 10a86a9232095f98f277506141de0b8af5b21ab4 fbshipit-source-id: 10a86a9232095f98f277506141de0b8af5b21ab4

Summary:The WebView component in iOS currently does not support displaying PDFs without providing a remote URI or manually including the assets in the xcodeproj itself. This is because the packager has not whitelisted the 'pdf' extension. I've gone ahead and whitelisted the 'pdf extension according to the recommendation by nicklockwood GH comment: facebook#1846 (comment) Closes facebook#7004 Differential Revision: D3196019 Pulled By: nicklockwood fb-gh-sync-id: 10a86a9232095f98f277506141de0b8af5b21ab4 fbshipit-source-id: 10a86a9232095f98f277506141de0b8af5b21ab4

agtb · 2017-01-19T11:34:18Z

@JavierM84 thanks, your temp fix fixed the intermittent CGAffineTransformInvert: singular matrix errors I was seeing and associated rendering fail (white screen) loading PDFs in a WebView on iOS.

Summary:The WebView component in iOS currently does not support displaying PDFs without providing a remote URI or manually including the assets in the xcodeproj itself. This is because the packager has not whitelisted the 'pdf' extension. I've gone ahead and whitelisted the 'pdf extension according to the recommendation by nicklockwood GH comment: facebook/react-native#1846 (comment) Closes facebook/react-native#7004 Differential Revision: D3196019 Pulled By: nicklockwood fb-gh-sync-id: 10a86a9232095f98f277506141de0b8af5b21ab4 fbshipit-source-id: 10a86a9232095f98f277506141de0b8af5b21ab4

andy9775 · 2017-06-08T22:16:33Z

I still seem to be getting this error in RN 0.44, although it's intermittent

stantoncbradley · 2017-06-14T00:31:11Z

for anyone looking to fix this with layoutChanged, this worked for me:

constructor() {
    super();
    this.state = {
      layoutChanged: false,
    };
  }

  renderPDF = () => (
    <WebView
      source={{ uri: this.props.navigation.state.params.url }}
    />
  )

  render() {
    return (
      <View
        style={styles.container}
        onLayout={() => this.setState({ layoutChanged: true })}
      >
        {this.state.layoutChanged ? this.renderPDF() : <View />}
      </View>
    );
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.nearWhitePrimary,
  },

Elijen · 2017-09-02T00:21:14Z

@brentvatne online PDFs not loading with startInLoadingState={true} seems to be a bug in WebView. Shouldn't this issue be re-opened?

brunoti · 2017-09-26T17:44:36Z

@Elijen

@brentvatne online PDFs not loading with startInLoadingState={true} seems to be a bug in WebView. [...]

Same here

brunoti · 2017-09-26T17:50:42Z

With startInLoadingState={true} and renderLoading={() => <Spinner />} to load an online PDF it only shows a blank screen. Removing the quoted props it works normally, but shows an annoying black screen while loading the PDF

sooyang · 2017-10-05T14:18:01Z

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 setting startInLoadingState={true}.

An example workaround for this is as follows:

class MyWeb extends Component {
  constructor() {
    super();
    this.state = {
      loaded: false,
    };
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <WebView
          source={{ uri: 'facebook.com' }}
          style={{ flex: 1 }}
          onLoadEnd={() => this.setState({ loaded: true })}
        />
        {this.state.loaded ? null : <ActivityIndicator animating size="large" style={{flex: 1}} />}
      </View>
    );
  }
}

Using state, if the page is not loaded I will display my own ActivityIndicator.
WebView have a function onLoadEnd which is called when WebView load succeeds or fails. I will use the callback to set the state loaded to true thus hiding the ActivityIndicator and display the WebView instead

brunoti · 2017-10-05T16:52:20Z

Sometimes the PDF don't open and it just shows a white screen.

Is this a react-native problem or an iOS Webview problem? Any news?

I think this issue should be reopened.

willdurand · 2017-10-18T22:47:18Z

We are experiencing the same issue as reported by @brunoti. PDFs fail to load for no obvious reason.

a2 assigned nicklockwood Jul 2, 2015

brentvatne changed the title ~~Error trying to display PDF in web view component~~ [WebView] Error trying to display PDF in web view component Jul 4, 2015

booxood mentioned this issue Aug 3, 2015

[WebView] Don't open pdf #2188

Closed

brentvatne closed this as completed Oct 9, 2015

esthersweon mentioned this issue Mar 16, 2016

Android - WebView cannot display pdf #6488

Closed

aprct pushed a commit to aprct/react-native that referenced this issue Apr 15, 2016

Whitelisted the 'pdf' extension in the packager according to @nickloc…

a6d9199

…kwood. GH comment: facebook#1846 (comment)

aprct mentioned this issue Apr 15, 2016

Whitelist the 'pdf' extension in the packager #7004

Closed

aprct pushed a commit to aprct/react-native that referenced this issue Apr 18, 2016

Whitelisted the 'pdf' extension in the packager according to @nickloc…

3fc0df3

…kwood. GH comment: facebook#1846 (comment)

agtb unassigned nicklockwood Jan 19, 2017

facebook locked as resolved and limited conversation to collaborators Jul 22, 2018

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 22, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WebView] Error trying to display PDF in web view component #1846

[WebView] Error trying to display PDF in web view component #1846

fjmorant commented Jul 2, 2015

fjmorant commented Jul 2, 2015

adnanakbar commented Jul 3, 2015

michaelfranz commented Jul 3, 2015

fjmorant commented Jul 3, 2015

nicklockwood commented Jul 3, 2015

fjmorant commented Jul 3, 2015

brentvatne commented Jul 4, 2015

booxood commented Jul 31, 2015

sbdd commented Aug 11, 2015

julianacipa commented Oct 9, 2015

julianacipa commented Oct 9, 2015

brentvatne commented Oct 9, 2015

SFantasy commented Dec 7, 2015

alvaromb commented Feb 9, 2016

tommywu23 commented Feb 16, 2016

esthersweon commented Mar 1, 2016

bomalley commented Mar 9, 2016

bomalley commented Mar 10, 2016

nicklockwood commented Mar 10, 2016

bomalley commented Mar 10, 2016

ivesy85 commented Mar 21, 2016

nicklockwood commented Mar 21, 2016

agtb commented Jan 19, 2017

andy9775 commented Jun 8, 2017

stantoncbradley commented Jun 14, 2017 •

edited

Loading

Elijen commented Sep 2, 2017

brunoti commented Sep 26, 2017 •

edited

Loading

brunoti commented Sep 26, 2017

sooyang commented Oct 5, 2017 •

edited

Loading

brunoti commented Oct 5, 2017

willdurand commented Oct 18, 2017

[WebView] Error trying to display PDF in web view component #1846

[WebView] Error trying to display PDF in web view component #1846

Comments

fjmorant commented Jul 2, 2015

fjmorant commented Jul 2, 2015

adnanakbar commented Jul 3, 2015

michaelfranz commented Jul 3, 2015

fjmorant commented Jul 3, 2015

nicklockwood commented Jul 3, 2015

fjmorant commented Jul 3, 2015

brentvatne commented Jul 4, 2015

booxood commented Jul 31, 2015

sbdd commented Aug 11, 2015

julianacipa commented Oct 9, 2015

julianacipa commented Oct 9, 2015

brentvatne commented Oct 9, 2015

SFantasy commented Dec 7, 2015

alvaromb commented Feb 9, 2016

tommywu23 commented Feb 16, 2016

esthersweon commented Mar 1, 2016

bomalley commented Mar 9, 2016

bomalley commented Mar 10, 2016

nicklockwood commented Mar 10, 2016

bomalley commented Mar 10, 2016

ivesy85 commented Mar 21, 2016

nicklockwood commented Mar 21, 2016

agtb commented Jan 19, 2017

andy9775 commented Jun 8, 2017

stantoncbradley commented Jun 14, 2017 • edited Loading

Elijen commented Sep 2, 2017

brunoti commented Sep 26, 2017 • edited Loading

brunoti commented Sep 26, 2017

sooyang commented Oct 5, 2017 • edited Loading

brunoti commented Oct 5, 2017

willdurand commented Oct 18, 2017

stantoncbradley commented Jun 14, 2017 •

edited

Loading

brunoti commented Sep 26, 2017 •

edited

Loading

sooyang commented Oct 5, 2017 •

edited

Loading