React Native WebView for Android not displaying PDF and Word files

Hasan Rıza Uzuner picture Hasan Rıza Uzuner · Sep 29, 2019 · Viewed 7k times · Source

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.

Answer

aytek picture aytek · Sep 29, 2019

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.