Skip to content

📄PDF reader in JavaScript only for Expo - Android capable

License

Notifications You must be signed in to change notification settings

Ablestor/rn-pdf-reader-js

 
 

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.
  • Embeded images binary are not display (yet) in Android

PRs are welcome...

Example

import 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 (
      <View style={styles.container}>
        <PDFReader
          source={{
            uri: 'http://gahp.net/wp-content/uploads/2017/09/sample.pdf',
          }}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
})

Props

  • source: Object
    • uri?: string - can be local or served on the web (ie. start withs 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 soemthing like this: data:application/pdf;base64,JVBERi0xL...
  • style: object - style props to override default container style
  • webviewStyle: object - style props to override default WebView style
  • onLoad: func - callback that runs after WebView is loaded
  • noLoader: boolean - show/hide the ActivityIndicator. Default is false

Requirements

  • Use it into Expo app (from expo client, Standalone app or ExpoKit app).
  • Because we need to have access to Expo.FileSystem
  • Only React-Native 0.54+ support, Expo SDK 27

Features

  • For Android, use react-pdf / pdfjs in the webview
  • For iOS devices, display file directly to the WebView

What rn-pdf-reader-js use?

  • react-pdf (pdf.js)
  • WebView
  • Expo FileSystem API
  • Base64

FAQ

Hire an expert!

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

About

📄PDF reader in JavaScript only for Expo - Android capable

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 80.0%
  • JavaScript 17.4%
  • Less 2.6%