react-native not rendering remote PDF in WebView with startInLoadingState={true}

Question

I recently added <ActivityIndicator> in my code so as to display the loader while the external link loads in the <WebView>.

This works fine for a lot of different links, except those with PDF, for example: http://www.pdf995.com/samples/pdf.pdf

With this, it shows the loader initially but then renders blank page. In iOS, I do see the page number when I try to scroll down. It just doesnt display the PDF contents.

If I remove startInLoadingState={true} from the <WebView>, it works fine but the loader is not displayed.

I need to get this working with the loader displayed in both - iOS and Android.

Expo Snack demo: https://snack.expo.io/rk8o0TSSE

Code:

import React from 'react';
import {
  ActivityIndicator,
  Dimensions,
  WebView
} from 'react-native';

export default class InAppBrowser extends React.Component {
  renderLoadingView() {
    const dimensions = Dimensions.get('window');
    const marginTop = dimensions.height/2 - 75;

    return (
      <ActivityIndicator
        animating = {true}
        color = '#0076BE'
        size = 'large'
        hidesWhenStopped={true}
        style={{marginTop}}
      />
    );
  }

  render() {
    const uri = 'http://www.pdf995.com/samples/pdf.pdf';

    return (
      <WebView
        renderLoading={this.renderLoadingView}
        source={{uri}}
        startInLoadingState={true}
      />
    );
  }
}

What am I missing here?

Answer 1

For now, I am going with the following workaround:

I am embedding the remote PDF URL into Google Drive viewer URL. This works fine in iOS and Android and renders the ActivityIndicator as well.

Demo snack with fix: https://snack.expo.io/H1XnDz9rN

import React from 'react';
import {
  ActivityIndicator,
  Dimensions,
  WebView
} from 'react-native';

export default class InAppBrowser extends React.Component {
  renderLoadingView() {
    const dimensions = Dimensions.get('window');
    const marginTop = dimensions.height/2 - 75;

    return (
      <ActivityIndicator
        animating = {true}
        color = '#0076BE'
        size = 'large'
        hidesWhenStopped={true}
        style={{marginTop}}
      />
    );
  }

  render() {
    let uri = 'http://www.pdf995.com/samples/pdf.pdf';

    if (/\.pdf$/.test(uri)) {
      uri = `https://drive.google.com/viewerng/viewer?embedded=true&url=${uri}`;
    }

    return (
      <WebView
        renderLoading={this.renderLoadingView}
        source={{uri}}
        startInLoadingState={true}
      />
    );
  }
}

Source: https://github.com/rumax/react-native-PDFView/issues/40#issuecomment-410298445

P.S. I will change the accepted answer if a better answer comes around.