Nativescript app showing scanty/few ui elements on ios emulator

[boluwatifee4]

After running my app on android emulator it renders correctly but on ios emulator I have a scanty ui screen. Please what could I be doing wrong ?

I started the app using ns run ios. But then i was expecting to see my full ui components loaded but on my screen i have just few components showing up, few titles a pic and nothing else

[rigor789]

It's going to be impossible to help troubleshoot this without more details like code, possibly screenshots, logs and anything else that might be relevant.

[rigor789]

Share the code that's used for that ui, and a screenshot of it on android for reference of how it should look.

[boluwatifee4]

So i took my time to study the code and all again and i figured out the code uses standalone components but the NativescriptCommonModule was not imported into the standalone component, with other minor issues i resolved. After the resolution I then wrote my html template in this way:

<StackLayout class="home">
  <app-post-creator></app-post-creator>
  <ScrollView orientation="vertical" scrollBarIndicatorVisible="true">
    <ListView [items]="posts">
      <ng-template let-item="item">
        <StackLayout>
          <app-post-item [post]="item"></app-post-item>
        </StackLayout>
      </ng-template>
    </ListView>
  </ScrollView>
</StackLayout>

With the above template my view and array was iterated on ios and show everything in the array and scrollable behaved normal on ios. But on android there was no iteration it showed only the first object in the array.

However, i went ahead to make further changes and resulted to this:

<StackLayout class="home">
  <app-post-creator></app-post-creator>
    <StackLayout class="home">
    <StackLayout
      *ngFor="let post of posts; let i = index; trackById"
      id="{{ post.id }}"
    >
      <app-post-item [post]="post"></app-post-item>
    </StackLayout>
  </StackLayout>
</StackLayout>

The above template iterates the array but it. scrolls on android but does not scroll on ios.

I am pretty much confused as to why that is. Any help please @rigor789

[rigor789]

You should not nest a ListView inside a ScrollView, try something like this instead:

<GridLayout rows="auto, *" class="home">
  <app-post-creator></app-post-creator>
  <ListView row="1" [items]="posts">
    <ng-template let-item="item">
      <StackLayout>
        <app-post-item [post]="item"></app-post-item>
      </StackLayout>
    </ng-template>
  </ListView>
</GridLayout >

ListView itself is scrollable, so there's no need to wrap it in a ScrollView. Using a GridLayout rather than a stack helps constrain the element sizes, auto, * means row0 will take up the space it needs, but no more... and row1 will take all the remaining space (*) on screen.

If you stick a ListView inside a StackLayout, you have to give it an explicit height otherwise, because a stack can flow beyond the screen bounds, and in that case the ListView might end up being as high as all of it's items (breaking view recycling and affecting performance on long lists).

---

Note: I haven't set row=0 on app-post-creator because that's the default value, however you might need to wrap it in an extra container (like ContentView, or GridLayout etc.) depending on what's inside your app-post-creator component.

[boluwatifee4]

Thanks alot for your response. I have applied this but on ios it is showing all the items in my array nd working fine but on android it is showing only the first item in the array.

[rigor789]

What's in app-post-item? Could be that it also needs some adjustments in it's layout.