Package Exports

@hashiprobr/expo-pdf-reader
@hashiprobr/expo-pdf-reader/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@hashiprobr/expo-pdf-reader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

expo-pdf-reader

A wrapper around Xavier Carpentier's rn-pdf-reader-js that gracefully degrades in the web

Simply import PDFReader from '@hashiprobr/expo-pdf-reader' instead of 'rn-pdf-reader-js'. In the web, the component gracefully degrades to an object that uses the browser built-in PDF viewer if available. While much more limited, this allows Expo to preview the app in a browser without errors.

This is for development purposes only. Projects that need a proper PDF viewer for the web should use better solutions like React-PDF instead.

Peer dependencies

{
    "expo": "45.0.0",
    "expo-constants": "13.1.1",
    "expo-file-system": "14.0.0",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-webview": "11.18.1",
    "rn-pdf-reader-js": "4.1.1"
}

Install

With npm:

npm install @hashiprobr/expo-pdf-reader

With yarn:

yarn add @hashiprobr/expo-pdf-reader

With expo:

expo install @hashiprobr/expo-pdf-reader

If using Expo, add the module to webpack.config.js:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: [
                '@hashiprobr/expo-pdf-reader',
            ],
        },
    }, argv);
    return config;
};

If webpack.config.js does not exist, create it with:

expo customize:web

Example

import React from 'react';

import PDFReader from '@hashiprobr/expo-pdf-reader';

export default function MyComponent(props) {
    return (
        <PDFReader source={{ uri: 'uri/to/a/pdf' }} />
    );
}