# react-native-swipeout

> iOS-style swipeout buttons behind component

Latest version **2.3.6** (published 2018-08-10) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-native-swipeout
pnpm add react-native-swipeout
yarn add react-native-swipeout
bun add react-native-swipeout
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.3.6 |
| Published | 2018-08-10 |
| First published | 2015-05-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 111.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2606 |
| Author | Dan Cormier |
| Maintainers | silentcloud |
| Keywords | react-native, react-component, ios, swipeout, button, swipe, ui |

## Links

- npm: https://www.npmjs.com/package/react-native-swipeout
- Repository: https://github.com/dancormier/react-native-swipeout
- Issues: https://github.com/dancormier/react-native-swipeout/issues
- npm.io page: https://npm.io/package/react-native-swipeout

## Dependencies (3)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [react-tween-state](https://npm.io/package/react-tween-state.md) ^0.1.5
- [create-react-class](https://npm.io/package/create-react-class.md) ^15.6.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.3.6 (latest) — 2018-08-10
- 2.3.5-beta.1 — 2018-08-10
- 2.3.5 — 2018-08-09
- 2.3.5-beta.0 — 2018-08-09
- 2.3.4 — 2018-07-24
- 2.3.3 — 2017-12-11
- 2.3.2 — 2017-12-11
- 2.3.1 — 2017-10-25
- 2.3.0 — 2017-10-24
- 2.3.0-alpha.0 — 2017-10-24
- 2.2.2 — 2017-08-02
- 2.2.1 — 2017-08-01
- 2.2.0 — 2017-07-31
- 2.1.5 — 2017-07-24
- 2.1.4 — 2017-07-20
- … 48 more at https://npm.io/package/react-native-swipeout/versions

## README

# react-native-swipeout
iOS-style swipeout buttons that appear from behind a component

![swipeout preview](http://i.imgur.com/oCQLNFC.gif)

## Installation
```
npm install --save react-native-swipeout
```

## Usage example

See example/index.ios.js for a more detailed example.
See the [Wiki](https://github.com/dancormier/react-native-swipeout/wiki) usage tips.
To use swipeout behind a iOS-style listitem, try [react-native-listitem](https://github.com/dancormier/react-native-listitem).

```js
import Swipeout from 'react-native-swipeout';

// Buttons
var swipeoutBtns = [
  {
    text: 'Button'
  }
]

// Swipeout component
<Swipeout right={swipeoutBtns}>
  <View>
    <Text>Swipe me left</Text>
  </View>
</Swipeout>

```

## Props

Prop            | Type   | Optional | Default   | Description
--------------- | ------ | -------- | --------- | -----------
autoClose       | bool   | Yes      | false     | auto close on button press
backgroundColor | string | Yes      | '#dbddde' |
close           | bool   | Yes      |           | close swipeout
disabled        | bool   | Yes      |  false    | whether to disable the swipeout  
left            | array  | Yes      | []        | swipeout buttons on left
onOpen          | func   | Yes      |           | (sectionID, rowId, direction: string) => void
onClose          | func   | Yes      |           | (sectionID, rowId, direction: string) => void
right           | array  | Yes      | []        | swipeout buttons on right
scroll          | func   | Yes      |           | prevent parent scroll
style           | style  | Yes      |           | style of the container
sensitivity     | number | Yes      | 50         | change the sensitivity of gesture
buttonWidth     | number | Yes      |            | each button width

##### Button props

Prop            | Type   | Optional | Default   | Description
--------------- | ------ | -------- | --------- | -----------
backgroundColor | string | Yes      | '#b6bec0' | background color
color           | string | Yes      | '#ffffff' | text color
component       | ReactNode | Yes      | null      | pass custom component to button
onPress         | func   | Yes      | null      | function executed onPress
text            | string | Yes      | 'Click Me'| text
type            | string | Yes      | 'default' | default, delete, primary, secondary
underlayColor   | string | Yes      | null      | button underlay color on press
disabled        | bool   | Yes      | false     | disable button

## To Do

[https://github.com/dancormier/react-native-swipeout/issues](https://github.com/dancormier/react-native-swipeout/issues)

---
_Source: https://npm.io/package/react-native-swipeout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._