ListView in ScrollView Nativescript Angular

When you develop a mobile application with NativeScript Angular, you can stuck with some bugs with android or ios. In this article, we will solve the nested scrolling problem in android, if you found this article I am sure that you have some kind of scrolling problem with android.

If you have a main dashboard with ScrollView and you want to add inside ScrollView another ListView you can find that you cant scroll nested ListView. You can scroll only through parent ScrollView. Even if you follow documentation using ListView in ScrollView you will have a problem with android.

From documentation:
"
_Important

Using the ListView component inside a ScrollView or ScrollView inside the ListView's items can lead to poor performance and can reflect the user experience. To avoid this issue, we should specify the height explicitly for the ListView in the scenario when the ListView is nested in ScrollView and the ScrollView's height - when the component is used inside the ListView._

<ScrollView>
  <StackLayout>
    <ListView height="150" [items]="countries"> ... </ListView>
  </StackLayout>
</ScrollView>

"

For this situation in native Java Android you need to add the property nestedScrollingEnabled to true, like the image below:

If we can change property in Java, we can change it in Nativescript too. First, you need to import the ListView class from @nativescript/core like the code below:

import { ListView } from '@nativescript/core';

Then we will create a function to change properties like the code below:

onListView(e:EventData){
//First check if is Android
  if(isAndroid){
//get object from EventData and convert it as ListView class object

   const listView = e.object as ListView;
   // and you can change property like that
   listView.nativeView.setNestedScrollingEnabled(true);
  }
}

We need add "(loaded)" to html ListView like the code below:

<ListView
  (loaded)="onListView($event)"
  [items]="someArray"
>

Now you can check your nested scroll ListView.

If You find this article useful please write comment and push the like button.