Swipeable List

This is a simple list component that is meant to hold a list of Swipeable Item components. The benefit of using this over a regular List component is that this list will disable scrolling when swiping any item of that list.

How to use

The Swipeable List is intended to be used with the Swipeable Item component. Like a regular List, whatever you nest inside the Swipeable List will be repeated for each item in the array of data you pass to its Data prop. The difference is this list component will prevent the list from scrolling when you are swiping an item in the list.

Configuration Properties

PropertyDescription
Component NameThe name of the component as it appears in the Screen's component tree
Estimated Item SizeApproximate size of the items before rendering. (Only applies when 'FlashList' is the selected list component)
End reached thresholdHow far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.
Disable scroll when swipingWhether to disable list scrolling when swiping or not
List componentThe underlying list component to be rendered. FlatList or FlashList
HorizontalRender list horizontally
InvertedIf true, reverses the direction.
Number of columnsNumber of columns to use when rendering the items
Initial number to renderHow many items to render in the initial batch
Refreshing colorColor of the refresh indicator
Show horizontal scroll indicatorWhen true, shows a horizontal scroll indicator. The default value is true.
Show vertical scroll indicatorWhen true, shows a vertical scroll indicator. The default value is true.

Data Properties

PropertyDescription
DataThe data for the list to render. Usually an array of objects
Item unique keyProvide a way to derive a unique key (e.g. an id or a name) for a given item in the list

Triggers

TriggerDescription
On RefreshRun when the element is refreshed (i.e. pull to refresh)