react-native-swipeout
iOS-style swipeout buttons that appear from behind a component
issues)
To do for v3.0.0 (Done
- Android compatibility (#43)
- Implement
Animated
library- Remove
react-tween-state
dependency (#49, #73)
- Remove
- Add ability to pass props to swipeout parent
- Including
style
- Including
- Add ability to pass props to buttons
- Including
onPress
,style
,underlayColor
- Including
- Add ability to pass props to buttons
- Add
onClose
prop (#32) - Update button
type
prop - Add ability to set custom button widths (#42)
- Reimplement
scroll
prop (consideringAnimated
library) - Reimplement
close
(nowopen
) prop (#54)
Needs Outside Verification
- iPhone 6s compatibility (#44)
Not Done
- Test on Android (#60, #78)
- Verify performance improvements (#40, #41)
- Add
overswipe
button prop (#10) - Compensate for device rotation (#7)
- Rewrite Readme
- Update preview gif (#21)
- Update wiki
Installation
npm install --save react-native-swipeout
Usage example
See index.ios.js for a more detailed example. See the Wiki usage tips.
var Swipeout = require('react-native-swipeout')
// Buttons
var swipeoutBtns = [
{
text: 'Button'
}
]
// Swipeout component
<Swipeout right={swipeoutBtns}>
<View>
<Text>Swipe me left</Text>
</View>
</Swipeout>
Props
All props are optional.
Prop | Type | Default | Description |
---|---|---|---|
autoClose | bool | false | auto close on button press |
open | string/bool | "left", "right", or false |
|
left | array | [] | swipeout buttons on left |
onClose | func | function when buttons are hidden | |
onOpen | func | function when buttons are exposed | |
props | object | null | pass props to swipeout (ex: style ) |
right | array | [] | swipeout buttons on right |
scroll | func | prevent parent scroll |
Button props
Prop | Type | Default | Description |
---|---|---|---|
component | string | null | pass custom component to button |
props | object | null | pass props to button (ex: onPress , style , underlayColor ) |
text | string | 'Click Me' | text |
type | string | null | danger /delete , primary , secondary , success |