Skip to content

Commit

Permalink
chore update doc
Browse files Browse the repository at this point in the history
  • Loading branch information
xcarpentier committed Jan 6, 2020
1 parent eb0834f commit 3c867bd
Showing 1 changed file with 27 additions and 27 deletions.
54 changes: 27 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<a href="https://www.npmjs.com/package/rn-pdf-reader-js"><img alt="npm version" src="https://badge.fury.io/js/rn-pdf-reader-js.svg"/>
<a href="http://reactnative.gallery/xcarpentier/rn-pdf-reader-js"><img src="https://img.shields.io/badge/reactnative.gallery-%F0%9F%8E%AC-green.svg"/></a>
</a>
<a href="#hire-an-expert"><img src="https://img.shields.io/badge/%F0%9F%92%AA-hire%20an%20expert-brightgreen"/></a>
</p>
<p align="center">
<a href="https://exp.host/@xcarpentier/rn-pdf-reader-example">💥 DEMO 💥</a>
Expand All @@ -20,61 +21,60 @@
## Limitations

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

[PRs are welcome...](https://github.com/xcarpentier/rn-pdf-reader-js/pulls)

## Example

```javascript
import React from 'react'
```tsx
import * as 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>
<PDFReader
source={{
uri: 'http://gahp.net/wp-content/uploads/2017/09/sample.pdf',
}}
/>
)
}
}

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
```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
noLoader?: boolean
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
}
```

## 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
- Only React-Native 0.60+ support, **Expo SDK 36**

## Features

- **For Android, use react-pdf / pdfjs in the webview**
- For iOS devices, display file directly to the WebView
- For iOS devices, display file directly to the WebView (react-native-webview)

## What rn-pdf-reader-js use?

Expand Down

0 comments on commit 3c867bd

Please sign in to comment.