PDF reader for Expo

Android support 🚀

💥 DEMO 💥

Read a PDF just with JS (no native libs needed)

Requirements

• 👉Install react-native-webview on your own!
• 👉Install expo-file-system on your own!
• 👉Install expo-constants on your own!
• Use it into Expo app (from expo client, Standalone app or ExpoKit app).
• Only React-Native 0.60+ support, Expo SDK 33-36+

Limitations

• Display file only on full screen.

PRs are welcome...

Example

import * as React from 'react'
import { View } from 'react-native'
import PDFReader from 'rn-pdf-reader-js'

export default class App extends React.Component {
  render() {
    return (
      <PDFReader
        source={{
          uri: 'http://gahp.net/wp-content/uploads/2017/09/sample.pdf',
        }}
      />
    )
  }
}

Props

interface Source {
  uri?: string // can be local or served on the web (ie. start with `https://` or `file://`)
  base64?: string // should start with `data:application/pdf;base64,`. A base64 encoded pdf file tends to start with `JVBERi0xL` so your complete string should look something like this: `data:application/pdf;base64,JVBERi0xL...`
  headers?: { [key: string]: string }
}

interface Props {
  source: Source
  style?: View['props']['style'] // style props to override default container style
  webviewStyle?: WebView['props']['style'] // style props to override default WebView style
  noLoader?: boolean
  onLoad?(): void // callback that runs after WebView is loaded
  onLoadEnd?(): void // callback that runs after WebView is loaded
  onError?(): void // callback that runs when WebView is on error
}

Features

• For Android, use react-pdf / pdfjs in the webview
• For iOS devices, display file directly to the WebView (react-native-webview)

What rn-pdf-reader-js use?

• react-pdf (pdf.js)
• WebView
• Base64

FAQ

• Why the component doesn't render PDF?

Hire an expert!

Looking for a ReactNative freelance expert with more than 12 years experience? Contact me from my website!