@triniwiz/nativescript-masonkit 1.0.0-beta.6 → 1.0.0-beta.60

package/common.js

@@ -1,1027 +1,160 @@
 var _a, _b, _c;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { CssProperty, CustomLayoutView, Length as NSLength, ShorthandProperty, Style, View as NSView, getViewById, unsetValue, Property, widthProperty, heightProperty, CoreTypes, Trace, Length as CoreLength, PercentLength as CorePercentLength, marginLeftProperty, marginRightProperty, marginTopProperty, marginBottomProperty, minWidthProperty, minHeightProperty, fontSizeProperty, fontWeightProperty, fontStyleProperty, colorProperty, Color, lineHeightProperty, letterSpacingProperty, textAlignmentProperty, borderLeftWidthProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, verticalAlignmentProperty, backgroundColorProperty, textShadowProperty, } from '@nativescript/core';
-import { flexDirectionProperty, flexGrowProperty, flexWrapProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
+import { CustomLayoutView, View as NSView, getViewById, Property, widthProperty, heightProperty, Length as CoreLength, PercentLength as CorePercentLength, marginLeftProperty, marginRightProperty, marginTopProperty, marginBottomProperty, minWidthProperty, minHeightProperty, fontSizeProperty, fontWeightProperty, fontStyleProperty, colorProperty, Color, lineHeightProperty, letterSpacingProperty, textAlignmentProperty, borderLeftWidthProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, backgroundColorProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, paddingBottomProperty, zIndexProperty } from '@nativescript/core';
+import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowProperty, flexShrinkProperty, flexWrapProperty, justifyContentProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
 import { _forceStyleUpdate } from './utils';
-export const native_ = Symbol('[[native]]');
-export const style_ = Symbol('[[style]]');
-export const isTextChild_ = Symbol('[[isTextChild]]');
-export const isText_ = Symbol('[[isText]]');
-export const isMasonView_ = Symbol('[[isMasonView]]');
-export const text_ = Symbol('[[text]]');
-export const isPlaceholder_ = Symbol('[[isPlaceholder]]');
+import { alignContentProperty, aspectRatioProperty, backgroundProperty, borderProperty, borderRadiusProperty, bottomProperty, boxSizingProperty, columnGapProperty, displayProperty, filterProperty, flexBasisProperty, gridAreaProperty, gridAutoColumnsProperty, gridAutoFlowProperty, gridAutoRowsProperty, gridColumnEndProperty, gridColumnProperty, gridColumnStartProperty, gridRowEndProperty, gridRowProperty, gridRowStartProperty, gridTemplateAreasProperty, gridTemplateColumnsProperty, gridTemplateRowsProperty, justifyItemsProperty, justifySelfProperty, leftProperty, marginProperty, maxHeightProperty, maxWidthProperty, overflowXProperty, overflowYProperty, paddingProperty, positionProperty, rightProperty, rowGapProperty, scrollBarWidthProperty, textOverFlowProperty, textWrapProperty, topProperty, verticalAlignProperty, } from './properties';
+import { isMasonView_, isTextChild_, isText_, isPlaceholder_, text_, native_, textNode_, textNodeIndex_ } from './symbols';
+import { Tree } from './tree';
+import { TextNode } from './text-node';
 function getViewStyle(view) {
     const ret = (__ANDROID__ ? view.get() : view.deref());
     return ret._styleHelper;
 }
-var FrameWork;
-(function (FrameWork) {
-    FrameWork[FrameWork["Core"] = 0] = "Core";
-    FrameWork[FrameWork["Angular"] = 1] = "Angular";
-    FrameWork[FrameWork["Vue"] = 2] = "Vue";
-    FrameWork[FrameWork["React"] = 3] = "React";
-    FrameWork[FrameWork["Svelte"] = 4] = "Svelte";
-    FrameWork[FrameWork["Solid"] = 5] = "Solid";
-})(FrameWork || (FrameWork = {}));
-let frameWork = FrameWork.Core;
+let frameWork = 0 /* FrameWork.Core */;
 try {
     global.VUE3_ELEMENT_REF = require('nativescript-vue').ELEMENT_REF;
-    frameWork = FrameWork.Vue;
+    frameWork = 2 /* FrameWork.Vue */;
+}
+catch (e) { }
+try {
+    const helper = require('react-nativescript/dist/nativescript-vue-next/runtime/runtimeHelpers.js');
+    global.REACT_ELEMENT_REF = helper.ELEMENT_REF;
+    frameWork = 3 /* FrameWork.React */;
 }
 catch (e) { }
 if (global.__ngRegisteredViews || typeof Zone !== 'undefined') {
-    frameWork = FrameWork.Angular;
+    frameWork = 1 /* FrameWork.Angular */;
 }
-export const scrollBarWidthProperty = new CssProperty({
-    name: 'scrollBarWidth',
-    cssName: 'scrollbar-width',
-    defaultValue: 0,
-    valueConverter: parseFloat,
+// @ts-ignore
+export const textContentProperty = new Property({
+    name: 'textContent',
+    affectsLayout: true,
+    defaultValue: '',
 });
-function overflowConverter(value) {
-    if (typeof value === 'number') {
-        switch (value) {
-            case 0:
-                return 'visible';
-            case 1:
-                return 'clip';
-            case 2:
-                return 'hidden';
-            case 3:
-                return 'scroll';
-        }
-    }
-    switch (value) {
-        case 'visible':
-        case 'hidden':
-        case 'clip':
-        case 'scroll':
-            return value;
-        default:
-            return undefined;
-    }
-}
-function masonLengthParse(value) {
-    try {
-        return CoreLength.parse(value);
-    }
-    catch (e) {
-        return undefined;
-    }
-}
-function masonLengthPercentParse(value) {
-    try {
-        return CorePercentLength.parse(value);
-    }
-    catch (e) {
-        return undefined;
+export class ViewBase extends CustomLayoutView {
+    constructor() {
+        super();
+        this._children = [];
+        this[_a] = false;
+        this[_b] = false;
+        this[_c] = false;
+        this._pendingEventsRegistration = [];
     }
-}
-const filterProperty = new CssProperty({
-    name: 'filter',
-    cssName: 'filter',
-});
-filterProperty.register(Style);
-const borderProperty = new CssProperty({
-    name: 'border',
-    cssName: 'border',
-});
-borderProperty.register(Style);
-const backgroundProperty = new CssProperty({
-    name: 'background',
-    cssName: 'background',
-});
-backgroundProperty.register(Style);
-const overFlow = /^\s*(visible|hidden|clip|scroll|auto)(?:\s+(visible|hidden|clip|scroll|auto))?\s*$/;
-export const overflowProperty = new ShorthandProperty({
-    name: 'overflow',
-    cssName: 'overflow',
-    getter: function () {
-        if (this.overflowX === this.overflowY) {
-            return this.overflowX;
-        }
-        return `${this.overflowX} ${this.overflowY}`;
-    },
-    converter(value) {
-        const properties = [];
-        if (typeof value === 'string') {
-            const values = value.match(overFlow);
-            const length = values?.length ?? 0;
-            if (length === 0) {
-                return properties;
-            }
-            if (length === 1) {
-                const xy = values[0];
-                properties.push([overflowXProperty, xy]);
-                properties.push([overflowYProperty, xy]);
-            }
-            if (length > 1) {
-                const x = values[0];
-                const y = values[1];
-                properties.push([overflowXProperty, x]);
-                properties.push([overflowYProperty, y]);
-            }
-        }
-        return properties;
-    },
-});
-export const overflowXProperty = new CssProperty({
-    name: 'overflowX',
-    cssName: 'overflow-x',
-    defaultValue: 'visible',
-    valueConverter: overflowConverter,
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.overflowX = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                view.view.style.overflowX = oldValue;
-            }
-        }
-    },
-});
-export const overflowYProperty = new CssProperty({
-    name: 'overflowY',
-    cssName: 'overflow-y',
-    defaultValue: 'visible',
-    valueConverter: overflowConverter,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.overflowY = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                view.view.style.overflowY = oldValue;
-            }
-        }
-    },
-});
-const paddingProperty = new CssProperty({
-    name: 'padding',
-    cssName: 'padding',
-});
-paddingProperty.register(Style);
-const marginProperty = new CssProperty({
-    name: 'margin',
-    cssName: 'margin',
-});
-marginProperty.register(Style);
-export const paddingLeftProperty = new CssProperty({
-    name: 'paddingLeft',
-    cssName: 'padding-left',
-    defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
-    equalityComparer: CoreLength.equals,
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.paddingLeft = CoreLength.toDevicePixels(newValue, 0);
-        }
-        else {
-            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
-        }
-    },
-    valueConverter: masonLengthParse,
-});
-export const paddingRightProperty = new CssProperty({
-    name: 'paddingRight',
-    cssName: 'padding-right',
-    defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
-    equalityComparer: CoreLength.equals,
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.paddingRight = CoreLength.toDevicePixels(newValue, 0);
-        }
-        else {
-            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
-        }
-    },
-    valueConverter: masonLengthParse,
-});
-export const paddingTopProperty = new CssProperty({
-    name: 'paddingTop',
-    cssName: 'padding-top',
-    defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
-    equalityComparer: CoreLength.equals,
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.paddingTop = CoreLength.toDevicePixels(newValue, 0);
-        }
-        else {
-            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
-        }
-    },
-    valueConverter: masonLengthParse,
-});
-export const paddingBottomProperty = new CssProperty({
-    name: 'paddingBottom',
-    cssName: 'padding-bottom',
-    defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
-    equalityComparer: CoreLength.equals,
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.paddingBottom = CoreLength.toDevicePixels(newValue, 0);
-        }
-        else {
-            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
-        }
-    },
-    valueConverter: masonLengthParse,
-});
-export const rowGapProperty = new CssProperty({
-    name: 'rowGap',
-    cssName: 'row-gap',
-    defaultValue: 0,
-    valueConverter(value) {
-        const parsed = CoreLength.parse(value);
-        if (typeof parsed === 'string') {
-            return 0;
-        }
-        return parsed;
-    },
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.rowGap = newValue;
-        }
-    },
-});
-export const columnGapProperty = new CssProperty({
-    name: 'columnGap',
-    cssName: 'column-gap',
-    defaultValue: 0,
-    valueConverter(value) {
-        const parsed = CoreLength.parse(value);
-        if (typeof parsed === 'string') {
-            return 0;
-        }
-        return parsed;
-    },
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.columnGap = newValue;
-        }
-    },
-});
-export const gridGapProperty = new ShorthandProperty({
-    name: 'gridGap',
-    cssName: 'grid-gap',
-    getter: function () {
-        if (this.rowGap === this.columnGap) {
-            return this.rowGap;
-        }
-        return `${this.rowGap} ${this.columnGap}`;
-    },
-    converter(gap) {
-        const properties = [];
-        let value = gap;
-        if (typeof value === 'number') {
-            value = `${value}`;
-        }
-        if (typeof value === 'string') {
-            const values = value.split(/\s+/).filter((item) => item.trim().length !== 0);
-            const length = values.length;
-            if (length === 0) {
-                return properties;
-            }
-            if (length === 1) {
-                const row = values[0];
-                properties.push([rowGapProperty, row]);
-                properties.push([columnGapProperty, row]);
-            }
-            if (length > 1) {
-                const row = values[0];
-                const column = values[1];
-                properties.push([rowGapProperty, row]);
-                properties.push([columnGapProperty, column]);
-            }
-        }
-        return properties;
-    },
-});
-export const gapProperty = new ShorthandProperty({
-    name: 'gap',
-    cssName: 'gap',
-    getter: function () {
-        if (this.rowGap === this.columnGap) {
-            return this.rowGap;
-        }
-        return `${this.rowGap} ${this.columnGap}`;
-    },
-    converter(gap) {
-        const properties = [];
-        let value = gap;
-        if (typeof value === 'number') {
-            value = `${value}`;
-        }
-        if (typeof value === 'string') {
-            const values = value.split(/\s+/).filter((item) => item.trim().length !== 0);
-            const length = values.length;
-            if (length === 0) {
-                return properties;
-            }
-            if (length === 1) {
-                const row = values[0];
-                properties.push([rowGapProperty, row]);
-                properties.push([columnGapProperty, row]);
-            }
-            if (length > 1) {
-                const row = values[0];
-                const column = values[1];
-                properties.push([rowGapProperty, row]);
-                properties.push([columnGapProperty, column]);
-            }
-        }
-        return properties;
-    },
-});
-// export const flexGrowProperty = new CssProperty<Style, number>({
-//   name: 'flexGrow',
-//   cssName: 'flex-grow',
-//   defaultValue: 0,
-//   valueConverter: parseFloat,
-// });
-export const flexShrinkProperty = new CssProperty({
-    name: 'flexShrink',
-    cssName: 'flex-shrink',
-    defaultValue: 1,
-    valueConverter: parseFloat,
-});
-export const displayProperty = new CssProperty({
-    name: 'display',
-    cssName: 'display',
-    defaultValue: 'block',
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view && newValue) {
-            view.display = newValue;
-        }
-        else {
-            // Revert to old value if newValue is invalid
-            view.view.style.display = oldValue;
+    _registerNativeEvent(arg, callback, thisArg) {
+        if (!this[native_]) {
+            this._pendingEventsRegistration.push({ arg, callback, thisArg });
+            return;
         }
-    },
-    valueConverter: function (value) {
-        if (typeof value === 'number') {
-            switch (value) {
-                case 0:
-                    return 'none';
-                case 1:
-                    return 'flex';
-                case 2:
-                    return 'grid';
-                case 3:
-                    return 'block';
-                case 4:
-                    return 'inline';
-                case 5:
-                    return 'inline-block';
-                case 6:
-                    return 'inline-flex';
-                case 7:
-                    return 'inline-grid';
+        //@ts-ignore
+        if (this._view) {
+            if (__ANDROID__) {
+                const ref = new WeakRef(this);
+                const cb = new kotlin.jvm.functions.Function1({
+                    invoke(event) {
+                        const owner = ref.get();
+                        if (owner) {
+                            let ret;
+                            if (arg === 'input') {
+                                ret = new InputEvent();
+                            }
+                            else {
+                                ret = new Event();
+                            }
+                            ret[native_] = event;
+                            ret._target = owner;
+                            callback.call(thisArg || owner, ret);
+                        }
+                    },
+                });
+                //@ts-ignore
+                const id = this._view.addEventListener(arg, cb);
+                callback['mason:event:id'] = id;
             }
-        }
-        switch (value) {
-            case 'none':
-            case 'flex':
-            case 'grid':
-            case 'block':
-            case 'inline':
-            case 'inline-block':
-            case 'inline-flex':
-            case 'inline-grid':
-                return value;
-            default:
-                return undefined;
-        }
-    },
-});
-export const maxWidthProperty = new CssProperty({
-    name: 'maxWidth',
-    cssName: 'max-width',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.maxWidth = newValue;
-        }
-        else {
-            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
-        }
-    },
-});
-export const maxHeightProperty = new CssProperty({
-    name: 'maxHeight',
-    cssName: 'max-height',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.maxHeight = newValue;
-        }
-    },
-});
-export const positionProperty = new CssProperty({
-    name: 'position',
-    cssName: 'position',
-    defaultValue: 'relative',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.position = newValue;
-        }
-    },
-});
-// export const flexDirectionProperty = new CssProperty<Style, FlexDirection>({
-//   name: 'flexDirection',
-//   cssName: 'flex-direction',
-// });
-// export const flexWrapProperty = new CssProperty<Style, FlexWrap>({
-//   name: 'flexWrap',
-//   cssName: 'flex-wrap',
-//   defaultValue: 'no-wrap',
-// });
-const insetProperty = new ShorthandProperty({
-    name: 'inset',
-    cssName: 'inset',
-    getter: function () {
-        if (this.top === this.right && this.top === this.bottom && this.top === this.left) {
-            if (typeof this.top === 'string') {
-                if (this.top === 'auto') {
-                    return this.top;
-                }
-                const value = CorePercentLength.parse(this.top);
-                if (Number.isNaN(value)) {
-                    return this.top;
-                }
-                else {
-                    return CorePercentLength.convertToString(value);
-                }
+            if (__APPLE__) {
+                //@ts-ignore
+                const id = this._view.mason_addEventListener(arg, (event) => {
+                    let ret;
+                    if (arg === 'input') {
+                        ret = new InputEvent();
+                    }
+                    else {
+                        ret = new Event();
+                    }
+                    ret[native_] = event;
+                    ret._target = this;
+                    callback.call(thisArg || this, ret);
+                });
+                callback['mason:event:id'] = id;
             }
         }
-        if (CorePercentLength.equals(this.top, this.right) && CorePercentLength.equals(this.top, this.bottom) && CorePercentLength.equals(this.top, this.left)) {
-            return this.top;
-        }
-        return `${CorePercentLength.convertToString(this.paddingTop)} ${CorePercentLength.convertToString(this.paddingRight)} ${CorePercentLength.convertToString(this.paddingBottom)} ${CorePercentLength.convertToString(this.paddingLeft)}`;
-    },
-    converter: convertToInsets,
-});
-function convertToInsets(value) {
-    if (typeof value === 'string' && value !== 'auto') {
-        const thickness = parseShorthandPositioning(value);
-        return [
-            [topProperty, masonLengthPercentParse(thickness.top)],
-            [rightProperty, masonLengthPercentParse(thickness.right)],
-            [bottomProperty, masonLengthPercentParse(thickness.bottom)],
-            [leftProperty, masonLengthPercentParse(thickness.left)],
-        ];
-    }
-    else {
-        return [
-            [topProperty, value],
-            [rightProperty, value],
-            [bottomProperty, value],
-            [leftProperty, value],
-        ];
     }
-}
-export const leftProperty = new CssProperty({
-    name: 'left',
-    cssName: 'left',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.left = newValue;
-        }
-    },
-});
-export const rightProperty = new CssProperty({
-    name: 'right',
-    cssName: 'right',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.right = newValue;
-        }
-    },
-});
-export const topProperty = new CssProperty({
-    name: 'top',
-    cssName: 'top',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.top = newValue;
-        }
-    },
-});
-export const bottomProperty = new CssProperty({
-    name: 'bottom',
-    cssName: 'bottom',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.bottom = newValue;
-        }
-    },
-});
-export const flexBasisProperty = new CssProperty({
-    name: 'flexBasis',
-    cssName: 'flex-basis',
-    defaultValue: 'auto',
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.flexBasis = newValue;
-        }
-    },
-});
-export const gridRowGapProperty = new ShorthandProperty({
-    name: 'gridRowGap',
-    cssName: 'grid-row-gap',
-    getter: function () {
-        return this.rowGap;
-    },
-    converter(value) {
-        return [[rowGapProperty, value]];
-    },
-});
-export const gridColumnGapProperty = new ShorthandProperty({
-    name: 'gridColumnGap',
-    cssName: 'grid-column-gap',
-    getter: function () {
-        return this.columnGap;
-    },
-    converter(value) {
-        return [[columnGapProperty, value]];
-    },
-});
-export const aspectRatioProperty = new CssProperty({
-    name: 'aspectRatio',
-    cssName: 'aspect-ratio',
-    defaultValue: Number.NaN,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.aspectRatio = newValue;
-        }
-    },
-});
-export const alignItemsProperty = new CssProperty({
-    name: 'alignItems',
-    cssName: 'align-items',
-    defaultValue: 'normal',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.alignItems = newValue;
-        }
-    },
-});
-export const alignSelfProperty = new CssProperty({
-    name: 'alignSelf',
-    cssName: 'align-self',
-    defaultValue: 'normal',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.alignSelf = newValue;
-        }
-    },
-});
-export const alignContentProperty = new CssProperty({
-    name: 'alignContent',
-    cssName: 'align-content',
-    defaultValue: 'normal',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.alignContent = newValue;
-        }
-    },
-});
-export const justifyItemsProperty = new CssProperty({
-    name: 'justifyItems',
-    cssName: 'justify-items',
-    defaultValue: 'normal',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.justifyItems = newValue;
-        }
-    },
-});
-export const justifySelfProperty = new CssProperty({
-    name: 'justifySelf',
-    cssName: 'justify-self',
-    defaultValue: 'normal',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.justifySelf = newValue;
-        }
-    },
-});
-export const justifyContentProperty = new CssProperty({
-    name: 'justifyContent',
-    cssName: 'justify-content',
-    defaultValue: 'normal',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.justifyContent = newValue;
-        }
-    },
-});
-export const gridAutoRowsProperty = new CssProperty({
-    name: 'gridAutoRows',
-    cssName: 'grid-auto-rows',
-    defaultValue: '',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridAutoRows = newValue;
-        }
-    },
-});
-export const gridAutoColumnsProperty = new CssProperty({
-    name: 'gridAutoColumns',
-    cssName: 'grid-auto-columns',
-    defaultValue: '',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridAutoColumns = newValue;
-        }
-    },
-});
-export const gridAutoFlowProperty = new CssProperty({
-    name: 'gridAutoFlow',
-    cssName: 'grid-auto-flow',
-    defaultValue: 'row',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridAutoFlow = newValue;
-        }
-    },
-});
-export const gridAreaProperty = new CssProperty({
-    name: 'gridArea',
-    cssName: 'grid-area',
-    defaultValue: '',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridArea = newValue;
-        }
-    },
-});
-export const gridColumnStartProperty = new CssProperty({
-    name: 'gridColumnStart',
-    cssName: 'grid-column-start',
-    defaultValue: 'auto',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridColumnStart = newValue;
-        }
-    },
-});
-export const gridColumnEndProperty = new CssProperty({
-    name: 'gridColumnEnd',
-    cssName: 'grid-column-end',
-    defaultValue: 'auto',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridColumnEnd = newValue;
-        }
-    },
-});
-export const gridColumnProperty = new CssProperty({
-    name: 'gridColumn',
-    cssName: 'grid-column',
-    defaultValue: '',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridColumn = newValue;
-        }
-    },
-});
-export const gridRowStartProperty = new CssProperty({
-    name: 'gridRowStart',
-    cssName: 'grid-row-start',
-    defaultValue: 'auto',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridRowStart = newValue;
-        }
-    },
-});
-export const gridRowEndProperty = new CssProperty({
-    name: 'gridRowEnd',
-    cssName: 'grid-row-end',
-    defaultValue: 'auto',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridRowEnd = newValue;
-        }
-    },
-});
-export const gridRowProperty = new CssProperty({
-    name: 'gridRow',
-    cssName: 'grid-row',
-    defaultValue: '',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridRow = newValue;
-        }
-    },
-});
-export const gridTemplateAreasProperty = new CssProperty({
-    name: 'gridTemplateAreas',
-    cssName: 'grid-template-areas',
-    defaultValue: null,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridTemplateAreas = newValue;
-        }
-    },
-});
-export const gridTemplateRowsProperty = new CssProperty({
-    name: 'gridTemplateRows',
-    cssName: 'grid-template-rows',
-    defaultValue: null,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridTemplateRows = newValue;
-        }
-    },
-});
-export const gridTemplateColumnsProperty = new CssProperty({
-    name: 'gridTemplateColumns',
-    cssName: 'grid-template-columns',
-    defaultValue: null,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridTemplateColumns = newValue;
-        }
-    },
-});
-// flex-flow: <flex-direction> || <flex-wrap>
-const flexFlowProperty = new ShorthandProperty({
-    name: 'flexFlow',
-    cssName: 'flex-flow',
-    getter: function () {
-        return `${this.flexDirection} ${this.flexWrap}`;
-    },
-    converter: function (value) {
-        const properties = [];
-        if (value === unsetValue) {
-            properties.push([flexDirectionProperty, value]);
-            properties.push([flexWrapProperty, value]);
+    _unregisterNativeEvent(arg, callback, thisArg) {
+        const id = callback['mason:event:id'];
+        if (!this[native_]) {
+            this._pendingEventsRegistration = this._pendingEventsRegistration.filter((registration) => {
+                return !(registration.arg === arg && registration.callback === callback && registration.thisArg === thisArg);
+            });
+            return;
         }
-        else {
-            const trimmed = value && value.trim();
-            if (trimmed) {
-                const values = trimmed.split(/\s+/);
-                if (values.length >= 1) {
-                    properties.push([flexDirectionProperty, values[0]]);
-                }
-                if (value.length >= 2) {
-                    properties.push([flexWrapProperty, values[1]]);
+        //@ts-ignore
+        if (this._view) {
+            if (__ANDROID__) {
+                if (!id) {
+                    //@ts-ignore
+                    const removed = this._view.removeEventListener(arg, id);
+                    callback['mason:event:id'] = undefined;
                 }
             }
-        }
-        return properties;
-    },
-});
-// flex: inital | auto | none | <flex-grow> <flex-shrink> || <flex-basis>
-const flexProperty = new ShorthandProperty({
-    name: 'flex',
-    cssName: 'flex',
-    getter: function () {
-        return `${this.flexGrow} ${this.flexShrink} ${this.flexBasis}`;
-    },
-    converter: function (value) {
-        const properties = [];
-        if (value === unsetValue) {
-            properties.push([flexGrowProperty, value]);
-            properties.push([flexShrinkProperty, value]);
-        }
-        else if (typeof value === 'number') {
-            properties.push([flexGrowProperty, value]);
-            properties.push([flexShrinkProperty, 1]);
-            properties.push([flexBasisProperty, 'auto']);
-        }
-        else {
-            const trimmed = value && value.trim();
-            if (trimmed) {
-                const values = trimmed.split(/\s+/);
-                if (values.length === 1) {
-                    switch (values[0]) {
-                        case 'inital':
-                            properties.push([flexGrowProperty, 0]);
-                            properties.push([flexShrinkProperty, 1]);
-                            properties.push([flexBasisProperty, 'auto']);
-                            break;
-                        case 'auto':
-                            properties.push([flexGrowProperty, 1]);
-                            properties.push([flexShrinkProperty, 1]);
-                            properties.push([flexBasisProperty, 'auto']);
-                            break;
-                        case 'none':
-                            properties.push([flexGrowProperty, 0]);
-                            properties.push([flexShrinkProperty, 0]);
-                            properties.push([flexBasisProperty, 'auto']);
-                            break;
-                        default:
-                            properties.push([flexGrowProperty, values[0]]);
-                            properties.push([flexShrinkProperty, 1]);
-                            properties.push([flexBasisProperty, 'auto']);
-                    }
-                }
-                if (values.length >= 2) {
-                    properties.push([flexGrowProperty, values[0]]);
-                    properties.push([flexShrinkProperty, values[1]]);
-                }
-                if (value.length >= 3) {
-                    properties.push({ property: flexBasisProperty, value: values[2] });
+            if (__APPLE__) {
+                if (!id) {
+                    //@ts-ignore
+                    const removed = this._view.mason_removeEventListenerId(arg, id);
+                    callback['mason:event:id'] = undefined;
                 }
             }
         }
-        return properties;
-    },
-});
-// @ts-ignore
-export const textWrapProperty = new CssProperty({
-    name: 'textWrap',
-    affectsLayout: true,
-    defaultValue: 'nowrap',
-    valueChanged(target, oldValue, newValue) {
-        const view = target?.viewRef ? getViewStyle(target.viewRef) : target.view;
-        if (view) {
-            view.textWrap = newValue;
-        }
-    },
-});
-// @ts-ignore
-export const textOverFlowProperty = new CssProperty({
-    name: 'textOverflow',
-    defaultValue: 'text-overflow',
-    valueChanged(target, oldValue, newValue) {
-        const view = target?.viewRef ? getViewStyle(target.viewRef) : target.view;
-        if (view) {
-            view.textOverflow = newValue;
-        }
-    },
-});
-export const textContentProperty = new Property({
-    name: 'textContent',
-    affectsLayout: true,
-    defaultValue: '',
-});
-export const boxSizingProperty = new CssProperty({
-    name: 'boxSizing',
-    cssName: 'box-sizing',
-    defaultValue: 'border-box',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.boxSizing = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                view.view.style.boxSizing = oldValue;
+    }
+    initNativeView() {
+        super.initNativeView();
+        if (this._pendingEventsRegistration.length > 0) {
+            const pending = this._pendingEventsRegistration.splice(0);
+            for (const registration of pending) {
+                this._registerNativeEvent(registration.arg, registration.callback, registration.thisArg);
             }
         }
-    },
-    valueConverter(value) {
-        switch (value) {
-            case 'content-box':
-            case 'border-box':
-                return value;
-            default:
-                return undefined;
+    }
+    addEventListener(arg, callback, thisArg) {
+        if (typeof thisArg === 'boolean') {
+            thisArg = {
+                capture: thisArg,
+            };
         }
-    },
-});
-const borderRadiusProperty = new CssProperty({
-    name: 'borderRadius',
-    cssName: 'border-radius',
-});
-borderRadiusProperty.register(Style);
-export const verticalAlignProperty = new CssProperty({
-    name: 'verticalAlign',
-    cssName: 'vertical-align',
-    defaultValue: 'baseline',
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.verticalAlign = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                view.view.style.verticalAlign = oldValue;
-            }
+        super.addEventListener(arg, callback, thisArg);
+        if (typeof arg !== 'string') {
+            return;
         }
-    },
-});
-verticalAlignProperty.register(Style);
-verticalAlignmentProperty.overrideHandlers({
-    name: 'verticalAlignment',
-    cssName: 'vertical-align',
-    valueConverter: function (value) {
-        return value;
-    },
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                // @ts-ignore
-                view.verticalAlign = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.verticalAlign = oldValue;
-            }
+        switch (arg) {
+            case 'input':
+            case 'change':
+                this._registerNativeEvent(arg, callback, thisArg);
+                break;
         }
-    },
-});
-textShadowProperty.overrideHandlers({
-    name: 'textShadow',
-    cssName: 'text-shadow',
-    valueConverter: function (value) {
-        return value;
-    },
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.textShadow = newValue;
+    }
+    removeEventListener(arg, callback, thisArg) {
+        if (typeof thisArg === 'boolean') {
+            thisArg = {
+                capture: thisArg,
+            };
         }
-        else {
-            // Revert to old value if newValue is invalid
-            // @ts-ignore
-            view.view.style.verticalAlign = oldValue;
+        super.removeEventListener(arg, callback, thisArg);
+        switch (arg) {
+            case 'input':
+            case 'change':
+                this._unregisterNativeEvent(arg, callback, thisArg);
+                break;
         }
-    },
-});
-export class ViewBase extends CustomLayoutView {
-    constructor() {
-        super();
-        this._children = [];
-        this[_a] = false;
-        this[_b] = false;
-        this[_c] = false;
     }
     forceStyleUpdate() {
         _forceStyleUpdate(this);
@@ -1078,11 +211,11 @@ export class ViewBase extends CustomLayoutView {
         if (child && child[isPlaceholder_] && child._view) {
             if (__ANDROID__) {
                 //@ts-ignore
-                this._view.addChildAt(child._view, this._children.length);
+                this._view.append(child._view);
             }
             if (__APPLE__) {
                 //@ts-ignore
-                this._view.mason_addChildAtNode(child._view, this._children.length);
+                this._view.mason_append(child._view);
             }
             if (this[isText_]) {
                 child[isTextChild_] = true;
@@ -1112,6 +245,20 @@ export class ViewBase extends CustomLayoutView {
                 }
                 this._children.push(child);
             }
+            else if (child instanceof TextNode) {
+                //@ts-ignore
+                if (this._view) {
+                    if (__ANDROID__) {
+                        //@ts-ignore
+                        this._view.addChildAt(child[native_], this._children.length);
+                    }
+                    if (__APPLE__) {
+                        //@ts-ignore
+                        this._view.mason_addChildAtNode(child[native_], this._children.length);
+                    }
+                }
+                this._children.push(child);
+            }
         }
     }
     insertChild(child, atIndex) {
@@ -1201,25 +348,175 @@ export class ViewBase extends CustomLayoutView {
         }
         this._children.splice(0);
     }
+    [(_a = isMasonView_, _b = isTextChild_, _c = isText_, zIndexProperty.setNative)](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.zIndex = value;
+        }
+    }
+    set verticalAlign(value) {
+        this.style.verticalAlign = value;
+    }
+    get verticalAlign() {
+        return this.style.verticalAlign;
+    }
+    [verticalAlignProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.verticalAlign = value;
+        }
+    }
+    set flex(value) {
+        this.style.flex = value;
+    }
+    get flex() {
+        return this.style.flex;
+    }
+    set textWrap(value) {
+        this.style.textWrap = value;
+    }
+    get textWrap() {
+        return this.style.textWrap;
+    }
+    [textWrapProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.textWrap = value;
+        }
+    }
+    set aspectRatio(value) {
+        this.style.aspectRatio = value;
+    }
+    get aspectRatio() {
+        return this.style.aspectRatio;
+    }
+    [aspectRatioProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.aspectRatio = value;
+        }
+    }
+    _updateTextNode(node, operation = null) {
+        let textNode;
+        if (__ANDROID__) {
+            if (node[textNode_]) {
+                node[textNode_].setData(node.text ?? '');
+                textNode = node[textNode_];
+            }
+            else {
+                textNode = new org.nativescript.mason.masonkit.TextNode(Tree.instance.native, node.text ?? '');
+                node[textNode_] = textNode;
+            }
+            if (operation) {
+                switch (operation.type) {
+                    case 'add':
+                        //@ts-ignore
+                        this._view.addChildAt(textNode, this._children.length);
+                        //@ts-ignore
+                        this._children.push({ [text_]: node.text, [textNode_]: textNode, [textNodeIndex_]: this._children.length });
+                        break;
+                    case 'replace':
+                        //@ts-ignore
+                        this._view.replaceChildAt(textNode, operation.index);
+                        if (this._children.length >= operation.index) {
+                            //@ts-ignore
+                            this._children[operation.index] = { text: node.text, [textNode_]: textNode, [textNodeIndex_]: operation.index };
+                        }
+                        else {
+                            //@ts-ignore
+                            this._children.push({ text: node.text, [textNode_]: textNode, [textNodeIndex_]: operation.index });
+                        }
+                        break;
+                    case 'insert':
+                        //@ts-ignore
+                        this._view.addChildAt(textNode, operation.index);
+                        if (this._children.length >= operation.index) {
+                            //@ts-ignore
+                            this._children[operation.index] = { text: node.text, [textNode_]: textNode, [textNodeIndex_]: operation.index };
+                        }
+                        else {
+                            //@ts-ignore
+                            this._children.push({ text: node.text, [textNode_]: textNode, [textNodeIndex_]: operation.index });
+                        }
+                        break;
+                }
+            }
+        }
+        if (__APPLE__) {
+            if (node[textNode_]) {
+                node[textNode_].data = node.text;
+                textNode = node[textNode_];
+                if (operation && 'index' in operation && node[textNodeIndex_] === operation.index) {
+                    return;
+                }
+            }
+            else {
+                textNode = MasonTextNode.alloc().initWithMasonDataAttributes(Tree.instance.native, node.text, null);
+                node[textNode_] = textNode;
+                node[textNodeIndex_] = operation?.index ?? this._children.length;
+            }
+            if (operation) {
+                switch (operation.type) {
+                    case 'add':
+                        //@ts-ignore
+                        this._view.mason_addChildAtNode(textNode, this._children.length);
+                        //@ts-ignore
+                        this._children.push({ [text_]: node.text, [textNode_]: textNode, [textNodeIndex_]: this._children.length });
+                        break;
+                    case 'replace':
+                        //@ts-ignore
+                        this._view.mason_replaceChildAtNode(textNode, operation.index);
+                        if (this._children.length >= operation.index) {
+                            //@ts-ignore
+                            this._children[operation.index] = { text: node.text, [textNode_]: textNode, [textNodeIndex_]: operation.index };
+                        }
+                        else {
+                            //@ts-ignore
+                            this._children.push({ text: node.text, [textNode_]: textNode, [textNodeIndex_]: operation.index });
+                        }
+                        break;
+                    case 'insert':
+                        //@ts-ignore
+                        this._view.mason_addChildAtNode(textNode, operation.index);
+                        if (this._children.length >= operation.index) {
+                            //@ts-ignore
+                            this._children[operation.index] = { text: node.text, [textNode_]: textNode, [textNodeIndex_]: operation.index };
+                        }
+                        else {
+                            //@ts-ignore
+                            this._children.push({ text: node.text, [textNode_]: textNode, [textNodeIndex_]: operation.index });
+                        }
+                        break;
+                }
+            }
+        }
+    }
     set text(value) {
-        if (frameWork === FrameWork.Vue && global.VUE3_ELEMENT_REF) {
-            const view_ref = this[global.VUE3_ELEMENT_REF];
+        if ((frameWork === 2 /* FrameWork.Vue */ && global.VUE3_ELEMENT_REF) || (frameWork === 3 /* FrameWork.React */ && global.REACT_ELEMENT_REF)) {
+            const view_ref = this[global.VUE3_ELEMENT_REF] ?? this[global.REACT_ELEMENT_REF];
             if (Array.isArray(view_ref.childNodes)) {
                 if (view_ref.childNodes.length === 0) {
-                    this.addChild({ [text_]: value });
+                    this.replaceChild({ [text_]: value }, 0);
                     return;
                 }
                 if (view_ref.childNodes.length === 1) {
                     const node = view_ref.childNodes[0];
                     if (node && node.nodeType === 'text') {
-                        this.addChild({ [text_]: node.text });
+                        this._updateTextNode(node, { type: 'add' });
                     }
                     return;
                 }
                 view_ref.childNodes.forEach((node, index) => {
                     if (node.nodeType === 'text') {
-                        //  nativeView.replaceChildAt(node.text, index);
-                        this.replaceChild({ [text_]: node.text }, index);
+                        this._updateTextNode(node, { type: 'replace', index, isBreak: node.nodeName === 'br' });
                     }
                 });
             }
@@ -1241,18 +538,29 @@ export class ViewBase extends CustomLayoutView {
                     const existing = this._children[index];
                     if (existing && Object.is(existing['node'], node)) {
                         // todo direct set text
-                        this.replaceChild({ [text_]: node.text, node }, index);
+                        this._updateTextNode(node, { type: 'replace', index });
                         continue;
                     }
-                    this.replaceChild({ [text_]: node.text, node }, index);
+                    this._updateTextNode(node, { type: 'replace', index });
                 }
                 else if (node.nodeName === 'br') {
-                    this.replaceChild(node, index);
+                    this._updateTextNode(node, { type: 'replace', index, isBreak: true });
                 }
             }
+            return;
         }
+        if ('textContent' in this) {
+            // @ts-ignore
+            this.textContent = value;
+        }
+    }
+    get filter() {
+        return this.style.filter;
+    }
+    set filter(value) {
+        this.style.filter = value;
     }
-    [(_a = isMasonView_, _b = isTextChild_, _c = isText_, filterProperty.setNative)](value) {
+    [filterProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
         if (style) {
@@ -1260,6 +568,13 @@ export class ViewBase extends CustomLayoutView {
             style.filter = value;
         }
     }
+    // @ts-ignore
+    set borderRadius(value) {
+        this.style.borderRadius = value;
+    }
+    get borderRadius() {
+        return this.style.borderRadius;
+    }
     [borderRadiusProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
@@ -1268,6 +583,12 @@ export class ViewBase extends CustomLayoutView {
             style.borderRadius = value;
         }
     }
+    set border(value) {
+        this.style.border = value;
+    }
+    get border() {
+        return this.style.border;
+    }
     [borderProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
@@ -1276,6 +597,13 @@ export class ViewBase extends CustomLayoutView {
             style.border = value;
         }
     }
+    // @ts-ignore
+    set background(value) {
+        this.style.background = value;
+    }
+    get background() {
+        return this.style.background;
+    }
     [backgroundProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
@@ -1373,34 +701,83 @@ export class ViewBase extends CustomLayoutView {
     set boxSizing(value) {
         this.style.boxSizing = value;
     }
+    [boxSizingProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.boxSizing = value;
+        }
+    }
     get display() {
         return this.style.display;
     }
     set display(value) {
         this.style.display = value;
     }
+    [displayProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.display = value;
+        }
+    }
+    get overflow() {
+        return this.style.overflow;
+    }
+    set overflow(value) {
+        this.style.overflow = value;
+    }
     get overflowX() {
         return this.style.overflowX;
     }
     set overflowX(value) {
         this.style.overflowX = value;
     }
+    [overflowXProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.overflowX = value;
+        }
+    }
     get overflowY() {
         return this.style.overflowY;
     }
     set overflowY(value) {
         this.style.overflowY = value;
     }
+    [overflowYProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.overflowY = value;
+        }
+    }
     get scrollBarWidth() {
         return this.style.scrollBarWidth;
     }
     set scrollBarWidth(value) {
         this.style.scrollBarWidth = value;
     }
+    [scrollBarWidthProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.scrollBarWidth = value;
+        }
+    }
     get position() {
         return this.style.position;
     }
     set position(value) {
+        this.style.position = value;
+    }
+    [positionProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
         if (style) {
@@ -1467,6 +844,12 @@ export class ViewBase extends CustomLayoutView {
             style.alignSelf = value;
         }
     }
+    get alignContent() {
+        return this.style.alignContent;
+    }
+    set alignContent(value) {
+        this.style.alignContent = value;
+    }
     [alignContentProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
@@ -1474,6 +857,12 @@ export class ViewBase extends CustomLayoutView {
             style.alignContent = value;
         }
     }
+    get justifyItems() {
+        return this.style.justifyItems;
+    }
+    set justifyItems(value) {
+        this.style.justifyItems = value;
+    }
     [justifyItemsProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
@@ -1481,6 +870,12 @@ export class ViewBase extends CustomLayoutView {
             style.justifyItems = value;
         }
     }
+    get justifySelf() {
+        return this.style.justifySelf;
+    }
+    set justifySelf(value) {
+        this.style.justifySelf = value;
+    }
     [justifySelfProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
@@ -1502,6 +897,12 @@ export class ViewBase extends CustomLayoutView {
             style.left = value;
         }
     }
+    get right() {
+        return this.style.right;
+    }
+    set right(value) {
+        this.style.right = value;
+    }
     [rightProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
@@ -1509,6 +910,12 @@ export class ViewBase extends CustomLayoutView {
             style.right = value;
         }
     }
+    get bottom() {
+        return this.style.bottom;
+    }
+    set bottom(value) {
+        this.style.bottom = value;
+    }
     [bottomProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
@@ -1563,6 +970,20 @@ export class ViewBase extends CustomLayoutView {
     get maxHeight() {
         return this.style.maxHeight;
     }
+    [maxWidthProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.maxWidth = value;
+        }
+    }
+    [maxHeightProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.maxHeight = value;
+        }
+    }
     _redrawNativeBackground(value) { }
     [marginProperty.setNative](value) {
         // @ts-ignore
@@ -1606,6 +1027,12 @@ export class ViewBase extends CustomLayoutView {
             style.marginTop = value;
         }
     }
+    get padding() {
+        return this.style.padding;
+    }
+    set padding(value) {
+        this.style.padding = value;
+    }
     [paddingProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
@@ -1645,67 +1072,228 @@ export class ViewBase extends CustomLayoutView {
             style.paddingBottom = value;
         }
     }
+    set gap(value) {
+        this.style.gap = value;
+    }
+    get gap() {
+        return this.style.gap;
+    }
+    set gridGap(value) {
+        this.style.gridGap = value;
+    }
+    get gridGap() {
+        return this.style.gridGap;
+    }
     set rowGap(value) {
         this.style.rowGap = value;
     }
     get rowGap() {
         return this.style.rowGap;
     }
+    [rowGapProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.rowGap = value;
+        }
+    }
     set columnGap(value) {
         this.style.columnGap = value;
     }
     get columnGap() {
         return this.style.columnGap;
     }
