Enable recycling of nativeView 2 (#4467)

* enable recycling of nativeView * backgroundInternal is reset if setting new value leads to background.isEmpty() == true. * android background.getDefault always return copy of the background. Now all controls that mutate the background can be reset to initial state (e.g. Button & ActionBar) passing resources to copied background so it respect density. fix properties initNativeView * reset padding when backgroundInternal is reset. * Fix text reset Fix padding reset * fix tsc errors * fix ugly text rendering. * Add unit tests for recycling native views Fix several issues that came from the above tests Fix maxLength property missing a converter callback Remove old files * Remove old files * Revert backgroundInternal setter * change the order of tests so that appium can work again * Remove suggestion on every TextView & TextField init (strangely it is enabled after view is recycled....) * Fix function to get parent layout if specified * Button stateListAnimator restored when button is recycled zIndex defaultValue is now undefined instead of NaN * revert zIndex.setNative to always clear stateListAnimator because it was breaking one UI test (setting value=0 was returning the previous stateListAnimator) * fix search-bar backgound-color recycling * Fix alignments setters * Fix imageView recycling Fix button recycling Fix edit-text recycling resetNativeView is called only if recycleNativeView flag is true * Fix incorrect merge * Fix text-view & text-field textTransform * Fix EditText text reset * Fix runtime crash on ARM emulator API 21 * Fix text-base minHeight. maxHeight reset Fix reset of isUserInteractionEnabled
2025-11-05 13:26:48 +08:00 · 2017-06-29 18:01:22 +03:00
parent b1432679e6
commit 23757e5dfc
97 changed files with 1405 additions and 578 deletions
--- a/tests/app/TKUnit.ts
+++ b/tests/app/TKUnit.ts
@@ -210,7 +210,7 @@ export function assertNotEqual(actual: any, expected: any, message?: string) {
    }

    if (equals) {
-        throw new Error(message + " Actual: " + actual + " Expected: " + expected);
+        throw new Error(message + " Actual: " + actual + " Not_Expected: " + expected);
    }
 }

