@rn-components-kit/swipe-out

SwipeOut

English | 中文

iOS-style swipe-out buttons that appear from behind a component. It supports the following features:

• left and right two directions
• multiple hidden buttons
• fully customized hidden part

How to use

npm install @rn-components-kit/swipe-out --save

Preview	Code
	Demo1 Code
	Demo2 Code
	Demo3 Code

Props

• style
• left
• right
• onBeginDragging
• onEndDragging

Reference

Props

style

Allow you to customizr style

Type	Required	Default
object	no	-

left

The config for left hidden part. It supports followings:

1. function[() => React.ReactElement]: allows you to fully customize the hidden component
2. object[Option]: a pre-setted style for button, you need to specify title, color and onPress
3. array[Option[]]: multiple buttons

Option:

• title[string]: text to display in button
• color[string]: background color of button
• onPress[function]: callback will be triggered when pressing the button

Type	Required	Default
() => React.ReactElement | Option | Option[] | null	no	-

right

The config for right hidden part (same to left)

Type	Required	Default
() => React.ReactElement | Option | Option[] | null	no	-

onBeginDragging

() => void

A callback will be triggered when you begin to drag SwipeOut

Type	Required	Default
function	no	() => {}

onEndDragging

() => void

A callback will be triggered when dragging operation ends

Type	Required	Default
function	no	() => {}