+    [columnGapProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.columnGap = value;
+        }
+    }
     set gridColumnStart(value) {
         this.style.gridColumnStart = value;
     }
     get gridColumnStart() {
         return this.style.gridColumnStart;
     }
+    [gridColumnStartProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridColumnStart = value;
+        }
+    }
     set gridColumnEnd(value) {
         this.style.gridColumnEnd = value;
     }
     get gridColumnEnd() {
         return this.style.gridColumnEnd;
     }
+    [gridColumnEndProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridColumnEnd = value;
+        }
+    }
+    get gridColumn() {
+        return this.style.gridColumn;
+    }
+    set gridColumn(value) {
+        this.style.gridColumn = value;
+    }
+    [gridColumnProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridColumn = value;
+        }
+    }
     set gridRowStart(value) {
         this.style.gridRowStart = value;
     }
     get gridRowStart() {
         return this.style.gridRowStart;
     }
+    [gridRowStartProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridRowStart = value;
+        }
+    }
     set gridRowEnd(value) {
         this.style.gridRowEnd = value;
     }
     get gridRowEnd() {
         return this.style.gridRowEnd;
     }
+    [gridRowEndProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridRowEnd = value;
+        }
+    }
+    get gridRow() {
+        return this.style.gridRow;
+    }
+    set gridRow(value) {
+        this.style.gridRow = value;
+    }
+    [gridRowProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridRow = value;
+        }
+    }
     set gridTemplateRows(value) {
         this.style.gridTemplateRows = value;
     }
     get gridTemplateRows() {
         return this.style.gridTemplateRows;
     }
