Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native WebView for Android not displaying PDF and Word files

I am developing a new project about publishing Personal CV.

I need to show users' CVs in the application.

My standard WebView code is below and working well on iOS.

import * as React from 'react';
import { WebView } from 'react-native';


export default class App extends React.Component {
  render() {
    return (
      <WebView
            style={{flex: 1, backgroundColor: 'white'}}
            source={{
              uri: 'http://www.africau.edu/images/default/sample.pdf',
            }}
            bounces={true}
            useWebKit={true}
            scrollEnabled={true}
          />
    );
  }
}

This code also needs to work on Android. When I try it on Android the page shows nothing.

You can try this on Expo Snack.

like image 427
Hasan Rıza Uzuner Avatar asked Sep 29 '19 13:09

Hasan Rıza Uzuner


People also ask

How do I view PDF in Android WebView?

The very first and the easiest way of displaying the PDF file is to display it in the WebView. All you need to do is just put WebView in your layout and load the desired URL by using the webView. loadUrl() function. Now, run the application on your mobile phone and the PDF will be displayed on the screen.


1 Answers

Android Webview cannot display PDF files. There is an issue related to this problem. You can view it from this link

There are multiple solutions to your problem, you can pick the most relevant one for yourself.

1) Use react-native-pdf-view

2) Use Google Docs as a viewer. Try to load this URL in your Webview http://docs.google.com/gview?embedded=true&url=http://www.africau.edu/images/default/sample.pdf

3) Use Chrome Custom Tabs.

like image 51
aytek Avatar answered Oct 13 '22 21:10

aytek