Gif on Launch Screen

This document guides you on how to play a gif on the launch screen of your app.

Before start:

1. Add a new LaunchImage with a solid color that matches the background color of your gif.
2. Add your gif to the /assets folder.

caution

If your LaunchImage contains an image, bevare that your LaunchImage position may be different from the position of your gif cause of the 9-patch.

Example

The principle is, firstly you see the LaunchImage with empty solid color, and then the first page is loaded with Dialog (with your GifView component inside of it) then pushes to your main page after 5 seconds.

DialogGifImageView

import PgSplashGifDesign from "generated/pages/pgSplashGif";
import { withDismissAndBackButton } from "@smartface/mixins";
import { Router, Route } from "@smartface/router";
import { styleableComponentMixin } from "@smartface/styling-context";
import Dialog from "@smartface/native/ui/dialog";
import GifImage from "@smartface/native/ui/gifimage";
import GifImageView from "@smartface/native/ui/gifimageview";
import FlexLayout from "@smartface/native/ui/flexlayout";
import Screen from "@smartface/native/device/screen";
import Color from "@smartface/native/ui/color";

class StyleableGifImageView extends styleableComponentMixin(GifImageView) {}

export default class PgSplashGif extends withDismissAndBackButton(PgSplashGifDesign) {
  myDialog: Dialog;
  myGifImage: GifImage;
  myGifImageView: StyleableGifImageView;
  constructor(private router?: Router, private route?: Route) {
    super({});
  }
  initDialog(){
    this.myDialog = new Dialog({
      android: {
        themeStyle: Dialog.Android.Style.ThemeNoHeaderBar,
      },
    });
    this.myDialog.layout.alignItems = FlexLayout.AlignItems.CENTER;
    this.myDialog.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
    this.myDialog.layout.backgroundColor = Color.create("#00a1f1");
    this.myGifImage = GifImage.createFromFile("assets://smartface_splash.gif");
    this.myGifImageView = new StyleableGifImageView({
      gifImage: this.myGifImage,
    });
    this.myDialog.layout.addChild(this.myGifImageView);
  }
  /**
   * @event onShow
   * This event is called when the page appears on the screen (everytime).
   */
  onShow() {
    super.onShow();
    this.initBackButton(this.router); //Addes a back button to the page headerbar.
    this.myDialog.show();
    setTimeout(() => {
      this.myDialog.hide();
      this.router.push("/root/btb/tab2/PgListViewIndex");
    }, 5000);
  }

  /**
   * @event onLoad
   * This event is called once when the page is created.
   */
  onLoad() {
    super.onLoad();
    this.initDialog();
  }
}