rn-pdf-reader-js
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.1 • Public • Published

    PDF Reader

    Android support 🚀





    npm version npm downloads

    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+

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

    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

    Hire an expert!

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

    Install

    npm i rn-pdf-reader-js

    DownloadsWeekly Downloads

    5,086

    Version

    4.1.1

    License

    MIT

    Unpacked Size

    112 kB

    Total Files

    7

    Last publish

    Collaborators

    • xcarpentier