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

import { IconsStyle } from "@site/src/components/Docs_Icons";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import { BiInfoCircle } from "react-icons/bi";
import Usage from "../component_usage/ListItem.Swipeable.mdx";

<IconsStyle />

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

## Usage

<div class="row inline-flex-center">
  <div class="col col--3">
    <h4>Import</h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`import { ListItem } from '@rneui/themed';`}</CodeBlock>
  </div>
  <div class="col col--3">
    <h4>
      Theme Key{" "}
      <a href="../customizing#using-themeprovider">
        <BiInfoCircle />
      </a>
    </h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`ListItemSwipeable`}</CodeBlock>
  </div>
</div>

<Usage />

## Props

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

<div class='table-responsive'>

| Name            | Type                                      | Default                                      | Description                                 |
| --------------- | ----------------------------------------- | -------------------------------------------- | ------------------------------------------- |
| `animation`     | Animated.TimingAnimationConfig            | `Object with duration 350ms and type timing` | Decide whether to show animation.           |
| `leftContent`   | ReactNode or resetCallback => ReactNode   |                                              | Left Content.                               |
| `leftStyle`     | View Style                                |                                              | Style of left container.                    |
| `leftWidth`     | number                                    | `ScreenWidth / 3`                            | Width of swipe left container.              |
| `minSlideWidth` | number                                    | `ScreenWidth / 3`                            | minimum horizontal distance to open content |
| `onSwipeBegin`  | `(direction: left` \| `right) => unknown` |                                              | Handler for swipe in either direction       |
| `onSwipeEnd`    | () => unknown                             |                                              | Handler for swipe end.                      |
| `rightContent`  | ReactNode or resetCallback => ReactNode   |                                              | Right Content.                              |
| `rightStyle`    | View Style                                |                                              | Style of right container.                   |
| `rightWidth`    | number                                    | `ScreenWidth / 3`                            | Width of swipe right container.             |

</div>
