Skip to content

redbooth/react-native-quick-look

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-quick-look

License npm version

About

To show file previews on iOS, you can use the QuickLook Framework. Apple introduced a specialized view presented by QuickLook Preview Controller. However, this view is not available to be instantiated and presented directly (well, at least in a straight forward way).

However, you can access the view encapsulated by the QuickLook Preview Controller, and add it as a subview for any other instance of NSView. To make QuickLookView available on React Native, we instantiated the QuickLook Preview Controller, then customized and returned the view inside the controller.

NOTE: QuickLook Framework is only available on iOS.

Installation

iOS

  1. npm install react-native-quick-look --save
  2. In the Xcode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to "Your Project Name"
  3. Go to node_modulesreact-native-quick-lookiOS ➜ select ReactNativeQuickLook.xcodeproj
  4. In the Xcode Project Navigator, click the root project, and in General tab, look for Linked Frameworks and Libraries. Click on the + button at the bottom and add libReactNativeQuickLook.a and QuickLook.framework from the list.

Android

​ Not available

Usage

iOS

// style it like any other View
// url is the url of the file you want to preview
<QuickLook style={{ flex: 1 }} url={ url } />
// or 
// provide the filename of the asset included with the app
<QuickLook style={{ flex: 1 }} assetFileName={ 'demo.pdf' } />

Android

​ Not available

Running the Example App

  1. Clone/download the repo
  2. Run npm install from the Example folder
  3. Open Example.xcodeproj and run the app from Xcode

Screenshot

Screenshot

License

react-native-quick-look is available under the MIT license. See the LICENSE file for more info.