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

1.0.0 • Public • Published

PDF Reader

Project forked from xcarpentier rn-pdf-reader-js to support recent dependencies

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-44+

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!

Package Sidebar

Install

npm i rn-pdf-reader-js-improved

Weekly Downloads

40

Version

1.0.0

License

MIT

Unpacked Size

120 kB

Total Files

15

Last publish

Collaborators

  • renishv8