https://github.com/dancormier/react-native-swipeout

iOS-style swipeout buttons behind component
https://github.com/dancormier/react-native-swipeout

Last synced: 28 days ago
JSON representation

iOS-style swipeout buttons behind component

• Host: GitHub
• URL: https://github.com/dancormier/react-native-swipeout
• Owner: dancormier
• License: mit
• Archived: true
• Created: 2015-05-28T03:00:42.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-09-16T16:57:25.000Z (over 4 years ago)
• Last Synced: 2025-01-15T20:40:56.524Z (about 1 month ago)
• Language: JavaScript
• Size: 20.2 MB
• Stars: 2,617
• Watchers: 49
• Forks: 651
• Open Issues: 108
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-swipeout ★2194 - iOS-style swipeout buttons behind component (Components / UI)
• awesome-react-native - react-native-swipeout
• react-native-awesome - react-native-swipeout
• awesome-react-native - react-native-swipeout ★2194 - iOS-style swipeout buttons behind component (Components / UI)
• awesome-reactnative-ui - react-native-swipeout - style swipeout buttons behind component|<ul><li>Last updated : This week</li><li>Stars : 2325</li><li>Open issues : 105</li></ul>|| (Others)
• awesome-reactnative-ui - react-native-swipeout - style swipeout buttons behind component|<ul><li>Last updated : This week</li><li>Stars : 2325</li><li>Open issues : 105</li></ul>|| (Others)
• awesome-react-native - react-native-swipeout
• awesome-react-native - react-native-swipeout ★2194 - iOS-style swipeout buttons behind component (Components / UI)
• ReactNativeMaterials - react-native-swipeout
• awesome-react-native-ui - react-native-swipeout ★891 - iOS-style swipeout buttons behind component (Components / UI)
• awesome-react-native - react-native-swipeout ★2194 - iOS-style swipeout buttons behind component (Components / UI)

README

        
# DEPRECATED

this is no longer supported, please consider using https://github.com/software-mansion/react-native-gesture-handler instead.

# 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

  

    Swipe me left

  

```

## 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)