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

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

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.

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.

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