react-native: Android - WebView cannot display pdf

This is a known issue that was eventually resolved for iOS, but not Android.

I found a Stack Overflow question that offered a workaround – using a Google Drive link to display a PDF. This, however, works inconsistently (i.e. it was working a week ago, but this week it isn’t, despite the RN version not being changed - 0.20.0). Working on Mac.

The iOS is working completely fine, as expected.

<WebView 
   style={{ flex: 1, height: deviceHeight - 80 }
   ref="webViewAndroidSample"
   javaScriptEnabled={true}
   geolocationEnabled={false}
   builtInZoomControls={false}
   source={{ uri: "http://bit.ly/1Rl7Txr" }}
   scalesPageToFit={true} />

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 10
Comments: 21 (7 by maintainers)

Most upvoted comments

I found a trick that will allow us to view pdf file on webview (android) by tweaking @sathyapriya31 solutions, simply pass the url with gdoc preview. For example:

direct pdf link: https://example.com/abc.pdf
previewable link on webview: http://docs.google.com/gview?embedded=true&url=https://example.com/abc.pdf

Hope it helps

+31

khanghoang on Apr 5, 2017

@esthersweon @skyride99

var uri = {
  html:"<html> <body><h1>To Open the <a href='http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf'>PDF</a></h1></body></html>"
}

getInitialState: function() {
    return {
      url:uri
    }
}
...
<WebView
    ref={WEBVIEW_REF}
    automaticallyAdjustContentInsets={false}
    source={{uri: this.state.url}}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    decelerationRate="normal"
    onNavigationStateChange={this.onNavigationStateChange}
    startInLoadingState={true}
    scalesPageToFit={this.state.scalesPageToFit}
/>
....
   onNavigationStateChange (navState) {
          var wb_url=navState.url;
          var lastPart = wb_url.substr(wb_url.lastIndexOf('.') + 1);
          if (lastPart === "pdf") {        
            var DEFAULT_URL = {uri:'http://docs.google.com/gview?embedded=true&url='+wb_url};
            this.setState({url:DEFAULT_URL})
         }         
    }

The pdf file cant be viewed using native android. So we used google docs for viewing pdf. I tried the same for viewing pdf for web view. If this sounds to be ok, we will make a pull request.

+16

sathyapriya31 on Jul 13, 2016

@geirman @mkonicek Here’s the challenge with supporting PDF display:

iOS is trivial. UIWebView will display a PDF for you. It’s just a matter of passing it a URI that points to the PDF file.

Android, however, did not support native PDF rendering until Lollipop (5.0) as far as I can determine. Since React Native support goes all the way back to Jellybean (4.1), that puts us in a gap. We would either need to add a feature that’s not supported in older versions of Android (hacky), or bundle in a 3rd party PDF renderer like android-pdfview (also hacky)

I would be more in favor of sticking with the native support in Lollipop+, but that may go against the ideals of the project team.

bomalley on Mar 28, 2016

Thanks @geirman. That was my questions on Stack Overflow. And my answer. 😉

BTW, I also submitted a Pull Request last night to the react-native-pdf-view package to make it easier to load the PDF from the asset folder on Android.

I’m tempted to submit a pull request to the core React Native repo for a cross-platform PDF viewer. I think it’s a substantial enough feature that is makes sense to be in the core. If the mods agree I’ll send it in.

bomalley on Mar 27, 2016

@khanghoang I used your workaround and it’s great but sometimes (1 in 5) the PDF does not load. Do you know of any limitations with cache or amount of times one can use the google doc viewer?

brianinator on Feb 5, 2018

@bomalley @mkonicek

Android, however, did not support native PDF rendering until Lollipop (5.0) as far as I can determine. Since React Native support goes all the way back to Jellybean (4.1), that puts us in a gap.

So wouldn’t it be a solution to stop supporting earlier versions than Lollipop (5.0)? I think even expo don’t support them, why should react native do? And I have an smartphone stucking in 4.4 wich can’t be updatet to later versions of Android… to call that smartphone running wouldn’t be true, it’s more like sneaking.

peni4142 on Jan 24, 2018

An alternative that worked for me was to use Expo’s WebBrowser to display the PDF. On Android It opens a Chrome custom tab to display the PDF, with a convenient back button to let the user go back to your app.

onLoadEnd = () => {
    if (this.isPdf(this.state.url) && Platform.OS === "android") {
      WebBrowser.openBrowserAsync(this.state.url);
    }
};

onNavigationStateChange = (navState) => {
  this.setState({
    url: navState.url
  });
};

isPdf(url) {
  return url.toLowerCase().endsWith(".pdf");
}

mbanting on Dec 18, 2017

hi guys, what if i want to view a pdf that is on the file system ? I have a url like this : “content://com.google.android.apps.docs.storage/document/acc%3D2%3Bdoc%3D148”

flieks on Aug 21, 2017

hi how to upload pdf & word files by my users , like resume upload I’m using android web view

please help me out no answers in google

immanenimohan on Nov 4, 2016