Skip to main content
Version: 7.3.0

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.


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.


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


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) {

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(
"(99) 9999-9999"
maskedTextBox.text = maskedText;
this.addChild(maskedTextBox, "maskedTextBox");

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

onLoad() {