React-native-swipeout NPM | npm.io

2.3.6 • Published 6 years ago

Install

Weekly downloads

36,967

License

MIT

Repository

Last release

6 years ago

react-native-swipeout

iOS-style swipeout buttons that appear from behind a component

swipeout preview

Installation

npm install --save react-native-swipeout

Usage example

See example/index.ios.js for a more detailed example. See the Wiki usage tips. To use swipeout behind a iOS-style listitem, try react-native-listitem.

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

react-native react-component ios swipeout button swipe ui

create-react-class prop-types react-tween-state

rn-aht-jitsi-meet react-native-itablet miot-workspace ddt-react-native dictionarymacmillan @everything-registry/sub-chunk-2594 wonderpool-app-driver rn-common react-native-easy-page react-native-cc-test-libary react-native-yoai-uikit react-native-xy-remplate rc-swipeout rc-swipeout-dangbt react-native-freedomen react-native-optimus react-native-swipeout-longpressforandroid slap-react-native-icon-button turnoverbnb-shared-react @arcturis/one-ui unimedia-finance @fruits-chain/react-native @getdemos/react-native-ant-design @infinitebrahmanuniverse/nolb-react-native-sw @ledvance/eziot-rn-pub @ezviz/ys-rn-pub-mini @metasys96/react-native-custom-table @jarryd/rc-swipeout @swdenglian/antd-react-native @sishuguojixuefu/antd-mobile-rn elodin-components fast-paper-native amap-mobile-ui-rn amap-mobile-ui-rn-tsc amap-mobile-ui-test-rn @zalastax/nolb-react-native-sw artwork-mobile-native bumble-react-sdk deskmaappv2

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago