DEV Community

Cover image for ListView in ScrollView Nativescript Angular

Posted on

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:

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._

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

Enter fullscreen mode Exit fullscreen mode


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

Image description

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';
Enter fullscreen mode Exit fullscreen mode

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

//First check if is Android
//get object from EventData and convert it as ListView class object

   const listView = e.object as ListView;
   // and you can change property like that
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Now you can check your nested scroll ListView.

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

Top comments (0)