Quicklook

API Reference: UI.QuickLook

Quick Look lets users preview Keynote, Numbers, Pages, and PDF documents, as well as images and other types of files, even if your app doesn't support these file formats.

caution

This class works only for iOS.

For further information please refer to the following guide: https://developer.apple.com/ios/human-interface-guidelines/features/quick-look/

note

The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics

import PageSampleDesign from "generated/pages/pageSample";
import { Route, Router } from "@smartface/router";
import { styleableComponentMixin } from '@smartface/styling-context'; 
import Button from "@smartface/native/ui/button";
import System from "@smartface/native/device/system";
import QuickLook from "@smartface/native/ui/quicklook";
import Color from "@smartface/native/ui/color";

class StyleableButton extends styleableComponentMixin(Button) {}

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
    button: Button;
    quickLook: QuickLook;

  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  // The page design has been made from the code for better
  // showcase purposes. As a best practice, remove this and
  // use WYSIWYG editor to style your pages.
  centerizeTheChildrenLayout() {
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            flexProps: {
              flexDirection: 'ROW',
              justifyContent: 'CENTER',
              alignItems: 'CENTER'
            }
        }
    })
  }

  onShow() {
    super.onShow();
    const { headerBar } = this;
  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();

    this.button = new StyleableButton({
        text: "QuickLook",
        onPress: (): void => {
          if (System.OS == "iOS") {
            this.quickLook = new QuickLook();
            // let pdf = "assets://smartfaceuniversity.pdf";
            let image = "images://smartface.png";
            this.quickLook.document = [image];
            this.quickLook.titleColor = Color.DARKGRAY;
            this.quickLook.itemColor = Color.create("#00A1F1");
    
            this.quickLook.show(this);
          }
        },
      });
    
      this.addChild(this.button, "button", ".sf-button", {
        height: 50,
        width: 100,
      });
  }
}

Important:

For Images; if you have multiple sizes of image resource (e.g smartface@2x.png, smartface@3x.png); you should give exact path of an image file.
QuickLook object can't get device type's appropriate resource file automatically.