react-native-file-preview v1.0.1
react-native-file-preview is a simple library to preview files. It's written in native code, support iOS platform (using WKWebView).
- Features:
- iOS 9.0+, iPhone and iPad devices
- Most popular document types (xlsx, pptx, docx, images, pdf, html, etc...)
- Zoom in/out using gestures
- Support network resources (https://) and local resources (file://)
- Support large files, better performance compared to QuickLook implementation
- Support AirPrint
Usage
import FilePreview from 'react-native-file-preview';
FilePreview.showPreview("https://acdbio.com/sites/default/files/sample.ppt");
Installation
The package can be added via npm or yarn:
$ yarn add react-native-file-preview
Link the packge
$ react-native link react-native-file-preview
Post link steps
After the link you'll need two extra steps to make it working. It's simple to configure them using XCode:
Step 1. Copy the image resouces 1. Click the project name in XCode Project navigator, choose your project name in the TARGETS sestion (to the right or the Project navigator). 2. Click Build Phases, click Copy Bundle Resources. 3. Drag the RNFilePreviewBundle.bundle file (under Project Navagator - Libraries - RNFilePreview.xcodeproj) to Copy Bundle Resources.
Step 2. Add the Swift bridging header (skip this step if you already use Swift in your iOS project)
- Right click the souce code folder (the yellow folder contains AppDelegate.m) in the Project navigator (the left panel in XCode).
- Select New File, choose iOS - Source - Swift file, choose Create.
- XCode will popup a dialog asking "Would you like to configure an Objective-C bridging header?". Choose Create Bridging Header.
APIs
FilePreviewHelper.showPreview(path)
FilePreviewHelper.showPreview(path, showPrintButton)
FilePreviewHelper.showPreview(path, showPrintButton, showBlackStatusBar)
path: string
- The document file path. (https://www.exmaple.com/example.pdf, or file://FULL_LOCAL_PATH)
showPrintButton: boolean
- should the preview page show the AirPrint button
- default value is true
showBlackStatusBar: boolean
- should the preview page show the status bar in balck
- default value is true