Nativescript: [Feature] ListView enable/disable scrolling

[yss14]

Hey NativeScript community

Often it is very useful using a ListView as layout or structure inside a view e.g. for a little settings view.
The problem is, that these lists should not have scrolling enabled, because they are static.

I already use this in my application and it's very useful and easy to use. At the moment I am prototyping the ListView class, but in the feature it would be nice if this is a build in method of the ListView class so that other developer also have the ability to use this method on a ListView.

This is my code so far, nothing special.
Using the alwaysBounceVertical attribute of a NSTableView (found here)
and the setClickable method on android (found here)

Edit: scrollEnabled property seems to be a better solution on iOS!

const ListView = require("ui/list-view").ListView;
ListView.prototype.enableScrolling = function(){
    if(application.ios) {
        this.ios.alwaysBounceVertical = true;
    } else {
        this.android.setClickable(true);
    }
}

ListView.prototype.disableScrolling = function(){
    if(application.ios) {
        this.ios.alwaysBounceVertical = false;
    } else {
        this.android.setClickable(false);
    }
}

What are your thoughts on that?

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @yss14,
There is NativeScirpt property that provides such functionality. You could set isUserInteractionEnabled to false and this will disable the scrolling. You could review the example below:

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <GridLayout>
      <ListView isUserInteractionEnabled="false" items="{{ source }}"  loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap">
          <ListView.itemTemplate>
              <GridLayout rows="50 *" columns="*" height="100">
                <Label text="{{ title }}" row="0" col="0" textWrap="true" />
                <Image src="{{ imageSrc }}" row="1" col="0" stretch="aspectFill" height="100"/>
              </GridLayout>
          </ListView.itemTemplate>
      </ListView>
  </GridLayout>
</Page>

I hope this will help.

[yss14]

Hi @tsonevn

Thanks for your reply :)

The problem of the isUserInteractionEnabledis that it prevents all events on the ListView, also the tap-event which can be important.
Let's take the following settings view as example:

In this case you need the tap event on some ListItems. The list itself should be static.

[tsonevn]

Hi @yss14,
Excuse me for my misunderstanding. However I still unable to understand the idea for including such a feature for the ListView. Regarding to that for the purpose of your app you could use Repeater component, which provides simple way to display collection of items. You could review the example from our documentation.

Hope this helps.

[burkeholland]

An example of where this is needed is if you have a list of items that you want to be able to reorder. Reordering the items will trigger a scroll, which you do not want. In that case, you want to catch a tap event on the drag handle, disable scrolling on the list view and then re-enable scrolling when the drop occurs.

[tsonevn]

Hi @burkeholland,

For this case, you could use nativescript-telrik-ui RadListView, which extends the pure NativeSciprt ListView functionality and provides an easy way to reorder the ListView items.

In my opinion, disable scrolling functionality is not needed for the pure NativeScipt ListView when we have another component, which provides an elegant way to do this.

[sbwrege2z]

The Repeater can be nested it inside ScrollViews (which is great), but it's implementation is not a rich as the ListView at the moment. The ListView has support for multiple item templates, nice tap effects (row highlighting), etc. I think it would be nice if the interface for the ListView and Repeater were identical except that the ListView scrolls and the Repeater does not.

[sbwrege2z]

Can you put a ListView inside a ScrollView IF the list view has all the items loaded? In other words, if a item's row height is 50, and you have 100 items in your list, if you make the list view height 5000 then it will not scroll. This basically turns the ListView into a Repeater, so can it be put inside a ScrollView or will there still be event propagation issues?

[webleaf]

@tsonevn setting isUserInteractionEnabled to false does not disable ListView scrolling on Android. You can check your example https://github.com/NativeScript/NativeScript/issues/2892#issuecomment-253536941 or such:

app.run({
    create: () => {
        const listview = new ListView();
        listview.rowHeight = 60;
        listview.items = new Array(50);

        listview.isUserInteractionEnabled = false; // <--- DON'T WORK

        listview.itemTemplate = () => {
            const label = new Label();
            label.text = "some text";
            return label;
        };
        return listview;
    }
});

Tested with NS 5.4.2 (can't upgrade to NS 6 for now)