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

Most upvoted comments

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

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

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.

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

@brentvatne online PDFs not loading with startInLoadingState={true} seems to be a bug in WebView. 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! 😃