Skip to content

πŸ“„ PDF reader in JavaScript only for Expo - Android & iOS capable

License

Notifications You must be signed in to change notification settings

xcarpentier/rn-pdf-reader-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

4e1ed07 Β· Jan 6, 2020
Oct 24, 2019
Jan 6, 2020
Jan 6, 2020
Jan 6, 2020
Jan 6, 2020
Jan 6, 2020
Jan 6, 2020
Jan 6, 2020
Jan 6, 2020
Mar 27, 2018
Jan 6, 2020
Jan 6, 2020
Jan 6, 2020
Jan 6, 2020
Jan 6, 2020
Jan 6, 2020
Jan 6, 2020
Jan 6, 2020

Repository files navigation

PDF reader for Expo

Android support πŸš€





npm version

πŸ’₯ DEMO πŸ’₯

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

Limitations

  • Display file only on full screen.

PRs are welcome...

Example

import * as React from 'react'
import { StyleSheet, View } from 'react-native'
import PDFReader from 'rn-pdf-reader-js'
import Constants from 'expo-constants'

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
}

Requirements

  • Use it into Expo app (from expo client, Standalone app or ExpoKit app).
  • Only React-Native 0.60+ support, Expo SDK 36

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

Hire an expert!

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