+    [gridTemplateRowsProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridTemplateRows = value;
+        }
+    }
     set gridTemplateColumns(value) {
         this.style.gridTemplateColumns = value;
     }
     get gridTemplateColumns() {
         return this.style.gridTemplateColumns;
     }
+    [gridTemplateColumnsProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridTemplateColumns = value;
+        }
+    }
     set gridAutoColumns(value) {
         this.style.gridAutoColumns = value;
     }
     get gridAutoColumns() {
         return this.style.gridAutoColumns;
     }
+    [gridAutoColumnsProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridAutoColumns = value;
+        }
+    }
     set gridAutoRows(value) {
         this.style.gridAutoRows = value;
     }
     get gridAutoRows() {
         return this.style.gridAutoRows;
     }
-    // @ts-ignore
+    [gridAutoRowsProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridAutoRows = value;
+        }
+    }
+    set gridAutoFlow(value) {
+        this.style.gridAutoFlow = value;
+    }
+    get gridAutoFlow() {
+        return this.style.gridAutoFlow;
+    }
+    [gridAutoFlowProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridAutoFlow = value;
+        }
+    }
+    set gridArea(value) {
+        this.style.gridArea = value;
+    }
+    get gridArea() {
+        return this.style.gridArea;
+    }
+    [gridAreaProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridArea = value;
+        }
+    }
+    set gridTemplateAreas(value) {
+        this.style.gridTemplateAreas = value;
+    }
+    get gridTemplateAreas() {
+        return this.style.gridTemplateAreas;
+    }
+    [gridTemplateAreasProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridTemplateAreas = value;
+        }
+    }
     [fontSizeProperty.setNative](value) {
         // @ts-ignore
         if (this._styleHelper) {
@@ -1727,12 +1315,57 @@ export class ViewBase extends CustomLayoutView {
             this._styleHelper.fontStyle = value;
         }
     }
+    set flexFlowProperty(value) {
+        this.style.flexFlow = value;
+    }
+    get flexFlowProperty() {
+        return this.style.flexFlow;
+    }
+    set inset(value) {
+        this.style.inset = value;
+    }
+    get inset() {
+        return this.style.inset;
+    }
+    set textOverFlow(value) {
+        this.style.textOverFlow = value;
+    }
+    get textOverFlow() {
+        return this.style.textOverFlow;
+    }
+    [textOverFlowProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.textOverFlow = value;
+        }
+    }
 }
 export class TextBase extends ViewBase {
+    [textWrapProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            switch (value) {
+                case 'false':
+                case false:
+                case 'nowrap':
+                    style.textWrap = 1 /* MasonTextWrap.NoWrap */;
+                    break;
+                case true:
+                case 'true':
+                case 'wrap':
+                    style.textWrap = 0 /* MasonTextWrap.Wrap */;
+                    break;
+                case 'balance':
+                    style.textWrap = 2 /* MasonTextWrap.Balance */;
+                    break;
+            }
+        }
+    }
 }
