Swipeable List
This is a simple list component that is meant to hold a list of Swipeable Item components. It works like a List except 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 work together with Swipeable Item and Swipeable Item Button as child components.
A Swipeable List component receives an array of data that it will loop over to create an instance of the Swipeable List's child components for each item in the array. This can be a simple array of strings, or even an array of complex objects.
The data you pass to a Swipeable List component's Data prop can come from a Variable if, for example, you have a fixed array of values or one populated using an API Request Action. You can also pass data to a Swipeable List from a Fetch component on your Screen.
For each item in the array that you pass to a Swipeable List, the List will render an instance of all child components within the Swipeable List component. For example, if you have a Swipeable List component that contains a single nested Text component and you pass it an array which contains 20 items, the Swipeable List will render 20 Text components - one for each item in the array passed to the Swipeable List.
The data for each item in the array will be available to all child components within the List component. The item data will be available as Swipeable List item in any variable dropdowns for props in the component's Data tab. Any keys for the item will also be listed if you didn't skip the Test step when saving your Endpoint.
That means that our Text component above will have access to the list item's data in their variable selection dropdowns in the Data panel. So, if your array contains objects with keys such as name and description, we could pass those values to our Text component inside the Swipeable List and each one would display their own data.
Learn how to set and use the Fetch and List component in Fetching Data.
Style Properties
Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.=
Component Specific Styles
Configuration Properties
| Property | Description |
|---|---|
| Component Name | The name of the component as it appears in the Screen's component tree |
| Estimated Item Size | Approximate size of the items before rendering. (Only applies when 'FlashList' is the selected list component) |
| End reached threshold | How 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 swiping | Whether to disable list scrolling when swiping or not |
| List component | The underlying list component to be rendered. FlatList or FlashList |
| Horizontal | Render list horizontally |
| Inverted | If true, reverses the direction. |
| Number of columns | Number of columns to use when rendering the items |
| Initial number to render | How many items to render in the initial batch |
| Show horizontal scroll indicator | When true, shows a horizontal scroll indicator. The default value is true. |
| Show vertical scroll indicator | When true, shows a vertical scroll indicator. The default value is true. |
| Allow Touch Events | The default behavior of the Keyboard is to dismiss when a touch component (for example, a Button) is pressed. This default behavior is set by the value Never. Use the value Always when you want to continue to display the keyboard without dismissing the keyboard. In this scenario, to dismiss the keyboard after a touch component is pressed you will use the Dismiss Keyboard Action available on On Press trigger. |
Data Properties
| Property | Description |
|---|---|
| Data | The data for the list to render. Usually an array of objects |
| Item unique key | Provide a way to derive a unique key (e.g. an id or a name) for a given item in the list |
Conditional Display
You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.
Triggers
| Trigger | Description |
|---|---|
| On Refresh | Run Actions when the element is refreshed (i.e. pull to refresh) |
Updated 4 months ago