Swipable Item

This is a View that can be swiped left or right to perform an action on swipe or reveal Swipeable Item Buttons which have their own. Typically you'd use it inside a Swipeable List, but it can also be used by itself.

How to use

By default, there are no buttons, and "On Swiped Right" and "On Swiped Left" actions are used when swiping.

There are config props titled "Left/Right Swipe Configuration" where you can set up what is shown under the item in either direction.

Any children of this view are rendered on the top swipeable part and Swipeable Item Buttons can be nested inside the Swipeable Item to be shown below.

One thing to note is that if you have Actions set on one of the Triggers for the Swipeable Item or any of the direction-specific props configured, you cannot then use Swipeable Item Buttons inside of it which are configured for the same swipe direction (left/right). That means you can combine the two, but they have to be configured for opposite directions.

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.

Configuration Properties

Basic

Property	Description
Component name	The name of the component as it appears in the Screen's component tree
Swipe Activation Percentage	Percentage of swipe completion needed to trigger onSwipedLeft or onSwipedRight. Overriden by 'Left activation value' and 'Right activation value'
Close on press	Whether the view should be closed/dismissed when pressed

Advanced

Property	Description
Left activation value	The X translation value on the left side that triggers onSwipedRight when surpassed (positive value). Defaults to 80% of half view width
Right activation value	The X translation value on the right side that triggers onSwipedLeft when surpassed (negative value). Defaults to negative 80% of half view width
Stop left swipe	The maximum X translation value that is swipable to the left (negative value). Defaults to negative half view width
Stop right swipe	The maximum X translation value that is swipable to the right (positive value). Defaults to half view width
Change threshold	Change the sensitivity of the swipe on the view
Swipe to close percentage	What % of the left/right does the user need to swipe past to trigger the view closing
Swipe to open percentage	What % of the left/right does the user need to swipe past to trigger the view opening
Swing velocity contribution	Describes how much the ending velocity of the gesture affects whether the swipe will result in the item being closed or open. A velocity factor of 0 (the default) means that the velocity will have no bearing on whether the swipe settles on a closed or open position and it'll just take into consideration the swipeToOpenPercent. Ideal values for this prop tend to be between 5 and 15
Left open value	The X translation value on the left side that that the right swipe snaps to (positive value). Defaults to half view width
Right open value	The X translation value on the right side that that the left swipe snaps to (negative value). Defaults to negative half view width
Friction	Controls the 'bounciness' of the swipe animation

Left swipe

Property	Description
Left swipe color	Color of text and icon displayed under the view when swiping left
Left swipe icon size	Size of icon displayed under the view when swiping left
Left swipe title	Title displayed under the view when swiping left
Left swipe icon	Icon displayed under the view when swiping left
Left swipe background	Background color displayed under the view when swiping left

Right swipe

Property	Description
Right swipe color	Color of text and icon displayed under the view when swiping right
Right swipe icon size	Size of icon displayed under the view when swiping right
Right swipe title	Title displayed under the view when swiping right
Right swipe icon	Icon displayed under the view when swiping right
Right swipe background	Background color displayed under the view when swiping right

Data Properties

Property	Description
Disable left swipe	Whether left swipe is enabled or not
Disable right swipe	Whether right swipe is enabled or not

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 swiped right	Runs the Actions when swiped right
On swiped left	Runs the Actions when swiped left