Skip to content

astrails/react-native-quick-look

 
 

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.

About

React Native Component for iOS QuickLook Framework.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Objective-C 57.6%
  • JavaScript 16.2%
  • Python 12.6%
  • Java 9.4%
  • Ruby 4.2%