Native Custom Listview

Content Type: Widget
Categories: Mobile

Overview

Mendix listview with finegrained control over react elements and rendering

Documentation

React Native customisable flatlist

Description

This is a custom listview widget for use in Native projects. With this widget, you have fine grained control over the amount of items shown and how they are rendered while opening a page with a listview. This widget includes all the options that React Native offers for the Flatlist component, on which this widget is based. All these options are now changeable from the modeler, so you don't have to dive into the code yourself.

Instead of a flatlist, you can enable using a scrollview with this widget. This could be useful when having nested lists on your page. With a scrollview all items are rendered at once.

Typical usage scenario

This widget was build to improve performance when dealing with larger amounts of items on a native listview page. Also, with the getItemLayout, scrolling performance is greatly improved.

Features and limitations

Features:

  • Customizable React Native flatlist from the modeler itself
  • ScrollTo function (based on index of item)
  • Completely customisable rendering of items
  • Performance gains when using this widget with larger amounts of items
  • Scrollview option for nested lists

Limitations:

  • No customisable options for the scrollview for now
  • Let me know!

Dependencies

  • Mendix 8.15.0 and higher

Installation

Download the widget from the marketplace and place on a native page

Configuration

This widget uses the React Native flatlist defaults when first placing it on a page. Please refer to https://reactnative.dev/docs/flatlist for all the customisable options.

Bugs

None, please report bugs to Github.

Releases

Version: 1.0.0
Framework Version: 8.15.0
Release Notes: Initial release