-textContentProperty.register(TextBase);
-textWrapProperty.register(Style);
-textOverFlowProperty.register(Style);
+textContentProperty.register(ViewBase);
 export class ButtonBase extends TextBase {
 }
 // @ts-ignore
@@ -1743,351 +1376,156 @@ export const srcProperty = new Property({
 export class ImageBase extends ViewBase {
 }
 srcProperty.register(ImageBase);
-/**
- * Props are already defined in core flexbox layout,
- * overriding them breaks the core flexbox layout.
- */
-// flexDirectionProperty.register(Style);
-// flexWrapProperty.register(Style);
-// flexGrowProperty.register(Style);
-flexShrinkProperty.register(Style);
-// revert valueConverter if causing issues with core components
-fontSizeProperty.overrideHandlers({
-    name: 'fontSize',
-    cssName: 'font-size',
-    valueConverter: function (value) {
-        return value;
-    },
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                if (typeof newValue === 'string') {
-                    // @ts-ignore
-                    if (newValue.indexOf('%') !== -1) {
-                        view.fontSize = {
-                            value: parseFloat(newValue) / 100,
-                            unit: '%',
-                        };
-                        // @ts-ignore
-                    }
-                    else if (newValue.indexOf('dip') !== -1) {
-                        view.fontSize = parseFloat(newValue);
-                        // @ts-ignore
-                    }
-                    else if (newValue.indexOf('px') !== -1) {
-                        view.fontSize = {
-                            value: parseFloat(newValue),
-                            unit: 'px',
-                        };
-                    }
-                    else {
-                        view.fontSize = parseFloat(newValue);
-                    }
-                }
-                else {
-                    view.fontSize = newValue;
-                }
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.fontSize = oldValue;
-            }
+export class Event {
+    get bubbles() {
+        if (__ANDROID__) {
+            return this[native_]?.getBubbles();
         }
-    },
-});
-marginLeftProperty.overrideHandlers({
-    name: 'marginLeft',
-    cssName: 'margin-left',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.marginLeft = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.marginLeft = oldValue;
-            }
+        if (__APPLE__) {
+            return this[native_]?.bubbles;
         }
-    },
-});
-marginTopProperty.overrideHandlers({
-    name: 'marginTop',
-    cssName: 'margin-top',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.marginTop = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.marginTop = oldValue;
-            }
+        return false;
+    }
+    get cancelable() {
+        if (__ANDROID__) {
+            return this[native_]?.getCancelable();
         }
-    },
-});
-marginRightProperty.overrideHandlers({
-    name: 'marginRight',
-    cssName: 'margin-right',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.marginRight = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.marginRight = oldValue;
-            }
+        if (__APPLE__) {
+            return this[native_]?.cancelable;
         }
-    },
-});
-marginBottomProperty.overrideHandlers({
-    name: 'marginBottom',
-    cssName: 'margin-bottom',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.marginBottom = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.marginBottom = oldValue;
-            }
+        return false;
+    }
+    get isComposing() {
+        if (__ANDROID__) {
+            return this[native_]?.getIsComposing();
         }
-    },
-});
-paddingLeftProperty.overrideHandlers({
-    name: 'paddingLeft',
-    cssName: 'padding-left',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.paddingLeft = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.paddingLeft = oldValue;
-            }
+        if (__APPLE__) {
+            return this[native_]?.isComposing;
         }
-    },
-});
-paddingTopProperty.overrideHandlers({
-    name: 'paddingTop',
-    cssName: 'padding-top',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.paddingTop = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.paddingTop = oldValue;
-            }
+        return false;
+    }
+    get timeStamp() {
+        if (__ANDROID__) {
+            return this[native_]?.getTimeStamp();
         }
-    },
-});
-paddingRightProperty.overrideHandlers({
-    name: 'paddingRight',
-    cssName: 'padding-right',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.paddingRight = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.paddingRight = oldValue;
-            }
+        if (__APPLE__) {
+            return this[native_]?.timeStamp;
         }
-    },
-});
-paddingBottomProperty.overrideHandlers({
-    name: 'paddingBottom',
-    cssName: 'padding-bottom',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.paddingBottom = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.paddingBottom = oldValue;
-            }
+        return false;
+    }
+    get defaultPrevented() {
+        if (__ANDROID__) {
+            return this[native_]?.getDefaultPrevented();
         }
-    },
-});
-flexDirectionProperty.overrideHandlers({
-    name: 'flexDirection',
-    cssName: 'flex-direction',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.flexDirection = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.flexDirection = oldValue;
-            }
+        if (__APPLE__) {
+            return this[native_]?.defaultPrevented;
         }
-    },
-});
-flexWrapProperty.overrideHandlers({
-    name: 'flexWrap',
-    cssName: 'flex-wrap',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.flexWrap = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.flexWrap = oldValue;
-            }
+        return false;
+    }
+    get propagationStopped() {
+        if (__ANDROID__) {
+            return this[native_]?.getPropagationStopped();
         }
-    },
-});
-flexGrowProperty.overrideHandlers({
-    name: 'flexGrow',
-    cssName: 'flex-grow',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.flexGrow = newValue;
+        if (__APPLE__) {
+            return this[native_]?.propagationStopped;
+        }
+        return false;
+    }
+    get immediatePropagationStopped() {
+        if (__ANDROID__) {
+            return this[native_]?.getImmediatePropagationStopped();
+        }
+        if (__APPLE__) {
+            return this[native_]?.immediatePropagationStopped;
+        }
+        return false;
+    }
+    get currentTarget() {
+        if (__ANDROID__) {
+            return this[native_]?.getCurrentTarget();
+        }
+        if (__APPLE__) {
+            return this[native_]?.currentTarget;
+        }
+        return false;
+    }
+    stopImmediatePropagation() {
+        if (__ANDROID__) {
+            return this[native_]?.stopImmediatePropagation();
+        }
+        if (__APPLE__) {
+            return this[native_]?.stopImmediatePropagation();
+        }
+    }
+    stopPropagation() {
+        if (__ANDROID__) {
+            return this[native_]?.stopPropagation();
+        }
+        if (__APPLE__) {
+            return this[native_]?.stopPropagation();
+        }
+    }
+    preventDefault() {
+        if (__ANDROID__) {
+            return this[native_]?.preventDefault();
+        }
+        if (__APPLE__) {
+            return this[native_]?.preventDefault();
+        }
+    }
+    get type() {
+        if (__ANDROID__) {
+            return this[native_]?.getType();
+        }
+        return this[native_]?.type;
+    }
+    get target() {
+        return this['_target'];
+    }
+}
+export class InputEvent extends Event {
+    get data() {
+        if (__ANDROID__) {
+            if (this[native_] instanceof org.nativescript.mason.masonkit.events.FileInputEvent) {
+                const data = this[native_]?.getRawData();
+                if (!data) {
+                    return null;
+                }
+                const ret = [];
+                const size = data.size();
+                for (let i = 0; i < size; i++) {
+                    ret.push(data.get(i).toString());
+                }
+                return ret;
             }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.flexGrow = oldValue;
+            return this[native_]?.getData();
+        }
+        if (__APPLE__) {
+            if (this[native_] instanceof MasonFileInputEvent) {
+                const data = this[native_]?.rawData;
+                if (!data) {
+                    return null;
+                }
+                const ret = [];
+                const size = data.count;
+                for (let i = 0; i < size; i++) {
+                    const item = data.objectAtIndex(i);
+                    ret.push(item.absoluteString);
+                }
+                return ret;
             }
+            return this[native_]?.data;
         }
-    },
-});
-insetProperty.register(Style);
-boxSizingProperty.register(Style);
-alignItemsProperty.register(Style);
-alignSelfProperty.register(Style);
-justifyContentProperty.register(Style);
-displayProperty.register(Style);
-maxWidthProperty.register(Style);
-maxHeightProperty.register(Style);
-positionProperty.register(Style);
-leftProperty.register(Style);
-rightProperty.register(Style);
-topProperty.register(Style);
-bottomProperty.register(Style);
-flexBasisProperty.register(Style);
-rowGapProperty.register(Style);
-columnGapProperty.register(Style);
-gridRowGapProperty.register(Style);
-gridColumnGapProperty.register(Style);
-gapProperty.register(Style);
-gridGapProperty.register(Style);
-aspectRatioProperty.register(Style);
-alignContentProperty.register(Style);
-justifyItemsProperty.register(Style);
-justifySelfProperty.register(Style);
-gridAutoRowsProperty.register(Style);
-gridAutoColumnsProperty.register(Style);
-gridAutoFlowProperty.register(Style);
-gridAreaProperty.register(Style);
-gridColumnProperty.register(Style);
-gridColumnStartProperty.register(Style);
-gridColumnEndProperty.register(Style);
-gridRowProperty.register(Style);
-gridRowStartProperty.register(Style);
-gridRowEndProperty.register(Style);
-gridTemplateRowsProperty.register(Style);
-gridTemplateColumnsProperty.register(Style);
-gridTemplateAreasProperty.register(Style);
-overflowProperty.register(Style);
-overflowXProperty.register(Style);
-overflowYProperty.register(Style);
-scrollBarWidthProperty.register(Style);
-flexFlowProperty.register(Style);
-flexProperty.register(Style);
-function parseShorthandPositioning(value) {
-    const arr = value.split(/[ ,]+/);
-    let top;
-    let right;
-    let bottom;
-    let left;
-    if (arr.length === 1) {
-        top = arr[0];
-        right = arr[0];
-        bottom = arr[0];
-        left = arr[0];
-    }
-    else if (arr.length === 2) {
-        top = arr[0];
-        bottom = arr[0];
-        right = arr[1];
-        left = arr[1];
-    }
-    else if (arr.length === 3) {
-        top = arr[0];
-        right = arr[1];
-        left = arr[1];
-        bottom = arr[2];
-    }
-    else if (arr.length === 4) {
-        top = arr[0];
-        right = arr[1];
-        bottom = arr[2];
-        left = arr[3];
-    }
-    else {
-        throw new Error('Expected 1, 2, 3 or 4 parameters. Actual: ' + value);
-    }
-    return {
-        top: top,
-        right: right,
-        bottom: bottom,
-        left: left,
-    };
-}
-function convertToPaddings(value) {
-    if (typeof value === 'string' && value !== 'auto') {
-        const thickness = parseShorthandPositioning(value);
-        return [
-            [paddingTopProperty, CoreLength.parse(thickness.top)],
-            [paddingRightProperty, CoreLength.parse(thickness.right)],
-            [paddingBottomProperty, CoreLength.parse(thickness.bottom)],
-            [paddingLeftProperty, CoreLength.parse(thickness.left)],
-        ];
-    }
-    else {
-        return [
-            [paddingTopProperty, value],
-            [paddingRightProperty, value],
-            [paddingBottomProperty, value],
-            [paddingLeftProperty, value],
-        ];
+        return false;
+    }
+    get inputType() {
+        if (__ANDROID__) {
+            return this[native_]?.getInputType();
+        }
+        if (__APPLE__) {
+            return this[native_]?.inputType;
+        }
+        return false;
     }
 }
-paddingLeftProperty.register(Style);
-paddingRightProperty.register(Style);
-paddingTopProperty.register(Style);
-paddingBottomProperty.register(Style);
 //# sourceMappingURL=common.js.map