Content Type: Widget

Categories: User Interface,Mobile

Native listview that renders items overflowing to multiple lines where necessary

<div id="readme" class="md" data-path="README.md"><article class="markdown-body entry-content container-lg" itemprop="text"><div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">NativeResponsiveListview</h2><a id="user-content-nativeresponsivelistview" class="anchor" aria-label="Permalink: NativeResponsiveListview" href="#nativeresponsivelistview"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Features</h2><a id="user-content-features" class="anchor" aria-label="Permalink: Features" href="#features"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li>Renders the items horizontally or vertically, without scrolling</li> <li>Items will flow into multiple lines where necessary</li> <li>Configure additional content items (for horizontal lists only)</li> <li>Widget does not add any padding or margin</li> <li>No events, if you need onClick, just use a container as widget content</li> <li>No scroll container, place widget in scroll container where necessary</li> <li>Not suitable for really large number of items as all items are rendered directly. No lazy loading!</li> </ul> <p dir="auto">Originally, this widget was intended to show items horizontally only. The vertical option was added because React Native does not approve of nested scrollable items. A listview is scrollable by design. Nesting listviews or nesting a listview in a scrollable view leads to scrolling issues. These are signalled as warnings when running the Make It Native app in developer mode. Quite often, these nested lists have small number of items, so there is no need to make these nested lists scrollable themselves. This widget can be used in these situations as well because it has no scroll container.</p> <p dir="auto">When items are shown horizontally, additional content items can be defined. Use it to create several rows, making sure the content in each row aligns across all items. <strong>Note that this only works properly when all items fit on one line!</strong> If items are wrapped to the next line, each content will be wrapped separately.</p> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Styling</h2><a id="user-content-styling" class="anchor" aria-label="Permalink: Styling" href="#styling"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">These styling objects can be used to style the widget:</p> <ul dir="auto"> <li><code>container</code>: Placed on the container around the entire list. Default depends on the value for the <code>Show vertically</code> property</li> <li><code>itemContainer</code>: Placed on each list item, the default has no styling</li> <li><code>multipleContentContainer</code>: used when shown horizontally and multiple content items are configured</li> </ul> </article></div>