https://github.com/xcarpentier/rn-pdf-reader-js

📄 PDF reader in JavaScript only for Expo - Android & iOS capable
https://github.com/xcarpentier/rn-pdf-reader-js

expo pdf-reader pdf-viewer pdfjs react-native react-pdf

Last synced: about 5 hours ago
JSON representation

📄 PDF reader in JavaScript only for Expo - Android & iOS capable

• Host: GitHub
• URL: https://github.com/xcarpentier/rn-pdf-reader-js
• Owner: xcarpentier
• License: mit
• Created: 2018-03-27T08:56:51.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-07-15T08:09:40.000Z (5 months ago)
• Last Synced: 2024-10-15T00:32:16.210Z (2 months ago)
• Topics: expo, pdf-reader, pdf-viewer, pdfjs, react-native, react-pdf
• Language: TypeScript
• Homepage:
• Size: 7.11 MB
• Stars: 388
• Watchers: 6
• Forks: 164
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
PDF Reader

Android support 🚀




   

   


   


   


   


   

   

  



  



# 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...](https://github.com/xcarpentier/rn-pdf-reader-js/pulls)

## Example

```tsx

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 (

      

    )

  }

}

```

See more detailed example into `App.tsx` file.

## Props

```tsx

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

- [Why the component doesn't render PDF?](https://github.com/xcarpentier/rn-pdf-reader-js/issues/15#issuecomment-397306743)

## Hire an expert!

Looking for a ReactNative freelance expert with more than 12 years experience? Contact me from my [website](https://xaviercarpentier.com)!