diff --git a/README.md b/README.md index 120fc6083..c957cf214 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ npm version +

💥 DEMO 💥 @@ -20,14 +21,13 @@ ## 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' @@ -35,46 +35,46 @@ import Constants from 'expo-constants' export default class App extends React.Component { render() { return ( - - - + ) } } - -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?