Skip to main content
Version: 4.0.0-rc.1

ListItem.Swipeable

We offer a special kind of ListItem which is swipeable from both ends and allows users select an event.

Usage

<ListItem.Swipeable
leftContent={(reset) => (
<Button
title="Info"
onPress={() => reset()}
icon={{ name: 'info', color: 'white' }}
buttonStyle={{ minHeight: '100%' }}
/>
)}
rightContent={(reset) => (
<Button
title="Delete"
onPress={() => reset()}
icon={{ name: 'delete', color: 'white' }}
buttonStyle={{ minHeight: '100%', backgroundColor: 'red' }}
/>
)}
>
<Icon name="My Icon" />
<ListItem.Content>
<ListItem.Title>Hello Swiper</ListItem.Title>
</ListItem.Content>
<ListItem.Chevron />
</ListItem.Swipeable>

Props

note

Includes all ListItem props.

NameTypeDefaultDescription
leftContentReactNode or resetCallback => ReactNodeLeft Content.
leftStyleReactNode or resetCallback => ReactNodeStyle of left container.
leftWidthnumberScreenWidth / 3Width to swipe left.
onSwipeBegin(direction: left or right) => anyHandler for swipe in either direction
onSwipeEndFunctionHandler for swipe end.
rightContentReactNode or resetCallback => ReactNodeRight Content.
rightStyleReactNode or resetCallback => ReactNodeStyle of right container.
rightWidthnumberScreenWidth / 3Width to swipe right.