Skip to main content
Version: Bleeding Edge 🚧

ListItem.Swipeable

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

Import

import { ListItem } from "@rneui/themed";

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
animationAnimated.TimingAnimationConfigObject with duration 350ms and type timingDecide whether to show animation.
leftContentReactNode or resetCallback => ReactNodeLeft Content.
leftStyleView StyleStyle of left container.
leftWidthnumberScreenWidth / 3Width to swipe left.
onSwipeBegin(direction: left | right) => unknownHandler for swipe in either direction
onSwipeEnd() => unknownHandler for swipe end.
rightContentReactNode or resetCallback => ReactNodeRight Content.
rightStyleView StyleStyle of right container.
rightWidthnumberScreenWidth / 3Width to swipe right.