Masking TextBox

In order to mask your TextBoxes, you can benefit from vanilla-masker, a pure javascript string masking tool. It can be easily added to your project as a node module.

The main idea is to get the whole text inside onTextChanged event and reassign with the masked text.

info

You do not have to use vanilla-masker for this purpose. Any masking library of self-made solutions are okay. Keep the size of the npm package in mind.

Installation

Go here and follow the instructions to install the library with NPM.

• Open Terminal in the workspace and run the following command

(cd scripts && yarn add vanilla-masker)
# If you also want to have types:
yarn add @types/vanilla-masker

Example:

Typescript

import Page1Design from "generated/pages/page2";
import Color from "@smartface/native/ui/color";
import TextBox from "@smartface/native/ui/textbox";
import FlexLayout from "@smartface/native/ui/flexlayout";
import VMasker from "vanilla-masker";
import KeyboardType from "@smartface/native/ui/keyboardtype";
import Application from "@smartface/native/application";
import { Route, Router } from "@smartface/router";
import { styleableComponentMixin } from "@smartface/styling-context";

class StyleableTextBox extends styleableComponentMixin(TextBox) {}

export default class Page1 extends Page1Design {
  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  initTextBox() {
    const maskedTextBox = new StyleableTextBox({
      left: 0,
      top: 0,
      height: 75,
      width: 200,
      positionType: FlexLayout.PositionType.ABSOLUTE,
      backgroundColor: Color.create("#9bc1ff"),
      keyboardType: KeyboardType.NUMBER,
    });
    maskedTextBox.onTextChanged = (e) => {
      const maskedText = VMasker.toPattern(
        maskedTextBox.text,
        "(99) 9999-9999"
      );
      maskedTextBox.text = maskedText;
    };
    this.addChild(maskedTextBox, "maskedTextBox");
  }

  onShow() {
    super.onShow();
    this.headerBar.visible = false;
    Application.statusBar.visible = false;
  }

  onLoad() {
    super.onLoad();
    this.initTextBox();
  }
}