CODEWITHSUNDEEP
nativescriptangular2-nativescript
Dexter
Dexter

Reputation: 2472

Why is the ScrollView jumping up and down when returning to main view on iOS?

I am working on an app using NativeScript with Angular and am running into an issue with the ScrollView element. In short, the issue is that I have an initial view with a list of items and if I press on one of the items to go to a detail view and return to the initial view, the scroll will jump and create a gap on top and then jump back with the gap disappearing.

Here is a GIF of the issue:

Recording of ScrollView issue

As you can see, when you return the the initial view, there is a gap created and I haven't been able to figure out why that happens. The ActionBar is disabled programmatically, I tried removing it altogether or leaving it visible, but it didn't make a difference.

The code that I used is no different than the Angular and TypeScript template that can be installed using the following command: tns create MyApp --ng or can also be found on GitHub.

All I did then is disable the ActionBar and change items.component.html to:

<GridLayout>
  <ScrollView>
    <StackLayout>
      <StackLayout *ngFor="let item of items" [nsRouterLink]="['/item', item.id]">
        <AbsoluteLayout style.backgroundColor="gray">
          <FlexboxLayout left="15" top="110" flexDirection="column">
            <Label [text]="item.id"></Label>
            <Label [text]="item.name"></Label>
          </FlexboxLayout>
        </AbsoluteLayout>
      </StackLayout>
    </StackLayout>
  </ScrollView>
</GridLayout>

I have stripped away all unnecessary styling in order to pinpoint what the issue is and it seems like the culprit is the AbsoluteLayout element. Removing it makes the issue go away, but I have been unable to figure out why it causes the issue in the first place. I am fully aware of the existence of the ListView element, but would like to use a fully custom list for more customization.

As for my programming environment, I am running on NativeScript version 3.3.0 with tns-core-modules and tns-ios also on 3.3.0. Everything was tested on an actual iPhone with iOS 11.

So my question is: Why does this issue occur and how can it be solved?

Upvotes: 2

Views: 678

Answers (1)

Dexter
Dexter

Reputation: 2472

I noticed that the space above the ScrollView is as high as the iOS status bar leading me to believe that this is an iOS specific issue. Furthermore, I found a feature request for a translucent status bar on GitHub. The solution proposed is to add the following to the controller of the page:

this._page.style.marginTop = -20;

This solved my ScrollView issue, the same issue can also be solved by adding a StackLayout with a height of 20 as the first element in a view, but this would ruin most user interfaces.

Upvotes: 1

Related Questions