Skip to content

Commit 51a191f

Browse files
MartoYankovMartoYankov
authored
fix(ios): safe area handling in scrollview (#6561)
1 parent 5c03abe commit 51a191f

7 files changed

Lines changed: 197 additions & 4 deletions

File tree

‎apps/app/ui-tests-app/issues/issue-6439.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.hr-light {
2+
height: 1;
3+
background-color: gray;
4+
}
5+
6+
.title {
7+
height: 200;
8+
}

‎apps/app/ui-tests-app/issues/issue-6439.xml‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<Page>
2+
<ActionBar title="issue-6439"></ActionBar>
3+
4+
<GridLayout>
5+
<ScrollView>
6+
<StackLayout>
7+
<StackLayout>
8+
<Label text="Play with NativeScript!" textWrap="true" class="title" />
9+
<StackLayout class="hr-light"></StackLayout>
10+
</StackLayout>
11+
<StackLayout>
12+
<Label text="Play with NativeScript!" textWrap="true" class="title" />
13+
<StackLayout class="hr-light"></StackLayout>
14+
</StackLayout>
15+
<StackLayout>
16+
<Label text="Play with NativeScript!" textWrap="true" class="title" />
17+
<StackLayout class="hr-light"></StackLayout>
18+
</StackLayout>
19+
<StackLayout>
20+
<Label text="Play with NativeScript!" textWrap="true" class="title" />
21+
<StackLayout class="hr-light"></StackLayout>
22+
</StackLayout>
23+
<StackLayout>
24+
<Label text="Play with NativeScript!" textWrap="true" class="title" />
25+
<StackLayout class="hr-light"></StackLayout>
26+
</StackLayout>
27+
<StackLayout>
28+
<Label text="Play with NativeScript!" textWrap="true" class="title" />
29+
<StackLayout class="hr-light"></StackLayout>
30+
</StackLayout>
31+
<StackLayout>
32+
<Label text="Play with NativeScript!" textWrap="true" class="title" />
33+
<StackLayout class="hr-light"></StackLayout>
34+
</StackLayout>
35+
</StackLayout>
36+
</ScrollView>
37+
</GridLayout>
38+
</Page>

‎apps/app/ui-tests-app/issues/issue-ng-repo-1599.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.page {
2+
padding: 20;
3+
}
4+
5+
.title {
6+
font-weight: bold;
7+
}
8+
9+
.list-items {
10+
border-radius: 10;
11+
background-repeat: no-repeat;
12+
background-size: cover;
13+
background-position: center top;
14+
background-color: black;
15+
margin-top: 20;
16+
}
17+
18+
.item-title {
19+
color: white;
20+
vertical-align: bottom;
21+
font-size: 30;
22+
padding: 180 20 20;
23+
font-weight: 600;
24+
}
25+
26+
.list-item__row {
27+
padding-left: 20;
28+
}
29+
30+
.list-item {
31+
border-radius: 4;
32+
background-color: white;
33+
margin: 0 10 20 0;
34+
padding: 5 10;
35+
}

‎apps/app/ui-tests-app/issues/issue-ng-repo-1599.xml‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<Page>
2+
<ActionBar title="issue-ng-repo-1599"></ActionBar>
3+
4+
<ScrollView>
5+
<GridLayout rows="auto, *" columns="*" class="page page-content">
6+
<!-- Banner -->
7+
<StackLayout row="0" orientation="vertical">
8+
<StackLayout>
9+
<Label textWrap="true" text="My shopping lists" class="title"></Label>
10+
</StackLayout>
11+
</StackLayout>
12+
<!-- Offer categories -->
13+
<StackLayout row="1">
14+
<!-- Shopping list 1 -->
15+
<StackLayout class="list-items" backgroundImage="~/ui-tests-app/resources/images/woods.jpg">
16+
<Label text="Shopping list 1" class="item-title" textWrap="true"></Label>
17+
<ScrollView orientation="horizontal">
18+
<StackLayout orientation="horizontal" class="list-item__row">
19+
<StackLayout class="list-item">
20+
<Label text="Shop Item" textWrap="true" />
21+
</StackLayout>
22+
<StackLayout class="list-item">
23+
<Label text="Shop Item" textWrap="true" />
24+
</StackLayout>
25+
<StackLayout class="list-item">
26+
<Label text="Shop Item" textWrap="true" />
27+
</StackLayout>
28+
<StackLayout class="list-item">
29+
<Label text="Shop Item" textWrap="true" />
30+
</StackLayout>
31+
<StackLayout class="list-item">
32+
<Label text="Shop Item" textWrap="true" />
33+
</StackLayout>
34+
</StackLayout>
35+
</ScrollView>
36+
</StackLayout>
37+
<!-- Shopping list 2 -->
38+
<StackLayout class="list-items" backgroundImage="~/ui-tests-app/resources/images/woods.jpg">
39+
<Label text="Shopping list 2" class="item-title" textWrap="true"></Label>
40+
<ScrollView orientation="horizontal">
41+
<StackLayout orientation="horizontal" class="list-item__row">
42+
<StackLayout class="list-item">
43+
<Label text="Shop Item" textWrap="true" />
44+
</StackLayout>
45+
<StackLayout class="list-item">
46+
<Label text="Shop Item" textWrap="true" />
47+
</StackLayout>
48+
<StackLayout class="list-item">
49+
<Label text="Shop Item" textWrap="true" />
50+
</StackLayout>
51+
<StackLayout class="list-item">
52+
<Label text="Shop Item" textWrap="true" />
53+
</StackLayout>
54+
<StackLayout class="list-item">
55+
<Label text="Shop Item" textWrap="true" />
56+
</StackLayout>
57+
</StackLayout>
58+
</ScrollView>
59+
</StackLayout>
60+
<!-- Shopping list 3 -->
61+
<StackLayout class="list-items" backgroundImage="~/ui-tests-app/resources/images/woods.jpg">
62+
<Label text="Shopping list 3" class="item-title" textWrap="true"></Label>
63+
<ScrollView orientation="horizontal">
64+
<StackLayout orientation="horizontal" class="list-item__row">
65+
<StackLayout class="list-item">
66+
<Label text="Shop Item" textWrap="true" />
67+
</StackLayout>
68+
<StackLayout class="list-item">
69+
<Label text="Shop Item" textWrap="true" />
70+
</StackLayout>
71+
<StackLayout class="list-item">
72+
<Label text="Shop Item" textWrap="true" />
73+
</StackLayout>
74+
<StackLayout class="list-item">
75+
<Label text="Shop Item" textWrap="true" />
76+
</StackLayout>
77+
<StackLayout class="list-item">
78+
<Label text="Shop Item" textWrap="true" />
79+
</StackLayout>
80+
</StackLayout>
81+
</ScrollView>
82+
</StackLayout>
83+
<!-- Shopping list 4 -->
84+
<StackLayout class="list-items" backgroundImage="~/ui-tests-app/resources/images/woods.jpg">
85+
<Label text="Shopping list 4" class="item-title" textWrap="true"></Label>
86+
<ScrollView orientation="horizontal">
87+
<StackLayout orientation="horizontal" class="list-item__row">
88+
<StackLayout class="list-item">
89+
<Label text="Shop Item" textWrap="true" />
90+
</StackLayout>
91+
<StackLayout class="list-item">
92+
<Label text="Shop Item" textWrap="true" />
93+
</StackLayout>
94+
<StackLayout class="list-item">
95+
<Label text="Shop Item" textWrap="true" />
96+
</StackLayout>
97+
<StackLayout class="list-item">
98+
<Label text="Shop Item" textWrap="true" />
99+
</StackLayout>
100+
<StackLayout class="list-item">
101+
<Label text="Shop Item" textWrap="true" />
102+
</StackLayout>
103+
</StackLayout>
104+
</ScrollView>
105+
</StackLayout>
106+
</StackLayout>
107+
</GridLayout>
108+
</ScrollView>
109+
</Page>

‎apps/app/ui-tests-app/issues/main-page.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ export function loadExamples() {
2727
examples.set("3354-ios", "issues/issue-3354");
2828
examples.set("4450", "issues/issue-4450");
2929
examples.set("5274", "issues/issue-5274");
30+
examples.set("ng-repo-1599", "issues/issue-ng-repo-1599");
31+
examples.set("6439", "issues/issue-6439");
3032

3133
return examples;
3234
}

‎apps/app/ui-tests-app/scroll-view/safe-area-sub-element.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</Page.actionBar>
77

88
<GridLayout>
9-
<ScrollView height="50" verticalAlignment="top">
9+
<ScrollView>
1010
<StackLayout>
1111
<GridLayout height="30" backgroundColor="red" />
1212
<GridLayout height="30" backgroundColor="yellow" />

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -798,11 +798,11 @@ export namespace ios {
798798
}
799799

800800
if (inWindowRight < fullscreenPosition.right && inWindowRight >= safeAreaPosition.right + fullscreenPosition.left) {
801-
adjustedPosition.right = fullscreenPosition.right - fullscreenPosition.left;
801+
adjustedPosition.right += fullscreenPosition.right - inWindowRight;
802802
}
803803

804804
if (inWindowBottom < fullscreenPosition.bottom && inWindowBottom >= safeAreaPosition.bottom + fullscreenPosition.top) {
805-
adjustedPosition.bottom = fullscreenPosition.bottom - fullscreenPosition.top;
805+
adjustedPosition.bottom += fullscreenPosition.bottom - inWindowBottom;
806806
}
807807

808808
const adjustedFrame = CGRectMake(layout.toDeviceIndependentPixels(adjustedPosition.left), layout.toDeviceIndependentPixels(adjustedPosition.top), layout.toDeviceIndependentPixels(adjustedPosition.right - adjustedPosition.left), layout.toDeviceIndependentPixels(adjustedPosition.bottom - adjustedPosition.top));
@@ -853,7 +853,8 @@ export namespace ios {
853853

854854
if (parent.nativeViewProtected instanceof UIScrollView) {
855855
const nativeView = parent.nativeViewProtected;
856-
safeArea = nativeView.safeAreaLayoutGuide.layoutFrame;
856+
const insets = nativeView.safeAreaInsets;
857+
safeArea = CGRectMake(insets.left, insets.top, nativeView.contentSize.width - insets.left - insets.right, nativeView.contentSize.height - insets.top - insets.bottom);
857858
fullscreen = CGRectMake(0, 0, nativeView.contentSize.width, nativeView.contentSize.height);
858859
} else if (parent.viewController) {
859860
const nativeView = parent.viewController.view;

0 commit comments

Comments
 (0)