Skip to main content
Version: 7.1.0

Adding Component From Code

You can also add a component from code. Its not recommended to do this in a production environment because it can be hard to maintain.


There is mixins for the components. You can use them to add functionality to the components.

styleableComponentMixin is a mixin that adds the ability to style the component.

styleableContainerComponentMixin is a mixin that adds the ability to style the container (view group).

styleablePageMixin is a mixin that adds the ability to style the page.

import PageSampleDesign from "generated/pages/pageSample";
import FlexLayout from "@smartface/native/ui/flexlayout";
import Button from "@smartface/native/ui/button";
import { withDismissAndBackButton } from "@smartface/mixins";
import { Route, Router } from "@smartface/router";
import {
} from "@smartface/styling-context";

class StyleableButton extends styleableComponentMixin(Button) {} // For a View, styleableComponentMixin is used.
class StyleableFlexLayout extends styleableContainerComponentMixin(
) {} // For a ViewGroup, styleableContainerComponentMixin is used.

export default class Page1 extends withDismissAndBackButton(PageSampleDesign) {
myFlexLayout: StyleableFlexLayout;
myButton: StyleableButton;
constructor(private router?: Router, private route?: Route) {

createComponents() {
this.myFlexLayout = new StyleableFlexLayout();
this.addChild(this.myFlexLayout, 'myFlexLayout', '.sf-flexLayout', {
top: 20,
left: 0,
bottom: 0,
right: 0,
flexProps: {
positionType: 'RELATIVE',
flexDirection: 'COLUMN'
backgroundColor: '#FFFFFF'
this.myButton = new StyleableButton();
this.myButton.text = 'Button from code';
this.myFlexLayout.addChild(this.myButton, 'uniqueButtonID', '.sf-button');

onShow() {

onLoad() {