ActivityIndicator

API Reference: UI.ActivityIndicator

Activity Indicator is a control that can be used to display progress of a task or a process.

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 ActivityIndicator from "@smartface/native/ui/activityindicator";
import Application from "@smartface/native/application";
import System from "@smartface/native/device/system";
import { withDismissAndBackButton } from "@smartface/mixins";
import { styleableComponentMixin } from "@smartface/styling-context";
import { Router, Route } from "@smartface/router";

class StyleableActivityIndicator extends styleableComponentMixin(ActivityIndicator) {}

export default class ActivityIndicatorSample extends withDismissAndBackButton(PageSampleDesign) {
  myActivityIndicator: StyleableActivityIndicator;

  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() {
    const { headerBar } = System.OS === System.OSType.ANDROID ? this : this.parentController;
    super.onShow();
    Application.statusBar.visible = false;
    headerBar.visible = false;
  }

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

    this.myActivityIndicator = new StyleableActivityIndicator();
  
    //@ts-ignore
    this.myActivityIndicator.ios.activityIndicatorViewStyle =
      ActivityIndicator.iOS.ActivityIndicatorViewStyle.LARGE;
  
    this.addChild(
      this.myActivityIndicator,
      "myActivityIndicator",
      ".sf-activityIndicator",
      {
        color: "#00A1F1",
      }
    );
  }
}

(iOS)

If user uses Activity Indicator in any ListView's cell object, it's animation can stop when cell become invisible after scrolling. User needs reload activity indicator object each "onRowBind" callback of ListView.