Skip to content

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

License

Notifications You must be signed in to change notification settings

leoalho/rn-pdf-reader-js

This branch is 9 commits ahead of xcarpentier/rn-pdf-reader-js:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

a81052b Β· Jul 19, 2024
Jan 7, 2020
Jul 19, 2024
May 21, 2020
Jul 19, 2024
Jul 14, 2024
Jul 14, 2024
Jan 6, 2020
Jan 6, 2020
Jul 14, 2020
Jan 8, 2020
Mar 27, 2018
Jul 14, 2024
Jan 6, 2020
Jan 6, 2020
Jan 6, 2020
Jul 19, 2024
May 22, 2020
Jan 6, 2020
Jan 7, 2020

Repository files navigation

PDF Reader

Android support πŸš€

This is a fork of rn-pdf-reader-js with mainly UI changes compared to the original.

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.59-0.60+ support, Expo SDK 33-36+

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',
        }}
      />
    )
  }
}

See more detailed example into App.tsx file.

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
  webviewProps?: WebView['props']
  noLoader?: boolean
  useGoogleReader?: boolean // If you are not worried about confidentiality
  withScroll?: boolean // Can cause performance issue
  withPinchZoom?: boolean
  customStyle?: {
    readerContainer?: CSS.Properties
    readerContainerDocument?: CSS.Properties
    readerContainerNumbers?: CSS.Properties
    readerContainerNumbersContent?: CSS.Properties
    readerContainerZoomContainer?: CSS.Properties
    readerContainerZoomContainerButton?: CSS.Properties
    readerContainerNavigate?: CSS.Properties
    readerContainerNavigateArrow?: CSS.Properties
  }
  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
}

Possibilities

Render type Platform Source prop
Custom PDF reader Android uri or base64
Direct from WebView iOS uri or base64
Google PDF Reader Android, iOS uri

What rn-pdf-reader-js use?

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

FAQ

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 61.2%
  • HTML 36.6%
  • Less 1.2%
  • JavaScript 1.0%