Android support 🚀

npm version

💥 DEMO 💥

• Display file only on full screen.
• Embeded images binary are not display (yet) in Android

PRs are welcome...

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

• 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

• 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

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

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

• Why the component doesn't render PDF?

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