https://github.com/dancormier/react-native-swipeout
iOS-style swipeout buttons behind component
https://github.com/dancormier/react-native-swipeout
Last synced: about 1 month 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 10 years ago)
- Default Branch: master
- Last Pushed: 2020-09-16T16:57:25.000Z (about 5 years ago)
- Last Synced: 2025-01-15T20:40:56.524Z (10 months 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
## 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)