Package Exports

@tele2/react-native-pdf-wrapper

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 (@tele2/react-native-pdf-wrapper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-pdf-wrapper

Easily show PDFs in React Native.

Why?

This library was created to solve a problem of react-native-pdf which has a lot of issues with showing PDFs in iOS. Apple released PDFKit that solved all those problems but only for iOS >= 11, this library basically mimics all the file handling of react-native-pdf for iOS 10 and then show it on react-native's <WebView />, any version >= 11 will fallback to react-native-pdf.

Installation

This library requires react-native-pdf (to show PDF for iOS >= 11 and Android) and rn-fetch-blob to handle file system access.

yarn add @tele2/react-native-pdf-wrapper react-native-pdf rn-fetch-blob

You will need to link native code as well:

react-native link @tele2/react-native-pdf-wrapper # required only for iOS
react-native link react-native-pdf
react-native link rn-fetch-blob

If you have any doubts on how to install react-native-pdf or rn-fetch-blob please refer to the respective repositories.

Usage

import React, { Component } from 'react';
import PdfWrapper from '@tele2/react-native-pdf-wrapper';

class MyComponent extends Component {
  render() {
    /**
    * `source` can also be:
    * - source={require('./file.pdf')}
    * - source={{ uri: 'base64-string' }}
    */
    return (
      <PdfWrapper
        source={{
          uri: 'https://www.amsterdam.nl/publish/pages/506699/amsterdam_and_europe_historical_ties_eu2016_edition.pdf',
        }}
      />
    );
  }
}

export default MyComponent;

You can see more examples in the example app.

Props

All react-native-pdf props.

Property	Type	Required	Default value	Description
loading	component	no	`<ActivityIndicator />`	Custom component to show while it's fetching the PDF
error	component	no	`<Error retryPdf={() => {}} />`	Custom component to show when an error occurs

@tele2/react-native-pdf-wrapper