---
id: listitem_swipeable
title: ListItem.Swipeable
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import {} from "react-native-elements";
import Usage from "../component_usage/ListItem.Swipeable.mdx";

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

## Usage

<Usage />

## Props

:::note
Includes all [ListItem](listitem#props) props.
:::

<div class='table-responsive'>

| Name           | Type                                    | Default           | Description                           |
| -------------- | --------------------------------------- | ----------------- | ------------------------------------- |
| `leftContent`  | ReactNode or resetCallback => ReactNode |                   | Left Content.                         |
| `leftStyle`    | ReactNode or resetCallback => ReactNode |                   | Style of left container.              |
| `leftWidth`    | number                                  | `ScreenWidth / 3` | Width to swipe left.                  |
| `onSwipeBegin` | `(direction: left` or `right) => any`   |                   | Handler for swipe in either direction |
| `onSwipeEnd`   | Function                                |                   | Handler for swipe end.                |
| `rightContent` | ReactNode or resetCallback => ReactNode |                   | Right Content.                        |
| `rightStyle`   | ReactNode or resetCallback => ReactNode |                   | Style of right container.             |
| `rightWidth`   | number                                  | `ScreenWidth / 3` | Width to swipe right.                 |

</div>
