Sometimes, we want to add a PDF viewer in React Native.

In this article, we’ll look at how to add a PDF viewer in React Native.

How to add a PDF viewer in React Native?

To add a PDF viewer in React Native, we can add a WebView and use Google Drive’s PDF viewer.

For instance, we write:

import * as React from 'react';
import { View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';
import { WebView } from 'react-native-webview';

export default function App() {
  const pdfUrl = 'http://www.africau.edu/images/default/sample.pdf';

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{
          uri: `https://drive.google.com/viewerng/viewer?embedded=true&url=${pdfUrl}`,
        }}
      />
    </View>
  );
}

to add a WebView with the source set to an object with the uri set to the Google Drive PDF viewer URL.

As a result, we should see the PDF viewer rendered in the WebView.

How to add a PDF viewer in React Native?

To add a PDF viewer in React Native, we can add a WebView and use Google Drive’s PDF viewer.