Search code examples
react-nativewebviewreact-native-webview

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.


Solution

  • 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.