ScrollView ios safe area issue

[ghost]

When using PullToRefresh with <ScrollView iosOverFlowSafeArea="true"> the refresh control sits inside the safe area behind the notch.

<pr:PullToRefresh refresh="refreshData">
  <ScrollView iosOverflowSafeArea="true">
    ...
  </ScrolLView>
</pr:PullToRefresh>

[farfromrefug]

@toby-wollit that s normal if you use iosOverflowSafeArea. Not a bug i think

[ghost]

The refreshControl is cut in half - How would we adjust its position so that it is visible?

[ghost]

Also, after the first refresh the page content jumps up by the height of the safe area. (same issue mentioned here: https://stackoverflow.com/questions/53263346/nativescript-pull-to-refresh-page-behind-actionbar-after-refresh-nativescript)

[farfromrefug]

Again it is normal as you overflow the safe area and thus get under the notch. And your other issue do not seem to be related to this plugin

[ghost]

I agree that it makes sense the refresh control is within the safe area, but we need the ability to move the refreshControl so that it is visible.

Also, the second issue is related to this plugin. Would you like me to setup an example repository?

[farfromrefug]

@toby-wollit i am sorry but it is out of the scope of that plugin. It follows the specs of safearea and i wont change that. You need to play with your listview contentOffset but again it is in the listview component not this plugin. And i am almost 100% sure the second issue is related to how N handles safe area. And the linked discussion seems to go that way.

[cuzzea]

Hey, did you ever found a solution for this? I am having the same issue, regardless of the value of iosOverFlowSafeArea. The loader never shows up for me, because I think it's hidden behind the ActionBar. Using the margin-top: 1 works, but it adds a really ugly padding to anything in the ScrollView.

<ActionBar title="Dashboard"></ActionBar>
<PullToRefresh (refresh)="refreshList($event)" style="margin-top: 1">
  <ScrollView width="100%" height="100%" class="main-holder">...</ScrollView>
</PullToRefresh>

Loader not visible:

Margin causing content cut-off

Any tips on how to do this without the margin would be helpful.

[farfromrefug]

@cuzzea dont think this is the same issue. try to wrap the pull inside a gridlayout

[cuzzea]

I tried multiple combinations of layouts and properties with height and iosOverflowSafeArea and the best I could get was having the loader show up (with GridLayout and iosOverflowSafeArea="false" on ScrollView) but now I have the bottom part of the app cut off. I can see, using backgroundColor, that the grid view is taking the necessary space, going to the bottom of the screen, but the scroll view dose not.

<ActionBar title="Dashboard"></ActionBar>
<GridLayout backgroundColor="red">
  <PullToRefresh (refresh)="refreshList($event)">
    <ScrollView width="100%" height="100%" iosOverflowSafeArea="false">

I removed the PullToRefresh component, and now the cut-off height is 50% smaller

<ActionBar title="Dashboard"></ActionBar>
<GridLayout backgroundColor="red">
  <ScrollView width="100%" height="100%" iosOverflowSafeArea="false">

so in short

• iosOverflowSafeArea="false" on ScrollView brings back the loader and there is no margin on top, but there is a bottom cut-off
• no iosOverflowSafeArea and margin-top on PullToRefresh streaches the content to the end, but adds the margin on top

Let me know if I should move this conversation to a new issue to not span this one, if it's not related.

[farfromrefug]

@cuzzea no.let s keep it here. might be related. could you create a simple repro example? ( vue or vanilla, no angular)

[stasdav]

@cuzzea It solved the same problem <PullToRefresh @refresh="updateSettings" style="margin-top: 0.001" height="100%"> style="margin-top: 0.001"