fix(list-view-ios): fix rowHeight property to apply proper item size …

…for iOS (#5693)

* fix(list-view-ios): fix rowHeight property to apply proper item size for iOS

* chore(apps-tests): add rowHeight tests

apps/app/ui-tests-app/list-view/main-page.ts

@@ -17,6 +17,7 @@ export function loadExamples() {
     examples.set("listview-bg-separator-color", "list-view/listview-bg-separator-color");
     examples.set("csslv", "list-view/csslv");
     examples.set("scrolling-and-sizing", "list-view/scrolling-and-sizing");
+    examples.set("row-height", "list-view/row-height");
 
     return examples;
 }

apps/app/ui-tests-app/list-view/row-height.css

@@ -0,0 +1,51 @@
+.p-10 {
+    padding: 10 20 10 20;
+}
+
+.m-b-10 {
+    margin-bottom: 10;
+}
+
+.page {
+    background-color: #F2F2F2;
+}
+
+ListView {
+    background-color: yellow;
+}
+
+TextView {
+    background-color: #FFF;
+}
+
+.bordered {
+    border-width: 5;
+    border-color: green;
+}
+
+.fixed-height {
+    height: 55;
+}
+
+.border-radius {
+    border-radius: 15;
+}
+
+.border-radius-nonuniform {
+    border-radius: 10 20 30 40;
+}
+
+.bordered-nonuniform {
+    border-top-color: red;
+    border-right-color: green;
+    border-bottom-color: blue;
+    border-left-color: purple;
+    border-top-width: 5;
+    border-right-width: 10;
+    border-bottom-width: 15;
+    border-left-width: 20;
+}
+
+.body {
+    font-size: 11;
+}

apps/app/ui-tests-app/list-view/row-height.ts

@@ -0,0 +1,4 @@
+export function onNavigatingTo(args) {
+    const page = args.object;
+    page.bindingContext = ["Item 1", "Item 2", "Item 3"];
+}

apps/app/ui-tests-app/list-view/row-height.xml

@@ -0,0 +1,34 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
+
+    <Page.actionBar>
+        <ActionBar title="My App" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <StackLayout>
+        <StackLayout class="p-10" row="0">
+            <Label text="Row height = 40" class="body m-b-10"/>
+            <ListView items="{{ $value }}" rowHeight="40">
+                <ListView.itemTemplate>
+                    <Label text="{{ $value }}" backgroundColor="green"/>
+                </ListView.itemTemplate>
+            </ListView>
+        </StackLayout>
+        <StackLayout class="p-10" row="0">
+            <Label text="Row height pixels = 40" class="body m-b-10"/>
+            <ListView items="{{ $value }}" rowHeight="40px">
+                <ListView.itemTemplate>
+                    <Label text="{{ $value }}" backgroundColor="green"/>
+                </ListView.itemTemplate>
+            </ListView>
+        </StackLayout>
+        <StackLayout class="p-10" row="0">
+            <Label text="Row height dips = 40" class="body m-b-10"/>
+            <ListView items="{{ $value }}" rowHeight="40dips">
+                <ListView.itemTemplate>
+                    <Label text="{{ $value }}" backgroundColor="green"/>
+                </ListView.itemTemplate>
+            </ListView>
+        </StackLayout>
+    </StackLayout>
+</Page>

tns-core-modules/ui/list-view/list-view.ios.ts

@@ -197,7 +197,7 @@ class UITableViewRowHeightDelegateImpl extends NSObject implements UITableViewDe
             return tableView.estimatedRowHeight;
         }
 
-        return owner._effectiveRowHeight;
+        return layout.toDeviceIndependentPixels(owner._effectiveRowHeight);
     }
 }
 
@@ -281,8 +281,8 @@ export class ListView extends ListViewBase {
         }
     }
 
-    public isItemAtIndexVisible( itemIndex: number ): boolean {
-        const indexes: NSIndexPath[] = Array.from(this._ios.indexPathsForVisibleRows); 
+    public isItemAtIndexVisible(itemIndex: number): boolean {
+        const indexes: NSIndexPath[] = Array.from(this._ios.indexPathsForVisibleRows);
         return indexes.some(visIndex => visIndex.row === itemIndex);
     }
 
@@ -295,7 +295,7 @@ export class ListView extends ListViewBase {
     }
 
     public _onRowHeightPropertyChanged(oldValue: Length, newValue: Length) {
-        const value = this._effectiveRowHeight;
+        const value = layout.toDeviceIndependentPixels(this._effectiveRowHeight);
         const nativeView = this._ios;
         if (value < 0) {
             nativeView.rowHeight = UITableViewAutomaticDimension;