@@ -233,59 +233,59 @@ export function assertEqual<T extends { equals?(arg: T): boolean }>(actual: T, e
 /**
 * Assert two json like objects are deep equal.
 */
-export function assertDeepEqual(actual, expected, path: any[] = []): void {
+export function assertDeepEqual(actual, expected, message: string = '', path: any[] = []): void {
    let typeofActual: string = typeof actual;
    let typeofExpected: string = typeof expected;
    if (typeofActual !== typeofExpected) {
-        throw new Error("At /" + path.join("/") + " types of actual " + typeofActual + " and expected " + typeofExpected + " differ.");
+        throw new Error(message + ' ' + "At /" + path.join("/") + " types of actual " + typeofActual + " and expected " + typeofExpected + " differ.");
    } else if (typeofActual === "object" || typeofActual === "array") {
        if (expected instanceof Map) {
            if (actual instanceof Map) {
                expected.forEach((value, key) => {
                    if (actual.has(key)) {
-                        assertDeepEqual(actual.get(key), value, path.concat([key]));
+                        assertDeepEqual(actual.get(key), value, message, path.concat([key]));
                    } else {
-                        throw new Error("At /" + path.join("/") + " expected Map has key '" + key + "' but actual does not.");
+                        throw new Error(message + ' ' + "At /" + path.join("/") + " expected Map has key '" + key + "' but actual does not.");
                    }
                });
                actual.forEach((value, key) => {
                    if (!expected.has(key)) {
-                        throw new Error("At /" + path.join("/") + " actual Map has key '" + key + "' but expected does not.");
+                        throw new Error(message + ' ' + "At /" + path.join("/") + " actual Map has key '" + key + "' but expected does not.");
                    }
                });
            } else {
-                throw new Error("At /" + path.join("/") + " expected is Map but actual is not.");
+                throw new Error(message + ' ' + "At /" + path.join("/") + " expected is Map but actual is not.");
            }
        }
        if (expected instanceof Set) {
            if (actual instanceof Set) {
                expected.forEach(i => {
                    if (!actual.has(i)) {
-                        throw new Error("At /" + path.join("/") + " expected Set has item '" + i + "' but actual does not.");
+                        throw new Error(message + ' ' + "At /" + path.join("/") + " expected Set has item '" + i + "' but actual does not.");
                    }
                });
                actual.forEach(i => {
                    if (!expected.has(i)) {
-                        throw new Error("At /" + path.join("/") + " actual Set has item '" + i + "' but expected does not.");
+                        throw new Error(message + ' ' + "At /" + path.join("/") + " actual Set has item '" + i + "' but expected does not.");
                    }
                })
            } else {
-                throw new Error("At /" + path.join("/") + " expected is Set but actual is not.");
+                throw new Error(message + ' ' + "At /" + path.join("/") + " expected is Set but actual is not.");
            }
        }
        for (let key in actual) {
            if (!(key in expected)) {
-                throw new Error("At /" + path.join("/") + " found unexpected key " + key + ".");
+                throw new Error(message + ' ' + "At /" + path.join("/") + " found unexpected key " + key + ".");
            }
-            assertDeepEqual(actual[key], expected[key], path.concat([key]));
+            assertDeepEqual(actual[key], expected[key], message, path.concat([key]));
        }
        for (let key in expected) {
            if (!(key in actual)) {
-                throw new Error("At /" + path.join("/") + " expected a key " + key + ".");
+                throw new Error(message + ' ' + "At /" + path.join("/") + " expected a key " + key + ".");
            }
        }
    } else if (actual !== expected) {
-        throw new Error("At /" + path.join("/") + " actual: '" + actual + "' and expected: '" + expected + "' differ.");
+        throw new Error(message + ' ' + "At /" + path.join("/") + " actual: '" + actual + "' and expected: '" + expected + "' differ.");
    }
 }

--- a/tests/app/app/mainPage.ts
+++ b/tests/app/app/mainPage.ts
@@ -24,7 +24,7 @@ page.id = "mainPage";
 page.on(Page.navigatedToEvent, onNavigatedTo);

 function runTests() {
-    setTimeout(() => tests.runAll(), 10);
+    setTimeout(() => tests.runAll(''), 10);
 }

 function onNavigatedTo(args) {
--- a/tests/app/testRunner.ts
+++ b/tests/app/testRunner.ts
@@ -217,9 +217,6 @@ allTests["HTML-VIEW"] = htmlViewTests;
 import * as repeaterTests from "./ui/repeater/repeater-tests";
 allTests["REPEATER"] = repeaterTests;

-import * as searchBarTests from "./ui/search-bar/search-bar-tests";
-allTests["SEARCH-BAR"] = searchBarTests;
-
 import * as segmentedBarTests from "./ui/segmented-bar/segmented-bar-tests";
 allTests["SEGMENTED-BAR"] = segmentedBarTests;

@@ -238,6 +235,9 @@ if (!(platform.device.os === platform.platformNames.android && parseInt(platform
    allTests["TANSITIONS"] = transitionTests;
 }

+import * as searchBarTests from "./ui/search-bar/search-bar-tests";
+allTests["SEARCH-BAR"] = searchBarTests;
+
 import * as navigationTests from "./navigation/navigation-tests";
 allTests["NAVIGATION"] = navigationTests;

--- a/tests/app/ui/action-bar/action-bar-tests-common.ts
+++ b/tests/app/ui/action-bar/action-bar-tests-common.ts
@@ -333,3 +333,7 @@ export function createPageAndNavigate() {

    return page;
 }
+
+export function test_recycling() {
+    helper.nativeView_recycling_test(() => new actionBarModule.ActionBar());
+}
--- a/tests/app/ui/activity-indicator/activity-indicator-tests.ts
+++ b/tests/app/ui/activity-indicator/activity-indicator-tests.ts
@@ -9,6 +9,10 @@ import * as color from "tns-core-modules/color";
 import * as activityIndicatorModule from "tns-core-modules/ui/activity-indicator";
 // << activity-indicator-require

+export function test_recycling() {
+    helper.nativeView_recycling_test(() => new activityIndicatorModule.ActivityIndicator());
+}
+
 export function test_default_TNS_values() {
    // >> activity-indicator-create
    var indicator = new activityIndicatorModule.ActivityIndicator();
--- a/tests/app/ui/border/border-tests.ts
+++ b/tests/app/ui/border/border-tests.ts
@@ -1,7 +1,8 @@
 // >> border-require
 import { Border } from "tns-core-modules/ui/border";
 // << border-require
+import * as helper from "../helper";

-if (Border) {
-    // NOOP
+export function test_recycling() {
+    helper.nativeView_recycling_test(() => new Border());
 }
--- a/tests/app/ui/button/button-tests.ts
+++ b/tests/app/ui/button/button-tests.ts
@@ -16,6 +16,10 @@ import * as bindable from "tns-core-modules/ui/core/bindable";
 import * as observable from "tns-core-modules/data/observable";
 // << button-require-others

+export function test_recycling() {
+    helper.nativeView_recycling_test(() => new buttonModule.Button());
+}
+
 export var testSetText = function () {
    helper.buildUIAndRunTest(_createButtonFunc(), _testSetText);
 }
--- a/tests/app/ui/date-picker/date-picker-tests.ts
+++ b/tests/app/ui/date-picker/date-picker-tests.ts
@@ -8,6 +8,12 @@ import * as platform from "tns-core-modules/platform";
 import * as datePickerModule from "tns-core-modules/ui/date-picker";
 // << date-picker-require

+import * as helper from "../helper";
+
+export function test_recycling() {
+    helper.nativeView_recycling_test(() => new datePickerModule.DatePicker());
+}
+
 function assertDate(datePicker: datePickerModule.DatePicker, expectedYear: number, expectedMonth: number, expectedDay: number) {
    TKUnit.assertEqual(datePicker.year, expectedYear, "datePicker.year");
    TKUnit.assertEqual(datePicker.month, expectedMonth, "datePicker.month");
--- a/tests/app/ui/helper.ts
+++ b/tests/app/ui/helper.ts
@@ -1,18 +1,18 @@
-import * as view from "tns-core-modules/ui/core/view";
-import * as frame from "tns-core-modules/ui/frame";
-import * as page from "tns-core-modules/ui/page";
-import * as stackLayoutModule from "tns-core-modules/ui/layouts/stack-layout";
-import * as button from "tns-core-modules/ui/button";
+import * as frame from "tns-core-modules/ui/frame";
+import { ViewBase, View, unsetValue, isIOS } from "tns-core-modules/ui/core/view";
+import { Page } from "tns-core-modules/ui/page";
+import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
+import { Button } from "tns-core-modules/ui/button";
 import * as TKUnit from "../TKUnit";
 import * as utils from "tns-core-modules/utils/utils";
-import * as platform from "tns-core-modules/platform";
-import * as colorModule from "tns-core-modules/color";
-import * as formattedStringModule from "tns-core-modules/text/formatted-string";
-import * as spanModule from "tns-core-modules/text/span";
 import { ActionBar } from "tns-core-modules/ui/action-bar";
-import { unsetValue } from "tns-core-modules/ui/core/view";
 import { Color } from "tns-core-modules/color";

+import { LayoutBase } from "tns-core-modules/ui/layouts/layout-base";
+import { FlexboxLayout } from "tns-core-modules/ui/layouts/flexbox-layout";
+import { FormattedString, Span } from "tns-core-modules/text/formatted-string";
+import { _getProperties, _getStyleProperties } from "tns-core-modules/ui/core/properties";
+
 var DELTA = 0.1;

 export var ASYNC = 0.2;
@@ -46,7 +46,7 @@ function clearPage(): void {
    newPage.id = unsetValue;
 }

-export function do_PageTest(test: (views: [page.Page, view.View, view.View, view.View, ActionBar]) => void, content: view.View, secondView: view.View, thirdView: view.View) {
+export function do_PageTest(test: (views: [Page, View, View, View, ActionBar]) => void, content: View, secondView: View, thirdView: View) {
    clearPage();
    let newPage = getCurrentPage();
    newPage.content = content;
@@ -54,20 +54,20 @@ export function do_PageTest(test: (views: [page.Page, view.View, view.View, view
    newPage.content = null;
 }

-export function do_PageTest_WithButton(test: (views: [page.Page, button.Button, ActionBar]) => void) {
+export function do_PageTest_WithButton(test: (views: [Page, Button, ActionBar]) => void) {
    clearPage();
    let newPage = getCurrentPage();
-    let btn = new button.Button();
+    let btn = new Button();
    newPage.content = btn;
    test([newPage, btn, newPage.actionBar]);
    newPage.content = null;
 }

-export function do_PageTest_WithStackLayout_AndButton(test: (views: [page.Page, stackLayoutModule.StackLayout, button.Button, ActionBar]) => void) {
+export function do_PageTest_WithStackLayout_AndButton(test: (views: [Page, StackLayout, Button, ActionBar]) => void) {
    clearPage();
    let newPage = getCurrentPage();
-    let stackLayout = new stackLayoutModule.StackLayout();
-    let btn = new button.Button();
+    let stackLayout = new StackLayout();
+    let btn = new Button();
    stackLayout.addChild(btn);
    newPage.content = stackLayout;
    test([newPage, stackLayout, btn, newPage.actionBar]);
@@ -75,7 +75,7 @@ export function do_PageTest_WithStackLayout_AndButton(test: (views: [page.Page,
 }

 //export function buildUIAndRunTest(controlToTest, testFunction, pageCss?, testDelay?) {
-export function buildUIAndRunTest<T extends view.View>(controlToTest: T, testFunction: (views: [T, page.Page]) => void, pageCss?) {
+export function buildUIAndRunTest<T extends View>(controlToTest: T, testFunction: (views: [T, Page]) => void, pageCss?) {
    clearPage();
    let newPage = getCurrentPage();

@@ -87,7 +87,7 @@ export function buildUIAndRunTest<T extends view.View>(controlToTest: T, testFun
    newPage.css = null;
 }

-export function buildUIWithWeakRefAndInteract<T extends view.View>(createFunc: () => T, interactWithViewFunc?: (view: T) => void, done?) {
+export function buildUIWithWeakRefAndInteract<T extends View>(createFunc: () => T, interactWithViewFunc?: (view: T) => void, done?) {
    clearPage();
    const page = getCurrentPage();
    const weakRef = new WeakRef(createFunc());
@@ -120,44 +120,45 @@ export function navigateToModuleAndRunTest(moduleName, context, testFunction) {
    testFunction(page);
 }

-export function navigate(pageFactory: () => page.Page, navigationContext?: any): page.Page {
+export function navigate(pageFactory: () => Page, navigationContext?: any): Page {
    let entry: frame.NavigationEntry = { create: pageFactory, animated: false, context: navigationContext, clearHistory: true };
    return navigateWithEntry(entry);
 }

-export function navigateWithHistory(pageFactory: () => page.Page, navigationContext?: any): page.Page {
+export function navigateWithHistory(pageFactory: () => Page, navigationContext?: any): Page {
    let entry: frame.NavigationEntry = { create: pageFactory, animated: false, context: navigationContext, clearHistory: false };
    return navigateWithEntry(entry);
 }

-export function navigateToModule(moduleName: string, context?: any): page.Page {
+export function navigateToModule(moduleName: string, context?: any): Page {
    let entry: frame.NavigationEntry = { moduleName: moduleName, context: context, animated: false, clearHistory: true };
    return navigateWithEntry(entry);
 }

-export function getCurrentPage(): page.Page {
+export function getCurrentPage(): Page {
    return frame.topmost().currentPage;
 }

-export function getClearCurrentPage(): page.Page {
+export function getClearCurrentPage(): Page {
    let page = frame.topmost().currentPage;
    page.style.backgroundColor = unsetValue;
    page.style.color = unsetValue;
    page.bindingContext = unsetValue;
    page.className = unsetValue;
    page.id = unsetValue;
+    page.css = '';
    return page;
 }

-export function waitUntilNavigatedFrom(oldPage: page.Page) {
+export function waitUntilNavigatedFrom(oldPage: Page) {
    TKUnit.waitUntilReady(() => getCurrentPage() && getCurrentPage() !== oldPage);
 }

-export function waitUntilLayoutReady(view: view.View): void {
+export function waitUntilLayoutReady(view: View): void {
    TKUnit.waitUntilReady(() => view.isLayoutValid);
 }

-export function navigateWithEntry(entry: frame.NavigationEntry): page.Page {
+export function navigateWithEntry(entry: frame.NavigationEntry): Page {
    let page = frame.resolvePageFromEntry(entry);
    entry.moduleName = null;
    entry.create = function () {
@@ -183,18 +184,18 @@ export function assertAreClose(actual: number, expected: number, message: string
    TKUnit.assertAreClose(actual, expected, delta, message);
 }

-export function assertViewColor(testView: view.View, hexColor: string) {
+export function assertViewColor(testView: View, hexColor: string) {
    TKUnit.assert(testView.style.color, "Color property not applied correctly. Style value is not defined.");
    TKUnit.assertEqual(testView.style.color.hex, hexColor, "color property");
 }

-export function assertViewBackgroundColor(testView: view.ViewBase, hexColor: string) {
+export function assertViewBackgroundColor(testView: ViewBase, hexColor: string) {
    TKUnit.assert(testView.style.backgroundColor, "Background color property not applied correctly. Style value is not defined.");
    TKUnit.assertEqual(testView.style.backgroundColor.hex, hexColor, "backgroundColor property");
 }

 export function forceGC() {
-    if (platform.device.os === platform.platformNames.ios) {
+    if (isIOS) {
        /* tslint:disable:no-unused-expression */
        // Could cause GC on the next call.
        new ArrayBuffer(4 * 1024 * 1024);
@@ -204,29 +205,515 @@ export function forceGC() {
    TKUnit.wait(0.001);
 }

-export function _generateFormattedString(): formattedStringModule.FormattedString {
-    let formattedString = new formattedStringModule.FormattedString();
-    let span: spanModule.Span;
+export function _generateFormattedString(): FormattedString {
+    let formattedString = new FormattedString();
+    let span: Span;

-    span = new spanModule.Span();
+    span = new Span();
    span.fontFamily = "serif";
    span.fontSize = 10;
    span.fontWeight = "bold";
-    span.color = new colorModule.Color("red");
-    span.backgroundColor = new colorModule.Color("blue");
+    span.color = new Color("red");
+    span.backgroundColor = new Color("blue");
    span.textDecoration = "line-through";
    span.text = "Formatted";
    formattedString.spans.push(span);

-    span = new spanModule.Span();
+    span = new Span();
    span.fontFamily = "sans-serif";
    span.fontSize = 20;
    span.fontStyle = "italic";
-    span.color = new colorModule.Color("green");
-    span.backgroundColor = new colorModule.Color("yellow");
+    span.color = new Color("green");
+    span.backgroundColor = new Color("yellow");
    span.textDecoration = "underline";
    span.text = "Text";
    formattedString.spans.push(span);

    return formattedString;
 }
+
+const props = _getProperties();
+const styleProps = _getStyleProperties();
+let setters: Map<string, any>;
+let cssSetters: Map<string, any>;
+let defaultNativeGetters: Map<string, (view) => any>;
+
+export function nativeView_recycling_test(createNew: () => View, createLayout?: () => LayoutBase, nativeGetters?: Map<string, (view) => any>, customSetters?: Map<string, any>) {
+    if (isIOS) {
+        // recycling not implemented yet.
+        return;
+    }
+    setupSetters();
+    const page = getClearCurrentPage();
+    let layout: LayoutBase = new FlexboxLayout();
+    if (createLayout) {
+        // This is done on purpose. We need the constructor of Flexbox
+        // to run otherwise some module fileds stays uninitialized.
+        layout = createLayout();
+    }
+
+    page.content = layout;
+
+    const first = createNew();
+    const test = createNew();
+
+    // Make sure we are not reusing a native views.
+    first.recycleNativeView = false;
+    test.recycleNativeView = false;
+
+    page.content = layout;
+
+    layout.addChild(test);
+
+    setValue(test.style, cssSetters);
+    setValue(test, setters, customSetters);
+    // Needed so we can reset formattedText
+    test["secure"] = false;
+
+    const nativeView = test.nativeView;
+    // Mark so we reuse the native views.
+    test.recycleNativeView = true;
+    layout.removeChild(test);
+    const newer = createNew();
+    newer.recycleNativeView = true;
+    layout.addChild(newer);
+    layout.addChild(first);
+
+    TKUnit.assertEqual(newer.nativeView, nativeView, "nativeView not reused.");
+    checkDefaults(newer, first, props, nativeGetters || defaultNativeGetters);
+    checkDefaults(newer, first, styleProps, nativeGetters || defaultNativeGetters);
+    layout.removeChild(newer);
+    layout.removeChild(first);
+}
+
+function checkDefaults(newer: View, first: View, props: Array<any>, nativeGetters: Map<string, (view) => any>): void {
+    props.forEach(prop => {
+        const name = (<any>prop).name;
+        if (nativeGetters.has(name)) {
+            const getter = nativeGetters.get(name);
+            TKUnit.assertDeepEqual(getter(newer), getter(first), name);
+        } else if (newer[prop.getDefault]) {
+            TKUnit.assertDeepEqual(newer[prop.getDefault](), first[prop.getDefault](), name);
+        } else if (newer[prop.setNative]) {
+            console.log(`Type: ${newer.typeName} has no getter for ${name} property.`)
+        }
+    });
+}
+
+function setValue(object: Object, setters: Map<string, any>, customSetters?: Map<string, any>): void {
+    setters.forEach((value1, key) => {
+        let value = customSetters && customSetters.has(key) ? customSetters.get(key) : value1;
+        const currentValue = object[key];
+        if (currentValue === value) {
+            if (value === 'horizontal' && key === 'orientation') {
+                // wrap-layout.orientation default value is 'horizontal'
+                value = 'vertical';
+            } else if (value === 2) {
+                value = 3;
+            }
+        }
+
+        object[key] = value;
+        const newValue = object[key];
+        TKUnit.assertNotEqual(newValue, currentValue, `${object} setting ${key} should change current value.`);
+    });
+}
+
+function setupSetters(): void {
+    if (setters) {
+        return;
+    }
+
+    setters = new Map<string, any>();
+    // view-base
+    setters.set('id', "someId");
+    setters.set('className', "someClassName");
+    setters.set('bindingContext', "someBindingContext");
+
+    // view
+    setters.set('automationText', "automationText");
+    setters.set('originX', 0.2);
+    setters.set('originY', 0.2);
+    setters.set('isEnabled', false);
+    setters.set('isUserInteractionEnabled', false);
+
+    // action-bar
+    setters.set('title', 'title');
+    setters.set('text', 'text');
+    setters.set('icon', '~/logo.png');
+    setters.set('visibility', 'collapse');
+
+    // activity-indicator
+    setters.set('busy', true);
+
+    // date-picker
+    setters.set('year', '2010');
+    setters.set('month', '2');
+    setters.set('day', '2');
+    setters.set('maxDate', '2100');
+    setters.set('minDate', '2000');
+    setters.set('date', new Date(2011, 3, 3));
+
+    // editable-text
+    setters.set('keyboardType', 'datetime');
+    setters.set('returnKeyType', 'done');
+    setters.set('editable', false);
+    setters.set('updateTextTrigger', 'focusLost');
+    setters.set('autocapitalizationType', 'words');
+    setters.set('autocorrect', true);
+    setters.set('hint', 'hint');
+    setters.set('maxLength', '10');
+
+    // html-view
+    setters.set('html', '<a></a>');
+
+    // image-view
+    setters.set('imageSource', '');
+    setters.set('src', '');
+    setters.set('loadMode', 'async');
+    setters.set('isLoading', true);
+    setters.set('stretch', 'none');
+
+    // layout-base
+    setters.set('clipToBounds', false);
+
+    // absolute-layout
+    setters.set('left', '20');
+    setters.set('top', '20');
+
+    // dock-layout
+    setters.set('dock', 'top');
+    setters.set('stretchLastChild', false);
+
+    // grid-layout props
+    setters.set('row', '1');
+    setters.set('rowSpan', '2');
+    setters.set('col', '1');
+    setters.set('colSpan', '2');
+
+    // stack-layout
+    setters.set('orientation', 'horizontal');
+
+    // wrap-layout
+    // custom orientation value
+    // setters.set('orientation', 'vertical');
+    setters.set('itemWidth', '50');
+    setters.set('itemHeight', '50');
+
+    // list-picker
+    setters.set('items', ['1', '2', '3']);
+    setters.set('selectedIndex', '1');
+
+    // list-view
+    setters.set('items', ['1', '2', '3']);
+    setters.set('itemTemplate', '<Label text="{{ $value }}" />');
+    setters.set('itemTemplates', '<template key="green"><Label text="{{ $value }}" style.backgroundColor="green" /></template><template key="red"><Label text="{{ $value }}" style.backgroundColor="red" /></template>');
+    setters.set('rowHeight', '50');
+
+    // page
+    setters.set('actionBarHidden', 'true');
+    setters.set('backgroundSpanUnderStatusBar', 'true');
+    setters.set('enableSwipeBackNavigation', 'false');
+
+    // progress
+    setters.set('value', '1');
+    setters.set('maxValue', '99');
+
+    // repeater
+    setters.set('items', ['1', '2', '3']);
+    setters.set('itemTemplate', '<Label text="{{ $value }}" />');
+    setters.set('itemsLayout', new StackLayout());
+    setters.set('rowHeight', '50');
+
+    // scroll-view
+    // custom orientation value
+    //setters.set('orientation', 'horizontal');
+
+    // search-bar
+    setters.set('textFieldHintColor', 'red');
+    setters.set('textFieldBackgroundColor', 'red');
+
+    // segmented-bar
+    // custom items property
+
+    // slider
+    setters.set('minValue', '5');
+
+    // switch
+    setters.set('checked', 'true');
+
+    // tab-view
+    // custom items property
+    setters.set('androidOffscreenTabLimit', '2');
+
+    // text-base
+    const formattedText = new FormattedString();
+    const span = new Span();
+    span.text = 'span';
+    formattedText.spans.push(span);
+    setters.set('formattedText', formattedText);
+
+    // text-base
+    setters.set('secure', 'true');
+
+    // time-picker
+    setters.set('minHour', 1);
+    setters.set('hour', 2);
+    setters.set('maxHour', 11);
+    setters.set('minMinute', 1);
+    setters.set('minute', 2);
+    setters.set('maxMinute', 11);
+    setters.set('minuteInterval', 2);
+    setters.set('time', new Date(2011, 2, 2, 3, 3, 3));
+
+    cssSetters = new Map<string, any>();
+
+    // style
+    cssSetters.set('rotate', '90');
+    cssSetters.set('scaleX', 2);
+    cssSetters.set('scaleY', 2);
+    cssSetters.set('translateX', 20);
+    cssSetters.set('translateY', 20);
+
+    cssSetters.set('clipPath', 'inset(100px 50px)');
+    cssSetters.set('color', 'red');
+    cssSetters.set('tintColor', 'green');
+    cssSetters.set('placeholderColor', 'green');
+
+    cssSetters.set('backgroundColor', 'red');
+    cssSetters.set('backgroundImage', '~/logo.png');
+    cssSetters.set('backgroundRepeat', 'repeat');
+    cssSetters.set('backgroundSize', '60px 120px');
+    cssSetters.set('backgroundPosition', 'center');
+    cssSetters.set('borderColor', 'blue');
+    cssSetters.set('borderTopColor', 'green');
+    cssSetters.set('borderRightColor', 'green');
+    cssSetters.set('borderBottomColor', 'green');
+    cssSetters.set('borderLeftColor', 'green');
+    cssSetters.set('borderWidth', '10px');
+    cssSetters.set('borderTopWidth', '5px');
+    cssSetters.set('borderRightWidth', '5px');
+    cssSetters.set('borderBottomWidth', '5px');
+    cssSetters.set('borderLeftWidth', '5px');
+    cssSetters.set('borderRadius', '10px');
+    cssSetters.set('borderTopLeftRadius', '5px');
+    cssSetters.set('borderTopRightRadius', '5px');
+    cssSetters.set('borderBottomRightRadius', '5px');
+    cssSetters.set('borderBottomLeftRadius', '5px');
+
+    cssSetters.set('fontSize', '20');
+    cssSetters.set('fontFamily', 'monospace');
+    cssSetters.set('fontStyle', 'italic');
+    cssSetters.set('fontWeight', '100');
+    cssSetters.set('font', 'italic 2 "Open Sans", sans-serif');
+
+    // zIndex on android is not what you think...
+    // cssSetters.set('zIndex', '2');
+    cssSetters.set('opacity', '0.5');
+    // already set through view properties.
+    // cssSetters.set('visibility', 'collapse');
+
+    cssSetters.set('letterSpacing', '2');
+    cssSetters.set('textAlignment', 'center');
+    cssSetters.set('textDecoration', 'underline');
+    cssSetters.set('textTransform', 'capitalize');
+    cssSetters.set('whiteSpace', 'normal');
+
+    cssSetters.set('minWidth', 50);
+    cssSetters.set('minHeight', 50);
+    cssSetters.set('width', 100);
+    cssSetters.set('height', 100);
+    cssSetters.set('margin', '25');
+    cssSetters.set('marginLeft', '30px');
+    cssSetters.set('marginTop', '30px');
+    cssSetters.set('marginRight', '30px');
+    cssSetters.set('marginBottom', '30px');
+    cssSetters.set('padding', '25');
+    cssSetters.set('paddingLeft', '30px');
+    cssSetters.set('paddingTop', '30px');
+    cssSetters.set('paddingRight', '30px');
+    cssSetters.set('paddingBottom', '30px');
+    cssSetters.set('horizontalAlignment', 'center');
+    cssSetters.set('verticalAlignment', 'center');
+
+    cssSetters.set('transform', 'translate(5, 10), scale(1.2, 1.2), rotate(45)');
+
+    // TabView-specific props
+    cssSetters.set('tabTextColor', 'red');
+    cssSetters.set('tabBackgroundColor', 'red');
+    cssSetters.set('selectedTabTextColor', 'red');
+    cssSetters.set('androidSelectedTabHighlightColor', 'red');
+
+    // ListView-specific props 
+    cssSetters.set('separatorColor', 'red');
+
+    // SegmentedBar-specific props
+    cssSetters.set('selectedBackgroundColor', 'red');
+
+    // Page-specific props 
+    cssSetters.set('statusBarStyle', 'light');
+    cssSetters.set('androidStatusBarBackground', 'red');
+
+    // Flexbox-layout props
+    cssSetters.set('flexDirection', 'column');
+    cssSetters.set('flexWrap', 'wrap');
+    cssSetters.set('justifyContent', 'center');
+    cssSetters.set('alignItems', 'center');
+    cssSetters.set('alignContent', 'center');
+    cssSetters.set('order', '2');
+    cssSetters.set('flexGrow', '1');
+    cssSetters.set('flexShrink', '0');
+    cssSetters.set('flexWrapBefore', 'true');
+    cssSetters.set('alignSelf', 'center');
+    cssSetters.set('flexFlow', 'row-reverse wrap');
+    cssSetters.set('flex', '2 0.2');
+
+    const nativeGetters = defaultNativeGetters = new Map<string, (view) => any>();
+
+    nativeGetters.set("marginLeft", (v: { nativeView: android.view.View }) => {
+        const lp = v.nativeView.getLayoutParams();
+        return (lp instanceof android.view.ViewGroup.MarginLayoutParams) ? lp.leftMargin : 0;
+    });
+
+    nativeGetters.set("marginTop", (v: { nativeView: android.view.View }) => {
+        const lp = v.nativeView.getLayoutParams();
+        return (lp instanceof android.view.ViewGroup.MarginLayoutParams) ? lp.topMargin : 0;
+    });
+
+    nativeGetters.set("marginRight", (v: { nativeView: android.view.View }) => {
+        const lp = v.nativeView.getLayoutParams();
+        return (lp instanceof android.view.ViewGroup.MarginLayoutParams) ? lp.rightMargin : 0;
+    });
+
+    nativeGetters.set("marginBottom", (v: { nativeView: android.view.View }) => {
+        const lp = v.nativeView.getLayoutParams();
+        return (lp instanceof android.view.ViewGroup.MarginLayoutParams) ? lp.bottomMargin : 0;
+    });
+
+    nativeGetters.set("col", (v: { nativeView: android.view.View }) => {
+        const lp = v.nativeView.getLayoutParams();
+        return (lp instanceof org.nativescript.widgets.CommonLayoutParams) ? lp.column : 0;
+    });
+
+    nativeGetters.set("colSpan", (v: { nativeView: android.view.View }) => {
+        const lp = v.nativeView.getLayoutParams();
+        return (lp instanceof org.nativescript.widgets.CommonLayoutParams) ? lp.columnSpan : 1;
+    });
+
+    nativeGetters.set("row", (v: { nativeView: android.view.View }) => {
+        const lp = v.nativeView.getLayoutParams();
+        return (lp instanceof org.nativescript.widgets.CommonLayoutParams) ? lp.column : 0;
+    });
+
+    nativeGetters.set("rowSpan", (v: { nativeView: android.view.View }) => {
+        const lp = v.nativeView.getLayoutParams();
+        return (lp instanceof org.nativescript.widgets.CommonLayoutParams) ? lp.columnSpan : 1;
+    });
+
+    nativeGetters.set("width", (v: { nativeView: android.view.View }) => {
+        const native = v.nativeView;
+        if (native.getParent() instanceof org.nativescript.widgets.FlexboxLayout) {
+            return -2;
+        }
+        return native.getLayoutParams().width;
+    });
+    nativeGetters.set("height", (v: { nativeView: android.view.View }) => {
+        const native = v.nativeView;
+        if (native.getParent() instanceof org.nativescript.widgets.FlexboxLayout) {
+            return -2;
+        }
+        return native.getLayoutParams().height;
+    });
+
+    nativeGetters.set("paddingLeft", (v: { nativeView: android.view.View }) => v.nativeView.getPaddingLeft());
+    nativeGetters.set("paddingTop", (v: { nativeView: android.view.View }) => v.nativeView.getPaddingTop());
+    nativeGetters.set("paddingRight", (v: { nativeView: android.view.View }) => v.nativeView.getPaddingRight());
+    nativeGetters.set("paddingBottom", (v: { nativeView: android.view.View }) => v.nativeView.getPaddingBottom());
+
+    nativeGetters.set("minWidth", (v: { nativeView: android.view.View }) => v.nativeView.getMinimumWidth());
+    nativeGetters.set("minHeight", (v: { nativeView: android.view.View }) => v.nativeView.getMinimumHeight());
+
+    nativeGetters.set("scaleX", (v: { nativeView: android.view.View }) => v.nativeView.getScaleX());
+    nativeGetters.set("scaleY", (v: { nativeView: android.view.View }) => v.nativeView.getScaleY());
+    nativeGetters.set("translateX", (v: { nativeView: android.view.View }) => v.nativeView.getTranslationX());
+    nativeGetters.set("translateY", (v: { nativeView: android.view.View }) => v.nativeView.getTranslationY());
+    nativeGetters.set("isEnabled", (v: { nativeView: android.view.View }) => v.nativeView.isEnabled());
+    nativeGetters.set("rotate", (v: { nativeView: android.view.View }) => v.nativeView.getRotation());
+
+    nativeGetters.set("order", (v: { nativeView: android.view.View }) => {
+        const lp = v.nativeView.getLayoutParams();
+        return (lp instanceof org.nativescript.widgets.FlexboxLayout.LayoutParams) ? lp.order : 1;
+    });
+
+    nativeGetters.set("flexGrow", (v: { nativeView: android.view.View }) => {
+        const lp = v.nativeView.getLayoutParams();
+        return (lp instanceof org.nativescript.widgets.FlexboxLayout.LayoutParams) ? lp.flexGrow : 0;
+    });
+
+    nativeGetters.set("flexShrink", (v: { nativeView: android.view.View }) => {
+        const lp = v.nativeView.getLayoutParams();
+        return (lp instanceof org.nativescript.widgets.FlexboxLayout.LayoutParams) ? lp.flexShrink : 1;
+    });
+
+    nativeGetters.set("flexWrapBefore", (v: { nativeView: android.view.View }) => {
+        const lp = v.nativeView.getLayoutParams();
+        return (lp instanceof org.nativescript.widgets.FlexboxLayout.LayoutParams) ? lp.wrapBefore : false;
+    });
+
+    nativeGetters.set("alignSelf", (v: { nativeView: android.view.View }) => {
+        const lp = v.nativeView.getLayoutParams();
+        return (lp instanceof org.nativescript.widgets.FlexboxLayout.LayoutParams) ? lp.alignSelf : "auto";
+    });
+
+    nativeGetters.set("formattedText", (v: { nativeView: android.view.View }) => {
+        const nativeView = v.nativeView;
+        return (nativeView instanceof android.widget.TextView) ? nativeView.getText().toString() : undefined;
+    });
+
+    nativeGetters.set("isUserInteractionEnabled", (v) => true);
+
+    nativeGetters.set("orientation", (v: { nativeView: android.view.View }) => {
+        const nativeView = v.nativeView;
+        if (nativeView instanceof org.nativescript.widgets.StackLayout) {
+            return nativeView.getOrientation();
+        } else if (nativeView instanceof org.nativescript.widgets.WrapLayout) {
+            return nativeView.getOrientation();
+        }
+    });
+
+    nativeGetters.set("textTransform", (v: { nativeView: android.view.View }) => {
+        const nativeView = v.nativeView;
+        if (nativeView instanceof android.widget.TextView) {
+            return nativeView.getTransformationMethod();
+        }
+    });
+
+    nativeGetters.set("editable", (v: { nativeView: android.view.View }) => {
+        const nativeView = v.nativeView;
+        if (nativeView instanceof android.widget.TextView) {
+            return nativeView.getKeyListener();
+        }
+    });
+
+    nativeGetters.set("maxLength", (v: { nativeView: android.view.View }) => {
+        const nativeView = v.nativeView;
+        if (nativeView instanceof android.widget.TextView) {
+            return nativeView.getFilters();
+        }
+    });
+
+    nativeGetters.set("whiteSpace", (v: { nativeView: android.view.View }) => {
+        const nativeView = v.nativeView;
+        if (nativeView instanceof android.widget.TextView) {
+            return { lineCount: nativeView.getLineCount(), ellipsize: nativeView.getEllipsize() };
+        }
+    });
+
+    nativeGetters.set("text", (v: { nativeView: android.view.View }) => {
+        const nativeView = v.nativeView;
+        if (nativeView instanceof android.widget.TextView) {
+            const text = nativeView.getText();
+            return text ? text.toString() : text;
+        }
+    });
+}
--- a/tests/app/ui/html-view/html-view-tests.ts
+++ b/tests/app/ui/html-view/html-view-tests.ts
@@ -6,6 +6,10 @@ import * as types from "tns-core-modules/utils/types";
 import * as htmlViewModule from "tns-core-modules/ui/html-view";
 // << htmlview-require

+export function test_recycling() {
+    helper.nativeView_recycling_test(() => new htmlViewModule.HtmlView());
+}
+
 var _createHtmlViewFunc = function (): htmlViewModule.HtmlView {
    // >> htmlview-create
    var htmlView = new htmlViewModule.HtmlView();
--- a/tests/app/ui/image/image-tests.ts
+++ b/tests/app/ui/image/image-tests.ts
@@ -21,6 +21,10 @@ import * as backgroundModule from "tns-core-modules/ui/styling/background";
 import { android as androidApp } from "tns-core-modules/application";
 const imagePath = "~/logo.png";

+export function test_recycling() {
+    helper.nativeView_recycling_test(() => new Image());
+}
+
 if (isAndroid) {
    (<any>backgroundModule).initImageCache(androidApp.startActivity, (<any>backgroundModule).CacheMode.memory); // use memory cache only.
 }
--- a/tests/app/ui/label/label-tests.ts
+++ b/tests/app/ui/label/label-tests.ts
@@ -29,6 +29,10 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
        return label;
    }

+    public test_recycling() {
+        helper.nativeView_recycling_test(() => new LabelModule.Label());
+    }
+
    public test_Label_Members() {
        const label = new LabelModule.Label();
        TKUnit.assert(types.isDefined(label.text), "Label.text is not defined");
--- a/tests/app/ui/layouts/absolute-layout-tests.ts
+++ b/tests/app/ui/layouts/absolute-layout-tests.ts
@@ -4,6 +4,7 @@ import * as labelModule from "tns-core-modules/ui/label";
 import * as colorModule from "tns-core-modules/color";
 import * as layoutHelper from "./layout-helper";
 import * as commonTests from "./common-layout-tests";
+import * as helper from "../helper";

 // >> absolute-layout-require
 import * as absoluteLayoutModule from "tns-core-modules/ui/layouts/absolute-layout";
@@ -15,6 +16,14 @@ export class AbsoluteLayoutTest extends testModule.UITest<absoluteLayoutModule.A
        return new absoluteLayoutModule.AbsoluteLayout();
    }

+    public test_recycling() {
+        helper.nativeView_recycling_test(() => new absoluteLayoutModule.AbsoluteLayout());
+    }
+
+    public test_item_recycling() {
+        helper.nativeView_recycling_test(() => new labelModule.Label(), () => new absoluteLayoutModule.AbsoluteLayout());
+    }
+
    public snippet() {

        // >> absolute-layout-populating
--- a/tests/app/ui/layouts/dock-layout-tests.ts
+++ b/tests/app/ui/layouts/dock-layout-tests.ts
@@ -4,6 +4,7 @@ import * as TKUnit from "../../TKUnit";
 import * as helper from "./layout-helper";
 import * as testModule from "../../ui-test";
 import * as commonTests from "./common-layout-tests";
+import * as testHelper from "../helper";

 // >> dock-layout-require
 import * as dockModule from "tns-core-modules/ui/layouts/dock-layout";
@@ -22,6 +23,14 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
        return rootLayout;
    }

+    public test_recycling() {
+        testHelper.nativeView_recycling_test(() => new DockLayout());
+    }
+
+    public test_item_recycling() {
+        testHelper.nativeView_recycling_test(() => new button.Button(), () => new DockLayout());
+    }
+
    public test_stretchLastChild_DefaultValue() {
        TKUnit.assertEqual(this.testView.stretchLastChild, true, "Default stretchLastChild.");
    }
--- a/tests/app/ui/layouts/flexbox-layout-tests.ts
+++ b/tests/app/ui/layouts/flexbox-layout-tests.ts
@@ -2,6 +2,8 @@
 import { FlexboxLayout } from "tns-core-modules/ui/layouts/flexbox-layout";
 // << flexbox-layout-require

+import { Button } from "tns-core-modules/ui/button";
+
 export namespace FlexDirection {
    export const ROW: "row" = "row";
    export const ROW_REVERSE: "row-reverse" = "row-reverse";
@@ -49,12 +51,12 @@ export namespace AlignSelf {
    export const STRETCH: "stretch" = "stretch";
 }

-import {View, unsetValue, Length, PercentLength} from "tns-core-modules/ui/core/view";
-import {Label} from "tns-core-modules/ui/label";
+import { View, unsetValue, Length, PercentLength } from "tns-core-modules/ui/core/view";
+import { Label } from "tns-core-modules/ui/label";
 import * as TKUnit from "../../TKUnit";
 import * as helper from "../helper";
-import {layout} from "tns-core-modules/utils/utils";
-import {parse} from "tns-core-modules/ui/builder";
+import { layout } from "tns-core-modules/utils/utils";
+import { parse } from "tns-core-modules/ui/builder";

 // TODO: Test the flexbox-layout-page.xml can be loaded and displayed

@@ -85,7 +87,7 @@ function commonAncestor(view1: View, view2: View): View {
            set.add(view2);
            view2 = <View>view2.parent;
        }
-    } while(view1 || view2);
+    } while (view1 || view2);
    return null;
 }

@@ -106,7 +108,7 @@ function bounds(view: View): Bounds {
 */
 function boundsToAncestor(child: View, ancestor: View = null) {
    let currentBounds = bounds(child);
-    while(child && child !== ancestor) {
+    while (child && child !== ancestor) {
        child = <View>child.parent;
        let childBounds = bounds(child);
        currentBounds.left += childBounds.left;
@@ -239,7 +241,8 @@ function test<U extends { root: View }>(ui: () => U, setup: (ui: U) => void, tes

 let getViews = (template: string) => {
    let root = parse(template);
-    return { root,
+    return {
+        root,
        flexbox: root.getViewById("flexbox") as FlexboxLayout,
        text1: root.getViewById("text1") as Label,
        text2: root.getViewById("text2") as Label,
@@ -262,10 +265,18 @@ let activity_flex_wrap = () => getViews(
    </FlexboxLayout>`
 );

+export function test_recycling() {
+    helper.nativeView_recycling_test(() => new FlexboxLayout());
+}
+
+export function test_item_recycling() {
+    helper.nativeView_recycling_test(() => new Button(), () => new FlexboxLayout());
+}
+
 export const testFlexWrap_wrap = test(
    activity_flex_wrap,
-    ({flexbox}) => flexbox.flexWrap = FlexWrap.WRAP,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexWrap = FlexWrap.WRAP,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text1, flexbox);
        isRightOf(text2, text1);
@@ -279,8 +290,8 @@ export const testFlexWrap_wrap = test(

 export const testFlexWrap_nowrap = test(
    activity_flex_wrap,
-    ({flexbox}) => flexbox.flexWrap = FlexWrap.NOWRAP,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexWrap = FlexWrap.NOWRAP,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text1, flexbox);
        isRightOf(text2, text1);
@@ -293,8 +304,8 @@ export const testFlexWrap_nowrap = test(

 export const testFlexWrap_wrap_reverse = test(
    activity_flex_wrap,
-    ({flexbox}) => flexbox.flexWrap = FlexWrap.WRAP_REVERSE,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexWrap = FlexWrap.WRAP_REVERSE,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isRightOf(text2, text1);
        isAbove(text3, text1);
@@ -306,8 +317,8 @@ export const testFlexWrap_wrap_reverse = test(

 export const testFlexWrap_wrap_flexDirection_column = test(
    activity_flex_wrap,
-    ({flexbox}) => flexbox.flexDirection = FlexDirection.COLUMN,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text1, flexbox);
        isBelow(text2, text1);
@@ -321,10 +332,10 @@ export const testFlexWrap_wrap_flexDirection_column = test(

 export const testFlexWrap_nowrap_flexDirection_column = test(
    activity_flex_wrap,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.flexDirection = FlexDirection.COLUMN;
        flexbox.flexWrap = FlexWrap.NOWRAP;
-    }, ({root, flexbox, text1, text2, text3}) => {
+    }, ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text1, flexbox);
        isBelow(text2, text1);
@@ -337,10 +348,10 @@ export const testFlexWrap_nowrap_flexDirection_column = test(

 export const testFlexWrap_wrap_reverse_flexDirection_column = test(
    activity_flex_wrap,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.flexDirection = FlexDirection.COLUMN;
        flexbox.flexWrap = FlexWrap.WRAP_REVERSE;
-    }, ({root, flexbox, text1, text2, text3}) => {
+    }, ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isRightAlignedWith(text1, flexbox);
        isBelow(text2, text1);
@@ -369,7 +380,7 @@ let activity_flex_item_match_parent = () => getViews(
 export const testFlexItem_match_parent = test(
    activity_flex_item_match_parent,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        widthEqual(text1, flexbox);
        widthEqual(text2, flexbox);
        widthEqual(text3, flexbox);
@@ -395,7 +406,7 @@ let activity_flex_item_match_parent_direction_column = () => getViews(
 export const testFlexItem_match_parent_flexDirection_column = test(
    activity_flex_item_match_parent_direction_column,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        heightEqual(text1, flexbox);
        heightEqual(text2, flexbox);
        heightEqual(text3, flexbox);
@@ -419,7 +430,7 @@ let activity_flexbox_wrap_content = () => getViews(
 export const testFlexboxLayout_wrapContent = test(
    activity_flexbox_wrap_content,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text1, flexbox);
        isBottomAlignedWith(text1, flexbox);
@@ -453,7 +464,7 @@ let activity_flexbox_wrapped_with_scrollview = () => getViews(
 export const testFlexboxLayout_wrapped_with_ScrollView = test(
    activity_flexbox_wrapped_with_scrollview,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text1, flexbox);

@@ -481,7 +492,7 @@ let activity_flexbox_wrapped_with_horizontalscrollview = () => getViews(
 export const testFlexboxLayout_wrapped_with_HorizontalScrollView = test(
    activity_flexbox_wrapped_with_horizontalscrollview,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text1, flexbox);

@@ -510,7 +521,7 @@ let activity_justify_content_test = () => getViews(
 export const testJustifyContent_flexStart = test(
    activity_justify_content_test,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isRightOf(text2, text1);
@@ -531,7 +542,7 @@ let activity_justify_content_with_parent_padding = () => getViews(
 export const testJustifyContent_flexStart_withParentPadding = test(
    activity_justify_content_with_parent_padding,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isRightOf(text2, text1);
        isRightOf(text3, text2);
        equal(left(text1), Length.toDevicePixels(flexbox.style.paddingLeft, 0), `Expected ${text1}.left to equal ${flexbox}.paddingLeft`);
@@ -541,8 +552,8 @@ export const testJustifyContent_flexStart_withParentPadding = test(

 export const testJustifyContent_flexEnd = test(
    activity_justify_content_test,
-    ({flexbox}) => flexbox.justifyContent = JustifyContent.FLEX_END,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.justifyContent = JustifyContent.FLEX_END,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text3, flexbox);
        isRightAlignedWith(text3, flexbox);
        isLeftOf(text2, text3);
@@ -552,8 +563,8 @@ export const testJustifyContent_flexEnd = test(

 export const testJustifyContent_flexEnd_withParentPadding = test(
    activity_justify_content_with_parent_padding,
-    ({flexbox}) => flexbox.justifyContent = JustifyContent.FLEX_END,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.justifyContent = JustifyContent.FLEX_END,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftOf(text2, text3);
        isLeftOf(text1, text2);
        closeEnough(width(flexbox) - right(text3), Length.toDevicePixels(flexbox.style.paddingRight, 0));
@@ -563,8 +574,8 @@ export const testJustifyContent_flexEnd_withParentPadding = test(

 export const testJustifyContent_center = test(
    activity_justify_content_test,
-    ({flexbox}) => flexbox.justifyContent = JustifyContent.CENTER,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.justifyContent = JustifyContent.CENTER,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isRightOf(text2, text1);
        isTopAlignedWith(text2, flexbox);
@@ -580,8 +591,8 @@ export const testJustifyContent_center = test(

 export const testJustifyContent_center_withParentPadding = test(
    activity_justify_content_with_parent_padding,
-    ({flexbox}) => flexbox.justifyContent = JustifyContent.CENTER,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.justifyContent = JustifyContent.CENTER,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isRightOf(text2, text1);
        isRightOf(text3, text2);
        let space = width(flexbox) - width(text1) - width(text2) - width(text3) - Length.toDevicePixels(flexbox.style.paddingLeft, 0) - Length.toDevicePixels(flexbox.style.paddingRight, 0);
@@ -593,8 +604,8 @@ export const testJustifyContent_center_withParentPadding = test(

 export const testJustifyContent_spaceBetween = test(
    activity_justify_content_test,
-    ({flexbox}) => flexbox.justifyContent = JustifyContent.SPACE_BETWEEN,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.justifyContent = JustifyContent.SPACE_BETWEEN,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text2, flexbox);
@@ -609,11 +620,11 @@ export const testJustifyContent_spaceBetween = test(

 export const testJustifyContent_spaceBetween_withPadding = test(
    activity_justify_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.justifyContent = JustifyContent.SPACE_BETWEEN;
        flexbox.style.padding = padding;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        let space = width(flexbox) - width(text1) - width(text2) - width(text3) - dipToDp(padding) * 2;
        space = space / 2;
        closeEnough(left(text1), dipToDp(padding));
@@ -625,8 +636,8 @@ export const testJustifyContent_spaceBetween_withPadding = test(

 export const testJustifyContent_spaceAround = test(
    activity_justify_content_test,
-    ({flexbox}) => flexbox.justifyContent = JustifyContent.SPACE_AROUND,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.justifyContent = JustifyContent.SPACE_AROUND,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isTopAlignedWith(text2, flexbox);
        isTopAlignedWith(text3, flexbox);
@@ -646,11 +657,11 @@ const padding: any = 40;

 export const testJustifyContent_spaceAround_withPadding = test(
    activity_justify_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.justifyContent = JustifyContent.SPACE_AROUND;
        flexbox.style.padding = padding;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        let space = width(flexbox) - width(text1) - width(text2) - width(text3) - dipToDp(padding) * 2;
        space = space / 6; // Divide by the number of children * 2
        check(space - 1 <= left(text1) - dipToDp(padding) && left(text1) - dipToDp(padding) <= space + 1);
@@ -664,8 +675,8 @@ export const testJustifyContent_spaceAround_withPadding = test(

 export const testJustifyContent_flexStart_flexDirection_column = test(
    activity_justify_content_test,
-    ({flexbox}) => flexbox.flexDirection = FlexDirection.COLUMN,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isBelow(text2, text1);
@@ -677,11 +688,11 @@ export const testJustifyContent_flexStart_flexDirection_column = test(

 export const testJustifyContent_flexEnd_flexDirection_column = test(
    activity_justify_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.justifyContent = JustifyContent.FLEX_END;
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isBottomAlignedWith(text3, flexbox);
        isRightAlignedWith(text3, flexbox);
        isAbove(text2, text3);
@@ -691,11 +702,11 @@ export const testJustifyContent_flexEnd_flexDirection_column = test(

 export const testJustifyContent_center_flexDirection_column = test(
    activity_justify_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.justifyContent = JustifyContent.CENTER;
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isBelow(text2, text1);
        isLeftAlignedWith(text2, flexbox);
@@ -711,11 +722,11 @@ export const testJustifyContent_center_flexDirection_column = test(

 export const testJustifyContent_spaceBetween_flexDirection_column = test(
    activity_justify_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.justifyContent = JustifyContent.SPACE_BETWEEN;
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isLeftAlignedWith(text2, flexbox);
@@ -731,12 +742,12 @@ export const testJustifyContent_spaceBetween_flexDirection_column = test(

 export const testJustifyContent_spaceBetween_flexDirection_column_withPadding = test(
    activity_justify_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.justifyContent = JustifyContent.SPACE_BETWEEN;
        flexbox.flexDirection = FlexDirection.COLUMN;
        flexbox.style.padding = padding;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        let space = height(flexbox) - height(text1) - height(text2) - height(text3) - dipToDp(padding) * 2;
        space = space / 2;
        closeEnough(top(text1), dipToDp(padding));
@@ -748,11 +759,11 @@ export const testJustifyContent_spaceBetween_flexDirection_column_withPadding =

 export const testJustifyContent_spaceAround_flexDirection_column = test(
    activity_justify_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.justifyContent = JustifyContent.SPACE_AROUND
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isLeftAlignedWith(text2, flexbox);
        isLeftAlignedWith(text3, flexbox);
@@ -770,12 +781,12 @@ export const testJustifyContent_spaceAround_flexDirection_column = test(

 export const testJustifyContent_spaceAround_flexDirection_column_withPadding = test(
    activity_justify_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.justifyContent = JustifyContent.SPACE_AROUND;
        flexbox.flexDirection = FlexDirection.COLUMN;
        flexbox.style.padding = padding;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        let space = height(flexbox) - height(text1) - height(text2) - height(text3) - dipToDp(padding) * 2;
        space = space / 6; // Divide by the number of children * 2
        check(space - 1 <= top(text1) - dipToDp(padding) && top(text1) - dipToDp(padding) <= space + 1);
@@ -788,7 +799,7 @@ export const testJustifyContent_spaceAround_flexDirection_column_withPadding = t
 );

 let activity_flex_grow_test = () => getViews(
-        `<FlexboxLayout id="flexbox" width="100%" height="100%" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
+    `<FlexboxLayout id="flexbox" width="100%" height="100%" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
            <Label id="text1" width="60" height="60" text="1" backgroundColor="red" />
            <Label id="text2" width="60" height="60" text="2" backgroundColor="green" />
            <Label id="text3" width="60" height="60" text="3" backgroundColor="blue" flexGrow="1" />
@@ -798,7 +809,7 @@ let activity_flex_grow_test = () => getViews(
 export const testFlexGrow_withExactParentLength = test(
    activity_flex_grow_test,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text2, flexbox);
@@ -813,8 +824,8 @@ export const testFlexGrow_withExactParentLength = test(

 export const testFlexGrow_withExactParentLength_flexDirection_column = test(
    activity_flex_grow_test,
-    ({flexbox}) => flexbox.flexDirection = FlexDirection.COLUMN,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isLeftAlignedWith(text2, flexbox);
@@ -830,8 +841,8 @@ export const testFlexGrow_withExactParentLength_flexDirection_column = test(

 export const testFlexGrow_including_view_gone = test(
    activity_flex_grow_test,
-    ({flexbox, text2}) => text2.visibility = "collapse",
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox, text2 }) => text2.visibility = "collapse",
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);

@@ -854,12 +865,12 @@ let activity_align_content_test = () => getViews(
 export const testAlignContent_stretch = test(
    activity_align_content_test,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text2, flexbox);
-        isRightOf(text2,text1);
-        
+        isRightOf(text2, text1);
+
        isLeftAlignedWith(text3, flexbox);
        isBelow(text3, text1);
        isBelow(text3, text2);
@@ -870,8 +881,8 @@ export const testAlignContent_stretch = test(

 export const testAlignContent_flexStart = test(
    activity_align_content_test,
-    ({flexbox}) => flexbox.alignContent = AlignContent.FLEX_START,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.alignContent = AlignContent.FLEX_START,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text2, flexbox);
@@ -887,8 +898,8 @@ export const testAlignContent_flexStart = test(

 export const testAlignContent_flexEnd = test(
    activity_align_content_test,
-    ({flexbox}) => flexbox.alignContent = AlignContent.FLEX_END,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.alignContent = AlignContent.FLEX_END,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text3, flexbox);
        isBottomAlignedWith(text3, flexbox);
        isAbove(text1, text3);
@@ -901,11 +912,11 @@ export const testAlignContent_flexEnd = test(

 export const testAlignContent_flexEnd_parentPadding = test(
    activity_align_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.alignContent = AlignContent.FLEX_END;
        flexbox.style.padding = "32";
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isAbove(text1, text3);
        isAbove(text1, text3);
        isAbove(text2, text3);
@@ -916,12 +927,12 @@ export const testAlignContent_flexEnd_parentPadding = test(

 export const testAlignContent_flexEnd_parentPadding_column = test(
    activity_align_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.alignContent = AlignContent.FLEX_END;
        flexbox.flexDirection = FlexDirection.COLUMN;
        flexbox.style.padding = "32";
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftOf(text1, text3);
        isLeftOf(text2, text3);

@@ -932,8 +943,8 @@ export const testAlignContent_flexEnd_parentPadding_column = test(

 export const testAlignContent_center = test(
    activity_align_content_test,
-    ({flexbox}) => flexbox.alignContent = AlignContent.CENTER,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.alignContent = AlignContent.CENTER,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isRightOf(text2, text1);
        isBelow(text3, text1);
@@ -950,8 +961,8 @@ export const testAlignContent_center = test(

 export const testAlignContent_spaceBetween = test(
    activity_align_content_test,
-    ({flexbox}) => flexbox.alignContent = AlignContent.SPACE_BETWEEN,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.alignContent = AlignContent.SPACE_BETWEEN,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text1, flexbox);
        isRightOf(text2, text1);
@@ -964,8 +975,8 @@ export const testAlignContent_spaceBetween = test(

 export const testAlignContent_spaceBetween_withPadding = test(
    activity_align_content_test,
-    ({flexbox}) => flexbox.alignContent = AlignContent.SPACE_BETWEEN,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.alignContent = AlignContent.SPACE_BETWEEN,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text1, flexbox);
        isRightOf(text2, text1);
@@ -977,8 +988,8 @@ export const testAlignContent_spaceBetween_withPadding = test(

 export const testAlignContent_spaceAround = test(
    activity_align_content_test,
-    ({flexbox}) => flexbox.alignContent = AlignContent.SPACE_AROUND,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.alignContent = AlignContent.SPACE_AROUND,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isRightOf(text2, text1);
        isLeftAlignedWith(text3, flexbox);
@@ -996,11 +1007,11 @@ export const testAlignContent_spaceAround = test(

 export const testAlignContent_stretch_parentWrapContent = test(
    activity_align_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.height = unsetValue; // TODO: Check that "NaN" is auto-ish
        flexbox.verticalAlignment = "top";
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text2, flexbox);
@@ -1017,8 +1028,8 @@ export const testAlignContent_stretch_parentWrapContent = test(

 export const testAlignContent_stretch_flexDirection_column = test(
    activity_align_content_test,
-    ({flexbox}) => flexbox.flexDirection = FlexDirection.COLUMN,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isLeftAlignedWith(text2, flexbox);
@@ -1035,11 +1046,11 @@ export const testAlignContent_stretch_flexDirection_column = test(

 export const testAlignContent_flexStart_flexDirection_column = test(
    activity_align_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.alignContent = AlignContent.FLEX_START;
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isLeftAlignedWith(text2, flexbox);
@@ -1055,11 +1066,11 @@ export const testAlignContent_flexStart_flexDirection_column = test(

 export const testAlignContent_flexEnd_flexDirection_column = test(
    activity_align_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.alignContent = AlignContent.FLEX_END;
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isRightAlignedWith(text3, flexbox);
        isTopAlignedWith(text3, flexbox);
        isLeftOf(text1, text3);
@@ -1072,11 +1083,11 @@ export const testAlignContent_flexEnd_flexDirection_column = test(

 export const testAlignContent_center_flexDirection_column = test(
    activity_align_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.alignContent = AlignContent.CENTER;
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isBelow(text2, text1);
        isRightOf(text3, text1);
@@ -1093,11 +1104,11 @@ export const testAlignContent_center_flexDirection_column = test(

 export const testAlignContent_spaceBetween_flexDirection_column = test(
    activity_align_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.alignContent = AlignContent.SPACE_BETWEEN;
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text1, flexbox);
        isBelow(text2, text1);
@@ -1109,11 +1120,11 @@ export const testAlignContent_spaceBetween_flexDirection_column = test(

 export const testAlignContent_spaceAround_flexDirection_column = test(
    activity_align_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.alignContent = AlignContent.SPACE_AROUND;
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isBelow(text2, text1);
        isTopAlignedWith(text3, flexbox);
@@ -1130,12 +1141,12 @@ export const testAlignContent_spaceAround_flexDirection_column = test(

 export const testAlignContent_stretch_parentWrapContent_flexDirection_column = test(
    activity_align_content_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.width = unsetValue; // TODO: Check default is Number.NaN
        flexbox.horizontalAlignment = "left";
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isLeftAlignedWith(text2, flexbox);
@@ -1160,7 +1171,7 @@ let activity_stretch_test = () => getViews(
 export const testAlignItems_stretch = test(
    activity_stretch_test,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text2, flexbox);
@@ -1187,7 +1198,7 @@ let activity_align_self_stretch_test = () => getViews(
 export const testAlignSelf_stretch = test(
    activity_align_self_stretch_test,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text2, flexbox);
@@ -1208,8 +1219,8 @@ export const testAlignSelf_stretch = test(

 export const testAlignSelf_stretch_flexDirection_column = test(
    activity_align_self_stretch_test,
-    ({flexbox}) => flexbox.flexDirection = FlexDirection.COLUMN,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isLeftAlignedWith(text2, flexbox);
@@ -1236,8 +1247,8 @@ let activity_align_items_test = () => getViews(

 export const testAlignItems_flexStart = test(
    activity_align_items_test,
-    ({flexbox}) => flexbox.alignItems = AlignItems.FLEX_START,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.alignItems = AlignItems.FLEX_START,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text2, flexbox);
@@ -1257,8 +1268,8 @@ export const testAlignItems_flexStart = test(

 export const testAlignItems_flexEnd = test(
    activity_align_items_test,
-    ({flexbox}) => flexbox.alignItems = AlignItems.FLEX_END,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.alignItems = AlignItems.FLEX_END,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isRightOf(text2, text1);
        isLeftAlignedWith(text3, flexbox);
@@ -1286,8 +1297,8 @@ let activity_align_items_parent_padding_test = () => getViews(

 export const testAlignItems_flexEnd_parentPadding = test(
    activity_align_items_parent_padding_test,
-    ({flexbox}) => flexbox.alignItems = AlignItems.FLEX_END,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.alignItems = AlignItems.FLEX_END,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isRightOf(text2, text1);
        closeEnough(bottom(text1), height(flexbox) - Length.toDevicePixels(flexbox.style.paddingBottom, 0));
        closeEnough(bottom(text2), height(flexbox) - Length.toDevicePixels(flexbox.style.paddingBottom, 0));
@@ -1296,11 +1307,11 @@ export const testAlignItems_flexEnd_parentPadding = test(

 export const testAlignItems_flexEnd_parentPadding_column = test(
    activity_align_items_parent_padding_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.alignItems = AlignItems.FLEX_END;
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isBelow(text2, text1);
        closeEnough(right(text1), width(flexbox) - Length.toDevicePixels(flexbox.style.paddingRight, 0));
        closeEnough(right(text2), width(flexbox) - Length.toDevicePixels(flexbox.style.paddingRight, 0));
@@ -1309,8 +1320,8 @@ export const testAlignItems_flexEnd_parentPadding_column = test(

 export const testAlignItems_center = test(
    activity_align_items_test,
-    ({flexbox}) => flexbox.alignItems = AlignItems.CENTER,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.alignItems = AlignItems.CENTER,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isRightOf(text2, text1);
        isLeftAlignedWith(text3, flexbox);
@@ -1331,11 +1342,11 @@ export const testAlignItems_center = test(

 export const testAlignItems_flexEnd_wrapReverse = test(
    activity_align_items_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.flexWrap = FlexWrap.WRAP_REVERSE;
        flexbox.alignItems = AlignItems.FLEX_END;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isRightOf(text2, text1);
        isLeftAlignedWith(text3, flexbox);
@@ -1356,11 +1367,11 @@ export const testAlignItems_flexEnd_wrapReverse = test(

 export const testAlignItems_center_wrapReverse = test(
    activity_align_items_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.flexWrap = FlexWrap.WRAP_REVERSE;
        flexbox.alignItems = AlignItems.CENTER;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isLeftAlignedWith(text1, flexbox);
        isRightOf(text2, text1);
        isLeftAlignedWith(text3, flexbox);
@@ -1382,8 +1393,8 @@ export const testAlignItems_center_wrapReverse = test(

 export const testAlignItems_flexStart_flexDirection_column = test(
    activity_align_items_test,
-    ({flexbox}) => flexbox.flexDirection = FlexDirection.COLUMN,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isLeftAlignedWith(text2, flexbox);
@@ -1402,11 +1413,11 @@ export const testAlignItems_flexStart_flexDirection_column = test(

 export const testAlignItems_flexEnd_flexDirection_column = test(
    activity_align_items_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.alignItems = AlignItems.FLEX_END;
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isBelow(text2, text1);
        isTopAlignedWith(text3, flexbox);
@@ -1427,11 +1438,11 @@ export const testAlignItems_flexEnd_flexDirection_column = test(

 export const testAlignItems_center_flexDirection_column = test(
    activity_align_items_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.alignItems = AlignItems.CENTER;
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isBelow(text2, text1);
        isTopAlignedWith(text3, flexbox);
@@ -1452,12 +1463,12 @@ export const testAlignItems_center_flexDirection_column = test(

 export const testAlignItems_flexEnd_wrapReverse_flexDirection_column = test(
    activity_align_items_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.flexWrap = FlexWrap.WRAP_REVERSE;
        flexbox.alignItems = AlignItems.FLEX_END;
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isBelow(text2, text1);
        isLeftAlignedWith(text3, flexbox);
@@ -1478,12 +1489,12 @@ export const testAlignItems_flexEnd_wrapReverse_flexDirection_column = test(

 export const testAlignItems_center_wrapReverse_flexDirection_column = test(
    activity_align_items_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.flexWrap = FlexWrap.WRAP_REVERSE;
        flexbox.alignItems = AlignItems.CENTER;
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isBelow(text2, text1);
        isTopAlignedWith(text3, flexbox);
@@ -1513,7 +1524,7 @@ let activity_align_items_baseline_test = () => getViews(
 export const testAlignItems_baseline = test(
    activity_align_items_baseline_test,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        let topPluBaseline1 = top(text1) + baseline(text1);
        let topPluBaseline2 = top(text2) + baseline(text2);
        let topPluBaseline3 = top(text3) + baseline(text3);
@@ -1525,8 +1536,8 @@ export const testAlignItems_baseline = test(

 export const testAlignItems_baseline_wrapReverse = test(
    activity_align_items_baseline_test,
-    ({flexbox}) => flexbox.flexWrap = FlexWrap.WRAP_REVERSE,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexWrap = FlexWrap.WRAP_REVERSE,
+    ({ root, flexbox, text1, text2, text3 }) => {
        let bottomPluBaseline1 = bottom(text1) + baseline(text1);
        let bottomPluBaseline2 = bottom(text2) + baseline(text2);
        let bottomPluBaseline3 = bottom(text3) + baseline(text3);
@@ -1546,8 +1557,8 @@ let activity_flex_wrap_test = () => getViews(

 export const testFlexDirection_row_reverse = test(
    activity_flex_wrap_test,
-    ({flexbox}) => flexbox.flexDirection = FlexDirection.ROW_REVERSE,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexDirection = FlexDirection.ROW_REVERSE,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isRightAlignedWith(text1, flexbox);
        isTopAlignedWith(text2, flexbox);
@@ -1560,8 +1571,8 @@ export const testFlexDirection_row_reverse = test(

 export const testFlexDirection_column_reverse = test(
    activity_flex_wrap_test,
-    ({flexbox}) => flexbox.flexDirection = FlexDirection.COLUMN_REVERSE,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN_REVERSE,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isBottomAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isLeftAlignedWith(text2, flexbox);
@@ -1583,7 +1594,7 @@ let activity_flex_basis_percent_test = () => getViews(
 export const testFlexBasisPercent_wrap = test(
    activity_flex_basis_percent_test,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isLeftAlignedWith(text2, flexbox);
@@ -1598,8 +1609,8 @@ export const testFlexBasisPercent_wrap = test(

 export const testFlexBasisPercent_nowrap = test(
    activity_flex_basis_percent_test,
-    ({flexbox}) => flexbox.flexWrap = FlexWrap.NOWRAP,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexWrap = FlexWrap.NOWRAP,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text2, flexbox);
@@ -1614,8 +1625,8 @@ export const testFlexBasisPercent_nowrap = test(

 export const testFlexBasisPercent_wrap_flexDirection_column = test(
    activity_flex_basis_percent_test,
-    ({flexbox}) => flexbox.flexDirection = FlexDirection.COLUMN,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN,
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text2, flexbox);
@@ -1629,11 +1640,11 @@ export const testFlexBasisPercent_wrap_flexDirection_column = test(

 export const testFlexBasisPercent_nowrap_flexDirection_column = test(
    activity_flex_basis_percent_test,
-    ({flexbox}) => {
+    ({ flexbox }) => {
        flexbox.flexWrap = FlexWrap.NOWRAP;
        flexbox.flexDirection = FlexDirection.COLUMN;
    },
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isLeftAlignedWith(text2, flexbox);
@@ -1648,16 +1659,16 @@ export const testFlexBasisPercent_nowrap_flexDirection_column = test(
 );

 let activity_minwidth_test = () => getViews(
-        `<FlexboxLayout id="flexbox" width="400" height="400" backgroundColor="gray">
+    `<FlexboxLayout id="flexbox" width="400" height="400" backgroundColor="gray">
            <Label id="text1" horizontalAlignment="left" verticalAlignment="top" text="1" minWidth="100" backgroundColor="red" />
            <Label id="text2" horizontalAlignment="left" verticalAlignment="top" text="2" minWidth="100" backgroundColor="green" flexGrow="1" />
        </FlexboxLayout>`
-    );
+);

 export const testMinWidth_initial_width_less_than_minWidth = test(
    activity_minwidth_test,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        let minWidth = 100;
        closeEnough(width(text1), dipToDp(100));
        closeEnough(width(text2), width(flexbox) - dipToDp(100));
@@ -1676,7 +1687,7 @@ let activity_minwidth_lower_bound_test = () => getViews(
 export const testMinWidth_works_as_lower_bound_shrink_to = test(
    activity_minwidth_lower_bound_test,
    noop,
-    ({root, flexbox, text1, text2, text3, text4}) => {
+    ({ root, flexbox, text1, text2, text3, text4 }) => {
        closeEnough(width(text1), dipToDp(150));
        closeEnough(width(flexbox), width(text1) + width(text2) + width(text3) + width(text4));
    }
@@ -1692,7 +1703,7 @@ let activity_minheight_test = () => getViews(
 export const testMinHeight_initial_height_less_than_minHeight = test(
    activity_minheight_test,
    noop,
-    ({root, flexbox, text1, text2}) => {
+    ({ root, flexbox, text1, text2 }) => {
        closeEnough(height(text1), dipToDp(100));
        closeEnough(height(text2), height(flexbox) - dipToDp(100));
    }
@@ -1710,7 +1721,7 @@ let activity_minheight_lower_bound_test = () => getViews(
 export const testMinHeight_works_as_lower_bound_shrink_to = test(
    activity_minheight_lower_bound_test,
    noop,
-    ({root, flexbox, text1, text2, text3, text4}) => {
+    ({ root, flexbox, text1, text2, text3, text4 }) => {
        closeEnough(height(text1), dipToDp(150));
        closeEnough(height(flexbox), height(text1) + height(text2) + height(text3) + height(text4));
    }
@@ -1735,7 +1746,7 @@ let activity_views_visibility_gone = () => getViews(
 export const testView_visibility_gone = test(
    activity_views_visibility_gone,
    noop,
-    ({root, flexbox, text1, text2, text3, text4, text5}) => {
+    ({ root, flexbox, text1, text2, text3, text4, text5 }) => {
        isTopAlignedWith(text3, flexbox);
        isLeftAlignedWith(text3, flexbox);
        isTopAlignedWith(text4, flexbox);
@@ -1759,7 +1770,7 @@ let activity_visibility_gone_first_item_in_flex_line_row = () => getViews(
 export const testView_visibility_gone_first_item_in_flex_line_horizontal = test(
    activity_visibility_gone_first_item_in_flex_line_row,
    noop,
-    ({root, flexbox, text1, text2, text3}) => {
+    ({ root, flexbox, text1, text2, text3 }) => {
        check(height(flexbox) > 0);
        equal(height(flexbox), height(text1) + height(text3));
    }
@@ -1776,7 +1787,7 @@ let activity_visibility_gone_first_item_in_flex_line_column = () => getViews(
 export const testView_visibility_gone_first_item_in_flex_line_vertical = test(
    activity_visibility_gone_first_item_in_flex_line_column,
    noop,
-    ({flexbox, text1, text3}) => {
+    ({ flexbox, text1, text3 }) => {
        check(width(flexbox) > 0);
        equal(width(flexbox), width(text1) + width(text3));
    }
@@ -1793,7 +1804,7 @@ let activity_wrap_before_test = () => getViews(
 export const testWrapBefore = test(
    activity_wrap_before_test,
    noop,
-    ({flexbox, text1, text2, text3}) => {
+    ({ flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isLeftAlignedWith(text2, flexbox);
@@ -1805,8 +1816,8 @@ export const testWrapBefore = test(

 export const testWrapBefore2 = test(
    activity_wrap_before_test,
-    ({text2}) => FlexboxLayout.setFlexWrapBefore(text2, false),
-    ({flexbox, text1, text2, text3}) => {
+    ({ text2 }) => FlexboxLayout.setFlexWrapBefore(text2, false),
+    ({ flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text2, flexbox);
@@ -1820,8 +1831,8 @@ export const testWrapBefore2 = test(

 export const testWrapBefore_nowrap = test(
    activity_wrap_before_test,
-    ({flexbox}) => flexbox.flexWrap = FlexWrap.NOWRAP,
-    ({flexbox, text1, text2, text3}) => {
+    ({ flexbox }) => flexbox.flexWrap = FlexWrap.NOWRAP,
+    ({ flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isBottomAlignedWith(text1, flexbox);
@@ -1845,7 +1856,7 @@ let activity_wrap_parent_padding_horizontal_test = () => getViews(
 export const testWrap_parentPadding_horizontal = test(
    activity_wrap_parent_padding_horizontal_test,
    noop,
-    ({flexbox, text1, text2, text3}) => {
+    ({ flexbox, text1, text2, text3 }) => {
        isBelow(text2, text1);
        isRightOf(text3, text2);
        closeEnough(height(flexbox), Length.toDevicePixels(flexbox.style.paddingTop, 0) + Length.toDevicePixels(flexbox.style.paddingBottom, 0) + height(text1) + height(text2));
@@ -1863,7 +1874,7 @@ let activity_wrap_parent_padding_vertical_test = () => getViews(
 export const testWrap_parentPadding_vertical = test(
    activity_wrap_parent_padding_vertical_test,
    noop,
-    ({flexbox, text1, text2, text3}) => {
+    ({ flexbox, text1, text2, text3 }) => {
        isRightOf(text2, text1);
        isBelow(text3, text2);
        closeEnough(width(flexbox), Length.toDevicePixels(flexbox.style.paddingLeft, 0) + Length.toDevicePixels(flexbox.style.paddingRight, 0) + width(text1) + width(text2));
@@ -1881,7 +1892,7 @@ let activity_wrap_child_margin_horizontal_test = () => getViews(
 export const testWrap_childMargin_horizontal = test(
    activity_wrap_child_margin_horizontal_test,
    noop,
-    ({flexbox, text1, text2, text3}) => {
+    ({ flexbox, text1, text2, text3 }) => {
        isBelow(text2, text1);
        isRightOf(text3, text2);
        closeEnough(height(flexbox), height(text1) + height(text2) + PercentLength.toDevicePixels(text2.style.marginTop, 0, Number.NaN) + PercentLength.toDevicePixels(text2.style.marginBottom, 0, Number.NaN));
@@ -1899,7 +1910,7 @@ let activity_first_item_large_horizontal_test = () => getViews(
 export const testFirstItemLarge_horizontal = test(
    activity_first_item_large_horizontal_test,
    noop,
-    ({flexbox, text1, text2, text3}) => {
+    ({ flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isLeftAlignedWith(text2, flexbox);
@@ -1921,7 +1932,7 @@ let activity_first_item_large_vertical_test = () => getViews(
 export const testFirstItemLarge_vertical = test(
    activity_first_item_large_vertical_test,
    noop,
-    ({flexbox, text1, text2, text3}) => {
+    ({ flexbox, text1, text2, text3 }) => {
        isTopAlignedWith(text1, flexbox);
        isLeftAlignedWith(text1, flexbox);
        isTopAlignedWith(text2, flexbox);
@@ -1943,7 +1954,7 @@ let activity_wrap_child_margin_vertical_test = () => getViews(
 export const testWrap_childMargin_vertical = test(
    activity_wrap_child_margin_vertical_test,
    noop,
-    ({flexbox, text1, text2, text3}) => {
+    ({ flexbox, text1, text2, text3 }) => {
        isRightOf(text2, text1);
        isBelow(text3, text2);
        // dips anyone?
@@ -1960,7 +1971,7 @@ let activity_flexbox_with_proxy_view_container = () => getViews(
 export const testFlexboxLayout_does_not_crash_with_proxy_view_container = test(
    activity_flexbox_with_proxy_view_container,
    noop,
-    ({root, flexbox}) => {
+    ({ root, flexbox }) => {
        TKUnit.assert(flexbox.id === "flexbox", "FlexboxLayout actually there");
    }
 );
--- a/tests/app/ui/layouts/grid-layout-tests.ts
+++ b/tests/app/ui/layouts/grid-layout-tests.ts
@@ -9,6 +9,7 @@ import * as testModule from "../../ui-test";
 import * as layoutHelper from "./layout-helper";
 import * as platform from "tns-core-modules/platform";
 import * as commonTests from "./common-layout-tests";
+import * as helper from "../helper";

 var DELTA = 1;

@@ -33,6 +34,14 @@ export class GridLayoutTest extends testModule.UITest<RemovalTrackingGridLayout>
        return new RemovalTrackingGridLayout();
    }

+    public test_recycling() {
+        helper.nativeView_recycling_test(() => new GridLayout());
+    }
+
+    public test_item_recycling() {
+        helper.nativeView_recycling_test(() => new Button(), () => new GridLayout());
+    }
+
    private row(view: view.View): number {
        return GridLayout.getRow(view);
    }
--- a/tests/app/ui/layouts/stack-layout-tests.ts
+++ b/tests/app/ui/layouts/stack-layout-tests.ts
@@ -1,7 +1,7 @@
-import {StackLayout} from "tns-core-modules/ui/layouts/stack-layout";
-import {Button} from "tns-core-modules/ui/button";
+import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
+import { Button } from "tns-core-modules/ui/button";
 import * as TKUnit from "../../TKUnit";
-import * as helper from "./layout-helper";
+import * as helper from "../helper";
 import * as enums from "tns-core-modules/ui/enums";
 import * as utils from "tns-core-modules/utils/utils";
 import * as testModule from "../../ui-test";
@@ -10,21 +10,25 @@ import * as commonTests from "./common-layout-tests";

 export class StackLayoutTest extends testModule.UITest<StackLayout> {

-    private rootLayout: helper.MyStackLayout;
-    private btn1: helper.MyButton;
-    private btn2: helper.MyButton;
+    private rootLayout: layoutHelper.MyStackLayout;
+    private btn1: layoutHelper.MyButton;
+    private btn2: layoutHelper.MyButton;

    public create(): StackLayout {
-        this.rootLayout = new helper.MyStackLayout();
-        this.btn1 = new helper.MyButton();
+        this.rootLayout = new layoutHelper.MyStackLayout();
+        this.btn1 = new layoutHelper.MyButton();
        this.btn1.text = "btn1";
        this.rootLayout.addChild(this.btn1);
-        this.btn2 = new helper.MyButton();
+        this.btn2 = new layoutHelper.MyButton();
        this.btn2.text = "btn2";
        this.rootLayout.addChild(this.btn2);
        return this.rootLayout;
    }

+    public test_StackLayout_recycling() {
+        helper.nativeView_recycling_test(() => new StackLayout());
+    }
+
    public test_orientation_DefaultValue() {
        TKUnit.assertEqual(this.rootLayout.orientation, enums.Orientation.vertical, "Default orientation should be Vertical.");
    }
@@ -105,11 +109,11 @@ export class StackLayoutTest extends testModule.UITest<StackLayout> {

        this.waitUntilTestElementLayoutIsValid();

-        helper.assertMeasure(this.btn1, 260, 50);
-        helper.assertMeasure(this.btn2, 260, 50);
+        layoutHelper.assertMeasure(this.btn1, 260, 50);
+        layoutHelper.assertMeasure(this.btn2, 260, 50);

-        helper.assertLayout(this.btn1, 10, 20, 260, 50, "btn1");
-        helper.assertLayout(this.btn2, 10, 70, 260, 50, "btn2");
+        layoutHelper.assertLayout(this.btn1, 10, 20, 260, 50, "btn1");
+        layoutHelper.assertLayout(this.btn2, 10, 70, 260, 50, "btn2");
    }

    public test_Padding_Horizontal() {
@@ -127,11 +131,11 @@ export class StackLayoutTest extends testModule.UITest<StackLayout> {

        this.waitUntilTestElementLayoutIsValid();

-        helper.assertMeasure(this.btn1, 50, 240);
-        helper.assertMeasure(this.btn2, 50, 240);
+        layoutHelper.assertMeasure(this.btn1, 50, 240);
+        layoutHelper.assertMeasure(this.btn2, 50, 240);

-        helper.assertLayout(this.btn1, 10, 20, 50, 240, "btn1");
-        helper.assertLayout(this.btn2, 60, 20, 50, 240, "btn2");
+        layoutHelper.assertLayout(this.btn1, 10, 20, 50, 240, "btn1");
+        layoutHelper.assertLayout(this.btn2, 60, 20, 50, 240, "btn2");
    }

    private assertChildTexts(expected, layout, message) {
@@ -164,7 +168,7 @@ export class StackLayoutTest extends testModule.UITest<StackLayout> {
        // >> stack-layout-require
        // var StackLayout = require("ui/layouts/stack-layout").StackLayout;
        // << stack-layout-require
-        
+
        // >> stack-layout-new     
        // >> (hide)
        // var Button = require("ui/button").Button;
--- a/tests/app/ui/layouts/wrap-layout-tests.ts
+++ b/tests/app/ui/layouts/wrap-layout-tests.ts
@@ -1,8 +1,9 @@
 import * as TKUnit from "../../TKUnit";
-import {Label} from "tns-core-modules/ui/label";
+import { Label } from "tns-core-modules/ui/label";
 import * as layoutHelper from "./layout-helper";
 import * as testModule from "../../ui-test";
 import * as commonTests from "./common-layout-tests";
+import * as helper from "../helper";

 // >> wrap-layout-require
 import * as wrapLayoutModule from "tns-core-modules/ui/layouts/wrap-layout";
@@ -30,6 +31,10 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
        return wrapLayout;
    }

+    public test_StackLayout_recycling() {
+        helper.nativeView_recycling_test(() => new wrapLayoutModule.WrapLayout());
+    }
+
    public testItemWidhtItemHeight() {
        let wrap = this.testView;
        wrap.removeChildren();
--- a/tests/app/ui/list-picker/list-picker-tests.ts
+++ b/tests/app/ui/list-picker/list-picker-tests.ts
@@ -24,6 +24,10 @@ function _createItems(count: number): Array<number> {
    return items;
 }

+export function test_recycling() {
+    helper.nativeView_recycling_test(() => new listPickerModule.ListPicker());
+}
+
 export var testWhenlistPickerIsCreatedItemsAreUndefined = function () {
    helper.buildUIAndRunTest(_createListPicker(), function (views: Array<viewModule.View>) {
        var listPicker = <listPickerModule.ListPicker>views[0];
--- a/tests/app/ui/list-view/list-view-tests.ts
+++ b/tests/app/ui/list-view/list-view-tests.ts
@@ -52,6 +52,10 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
        return new listViewModule.ListView();
    }

+    public test_recycling() {
+        helper.nativeView_recycling_test(() => new listViewModule.ListView());
+    }
+
    public test_default_TNS_values() {
        // >> article-create-listview
        var listView = new listViewModule.ListView();
@@ -870,7 +874,7 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {

        // Back
        const count = listView.items.length - 1;
-         listView.items.forEach((item, i, arr) => {
+        listView.items.forEach((item, i, arr) => {
            listView.scrollToIndex(count - i);
            TKUnit.wait(0.01);
        });
--- a/tests/app/ui/page/page-tests-common.ts
+++ b/tests/app/ui/page/page-tests-common.ts
@@ -22,7 +22,7 @@ import { Label } from "tns-core-modules/ui/label";
 import { EventData } from "tns-core-modules/data/observable";
 import { PercentLength } from "tns-core-modules/ui/core/view";
 import * as platform from "tns-core-modules/platform";
-import {unsetValue} from "tns-core-modules/ui/core/view";
+import { unsetValue } from "tns-core-modules/ui/core/view";
 import { Color } from "tns-core-modules/color";

 export function addLabelToPage(page: Page, text?: string) {
@@ -31,6 +31,10 @@ export function addLabelToPage(page: Page, text?: string) {
    page.content = label;
 }

+export function test_recycling() {
+    helper.nativeView_recycling_test(() => new Page());
+}
+
 export function test_AfterPageLoaded_is_called_NativeInstance_is_created() {
    let page: Page;
    let label: Label;
@@ -122,11 +126,11 @@ export function test_NavigateToNewPage() {
    // << article-navigating-backward

    TKUnit.waitUntilReady(() => { return topFrame.currentPage !== null && topFrame.currentPage === currentPage });
-    TKUnit.assert(testPage.parent === undefined, "Page.parent should become undefined after navigating back");
-    TKUnit.assert(testPage._context === null, "Page._context should become undefined after navigating back");
-    TKUnit.assert(testPage.isLoaded === false, "Page.isLoaded should become false after navigating back");
-    TKUnit.assert(testPage.frame === undefined, "Page.frame should become undefined after navigating back");
-    TKUnit.assert(testPage._isAddedToNativeVisualTree === false, "Page._isAddedToNativeVisualTree should become false after navigating back");
+    TKUnit.assertNull(testPage.parent, "Page.parent should become undefined after navigating back");
+    TKUnit.assertNull(testPage._context, "Page._context should become undefined after navigating back");
+    TKUnit.assertFalse(testPage.isLoaded, "Page.isLoaded should become false after navigating back");
+    TKUnit.assertNull(testPage.frame, "Page.frame should become undefined after navigating back");
+    TKUnit.assertFalse(testPage._isAddedToNativeVisualTree, "Page._isAddedToNativeVisualTree should become false after navigating back");
 }

 export function test_PageNavigation_EventSequence_WithTransition() {
--- a/tests/app/ui/progress/progress-tests.ts
+++ b/tests/app/ui/progress/progress-tests.ts
@@ -18,6 +18,10 @@ export function test_default_TNS_values() {
    TKUnit.assertEqual(progress.maxValue, 100, "Default progress.maxValue");
 }

+export function test_recycling() {
+    helper.nativeView_recycling_test(() => new progressModule.Progress());
+}
+
 export function test_default_native_values() {
    var progress = new progressModule.Progress();

--- a/tests/app/ui/repeater/repeater-tests.ts
+++ b/tests/app/ui/repeater/repeater-tests.ts
@@ -18,13 +18,18 @@ import * as observableArray from "tns-core-modules/data/observable-array";
 import * as labelModule from "tns-core-modules/ui/label";
 // << article-require-modules-repeater

-var ASYNC = 0.2;
 var FEW_ITEMS = [0, 1, 2];
 var MANY_ITEMS = [];
 for (var i = 0; i < 100; i++) {
    MANY_ITEMS[i] = i;
 }

+export function test_recycling() {
+    const setters = new Map<string, stackLayoutModule.StackLayout>();
+    setters.set('itemsLayout', new stackLayoutModule.StackLayout());
+    helper.nativeView_recycling_test(() => new repeaterModule.Repeater(), null, null, setters);
+}
+
 export function test_set_items_to_array_loads_all_items() {
    var repeater = new repeaterModule.Repeater();

@@ -72,7 +77,8 @@ export function test_refresh_after_adding_items_to_array_loads_new_items() {
        // Manually trigger the update so that the new color is shown.
        repeater.refresh();
        // << artcle-array-push-element
-        TKUnit.wait(ASYNC);
+        // TKUnit.wait(ASYNC);
+        TKUnit.waitUntilReady(() => repeater.isLayoutValid);
        TKUnit.assertEqual(getChildrenCount(repeater), colors.length, "views count.");
    };

--- a/tests/app/ui/search-bar/search-bar-tests.ts
+++ b/tests/app/ui/search-bar/search-bar-tests.ts
@@ -24,6 +24,10 @@ var _createSearchBarFunc = function (): searchBarModule.SearchBar {
    return searchBar;
 };

+export function test_recycling() {
+    helper.nativeView_recycling_test(() => new searchBarModule.SearchBar());
+}
+
 export var testSearchBarHintColorAndroid = function () {
    helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
        var searchBar = <searchBarModule.SearchBar>views[0];
--- a/tests/app/ui/segmented-bar/segmented-bar-tests.ts
+++ b/tests/app/ui/segmented-bar/segmented-bar-tests.ts
@@ -5,6 +5,7 @@ import { View } from "tns-core-modules/ui/core/view";
 import { BindingOptions } from "tns-core-modules/ui/core/bindable";
 import { Observable } from "tns-core-modules/data/observable";
 import { Color } from "tns-core-modules/color";
+import * as helper from "../helper";

 // >> article-require-segmentedbar-module
 import * as segmentedBarModule from "tns-core-modules/ui/segmented-bar";
@@ -18,6 +19,12 @@ function _createSegmentedBar(): segmentedBarModule.SegmentedBar {
    return segmentedBar;
 }

+export function test_recycling() {
+    const setters = new Map<string, Array<any>>();
+    setters.set('items', _createItems(3));
+    helper.nativeView_recycling_test(() => new segmentedBarModule.SegmentedBar(), null, null, setters);
+}
+
 function _createItems(count: number): Array<segmentedBarModule.SegmentedBarItem> {
    var items = new Array<segmentedBarModule.SegmentedBarItem>();
    for (var i = 0; i < count; i++) {
--- a/tests/app/ui/slider/slider-tests.ts
+++ b/tests/app/ui/slider/slider-tests.ts
@@ -48,6 +48,10 @@ function detachValueChangedEvents(slider: Slider) {
    slider.off(MAX_VALUE_EVENT);
 }

+export function test_recycling() {
+    helper.nativeView_recycling_test(() => new Slider());
+}
+
 export function test_set_TNS_value_updates_native_value() {
    // >> article-creating-slider
    const slider = new Slider();
--- a/tests/app/ui/switch/switch-tests.ts
+++ b/tests/app/ui/switch/switch-tests.ts
@@ -21,6 +21,10 @@ function pageLoaded(args) {
 exports.pageLoaded = pageLoaded;
 // << article-binding-switch-property

+export function test_recycling() {
+    helper.nativeView_recycling_test(() => new switchModule.Switch());
+}
+
 export function test_default_TNS_values() {
    // >> article-create-switch
    var mySwitch = new switchModule.Switch();
--- a/tests/app/ui/tab-view/tab-view-tests.ts
+++ b/tests/app/ui/tab-view/tab-view-tests.ts
@@ -21,6 +21,12 @@ export class TabViewTest extends testModule.UITest<tabViewModule.TabView> {
        return tabView;
    }

+    public test_recycling() {
+        const setters = new Map<string, Array<any>>();
+        setters.set('items', this._createItems(3));
+        helper.nativeView_recycling_test(() => new tabViewModule.TabView(), null, null, setters);
+    }
+
    _createItems(count: number): Array<tabViewModule.TabViewItem> {
        var items = new Array<tabViewModule.TabViewItem>();
        for (var i = 0; i < count; i++) {
@@ -292,9 +298,9 @@ export class TabViewTest extends testModule.UITest<tabViewModule.TabView> {
        //          return `${font.typeface} ${font.size}`;
        //     }
        // }
-        
+
        let assertFontsAreEqual = (actual: any, expected: any, message?: string) => {
-            if (this.testView.ios){
+            if (this.testView.ios) {
                TKUnit.assertEqual(actual, expected, message);
            }
            else {
@@ -315,17 +321,17 @@ export class TabViewTest extends testModule.UITest<tabViewModule.TabView> {
        this.testView.style.font = "20 Pacifico";
        nativeFont = tabViewTestsNative.getNativeFont(this.testView);
        //console.log(`>>>>>>>>>>>>> nativeFont: ${fontToString(nativeFont)}`);
-        
+
        //console.log(`>>>>>>>>>>>>> CREATE 3 ITEMS`);
        this.testView.items = this._createItems(2);
        assertFontsAreEqual(tabViewTestsNative.getNativeFont(this.testView), nativeFont, "Font must be 20 Pacifico after rebinding items.");
        //console.log(`>>>>>>>>>>>>> nativeFont: ${fontToString(nativeFont)}`);
-        
+
        //console.log(`>>>>>>>>>>>>> MONOSPACE;`);
        this.testView.style.font = "bold 12 monospace";
        nativeFont = tabViewTestsNative.getNativeFont(this.testView);
        //console.log(`>>>>>>>>>>>>> nativeFont: ${fontToString(nativeFont)}`);
-        
+
        //console.log(`>>>>>>>>>>>>> CREATE 3 ITEMS`);
        this.testView.items = this._createItems(3);
        assertFontsAreEqual(tabViewTestsNative.getNativeFont(this.testView), nativeFont, "Font must be bold 12 monospace after rebinding items.");
--- a/tests/app/ui/text-field/text-field-tests.ts
+++ b/tests/app/ui/text-field/text-field-tests.ts
@@ -21,14 +21,18 @@ import * as observable from "tns-core-modules/data/observable";
 // ### Binding two TextFields text property to observable view-model property.
 // >> binding-text-property-textfield
 function pageLoaded(args) {
-  var page = args.object;
-  var obj = new observable.Observable();
-  obj.set("someProperty", "Please change this text!");
-  page.bindingContext = obj;
+    var page = args.object;
+    var obj = new observable.Observable();
+    obj.set("someProperty", "Please change this text!");
+    page.bindingContext = obj;
 }
 exports.pageLoaded = pageLoaded;
 // << binding-text-property-textfield

+export function test_recycling() {
+    helper.nativeView_recycling_test(_createTextFieldFunc);
+}
+
 var _createTextFieldFunc = function (): textFieldModule.TextField {
    // >> creating-textfield
    var textField = new textFieldModule.TextField();
@@ -40,7 +44,7 @@ var _createTextFieldFunc = function (): textFieldModule.TextField {
 export var testSetText = function () {
    helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
        var textField = <textFieldModule.TextField>views[0];
-        
+
        // >> setting-text-property
        textField.text = "Hello, world!";
        // << setting-text-property
@@ -48,13 +52,13 @@ export var testSetText = function () {
        var expectedValue = "Hello, world!";
        var actualValue = textFieldTestsNative.getNativeText(textField);
        TKUnit.assertEqual(actualValue, expectedValue, "TextField native text");
-    });    
+    });
 }

 export var testSetTextNull = function () {
    helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
        var textField = <textFieldModule.TextField>views[0];
-        
+
        textField.text = null;

        var expectedValue = "";
@@ -98,7 +102,7 @@ function createFormattedString(value: any): formattedStringModule.FormattedStrin
 export var testSetTextWithSpan = function () {
    helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
        var textField = <textFieldModule.TextField>views[0];
-  
+
        textField.formattedText = createFormattedString("Hello, world!");

        var expectedValue = "Hello, world!";
@@ -155,6 +159,7 @@ export var testSetHintToNumber = function () {

        var actualValue = textFieldTestsNative.getNativeHint(textField);
        TKUnit.assert(<any>actualValue == expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+
    });
 }
 /* tslint:enable */
@@ -551,8 +556,8 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithoutFormatt

        view.text = "NormalText";
        view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
-        
-        TKUnit.assertEqual(view.style.textTransform,  "uppercase", "TextTransform");
+
+        TKUnit.assertEqual(view.style.textTransform, "uppercase", "TextTransform");
        TKUnit.assertEqual(view.style.textDecoration, "underline", "TextDecoration");
        TKUnit.assertEqual(view.style.letterSpacing, 1, "LetterSpacing");
    });
@@ -564,7 +569,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT
    helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
        view.formattedText = formattedString;
        view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
-        
+
        TKUnit.assertEqual(view.style.textTransform, "uppercase", "TextTransform");
        TKUnit.assertEqual(view.style.textDecoration, "underline", "TextDecoration");
        TKUnit.assertEqual(view.style.letterSpacing, 1, "LetterSpacing");
--- a/tests/app/ui/text-view/text-view-tests.ts
+++ b/tests/app/ui/text-view/text-view-tests.ts
@@ -35,6 +35,10 @@ export function pageLoaded(args) {
 exports.pageLoaded = pageLoaded;
 // << observable-declare

+export function test_recycling() {
+    helper.nativeView_recycling_test(_createTextViewFunc);
+}
+
 var _createTextViewFunc = function (): textViewModule.TextView {
    // >> text-view-create
    var textView = new textViewModule.TextView();
--- a/tests/app/ui/time-picker/time-picker-tests.ts
+++ b/tests/app/ui/time-picker/time-picker-tests.ts
@@ -3,6 +3,7 @@ import * as testModule from "../../ui-test";
 import * as timePickerTestsNative from "./time-picker-tests-native";
 import * as color from "tns-core-modules/color";
 import * as platform from "tns-core-modules/platform";
+import * as helper from "../helper";

 // >> require-time-picker
 import * as timePickerModule from "tns-core-modules/ui/time-picker";
@@ -22,7 +23,11 @@ export class TimePickerTest extends testModule.UITest<timePickerModule.TimePicke
        timePicker.id = "TimePicker";
        return timePicker;
    }
-    
+
+    public test_recycling() {
+        helper.nativeView_recycling_test(this.create);
+    }
+
    public test_DummyForCodeSnippet() {
        // >> declare-time-picker
        var timePicker = new timePickerModule.TimePicker();
@@ -30,12 +35,12 @@ export class TimePickerTest extends testModule.UITest<timePickerModule.TimePicke
        timePicker.minute = 25;
        // << declare-time-picker
    }
-    
+
    private setUpTimePicker(hour?: number, minute?: number) {
        if (hour) {
            this.testView.hour = hour;
        }
-        
+
        if (minute) {
            this.testView.minute = minute;
        }
@@ -220,18 +225,18 @@ export class TimePickerTest extends testModule.UITest<timePickerModule.TimePicke
    public testSetHourMinute_BeforeLoaded() {
        let expectedHour = 12;
        let expectedMinute = 34;
-        
+
        this.setUpTimePicker(expectedHour, expectedMinute);
-        
+
        assertTime(this.testView, expectedHour, expectedMinute);
    }

    public testTimeSetHourMinute_BeforeLoaded() {
        let expectedHour = 12;
        let expectedMinute = 34;
-        
+
        this.setUpTimePicker(expectedHour, expectedMinute);
-        
+
        TKUnit.assertEqual(this.testView.time.getHours(), expectedHour);
        TKUnit.assertEqual(this.testView.time.getMinutes(), expectedMinute);
    }
@@ -261,7 +266,7 @@ export class TimePickerTest extends testModule.UITest<timePickerModule.TimePicke
    public testSetTimeChangesHourAndMinute() {
        let expectedHour = 12;
        let expectedMinute = 34;
-        
+
        this.testView.time = new Date(0, 0, 0, expectedHour, expectedMinute);
        assertTime(this.testView, expectedHour, expectedMinute);
    }
--- a/tests/app/ui/view/view-tests-common.ts
+++ b/tests/app/ui/view/view-tests-common.ts
@@ -1003,6 +1003,8 @@ export function test_getActualSize() {

 export function test_background_image_doesnt_throw() {
    var btn = new Button();
+    // There is no need to wait until image is downloaded.
+    // It was throwing an exception when starting the download...
    btn.style.backgroundImage = 'https://www.bodybuilding.com/images/2016/june/8-benefits-to-working-out-in-the-morning-header-v2-830x467.jpg';
    helper.buildUIAndRunTest(btn, function (views: Array<View>) {
        helper.waitUntilLayoutReady(btn);