# React Native Swipeable [![NPM version][npm-image]][npm-url] A powerful React Native swipe component. Supports both iOS and Android.

## Installation ```sh npm i --save react-native-swipeable ``` ## Usage Wrap your ListView/TableView items with the `Swipeable` component: ```javascript import Swipeable from 'react-native-swipeable'; const leftContent = Pull to activate; const rightButtons = [ Button 1, Button 2 ]; function MyListItem() { return ( My swipeable content ); } ``` ### Props | prop | type | default | description | |---------------------------------|--------------|---------|-------------------------------------------------------------------------------------------| | `children` | renderable | `null` | swipeable content | | `leftContent` | renderable | `null` | (optional) left content visible during pull action | | `rightContent` | renderable | `null` | (optional) right content visible during pull action | | `leftButtons` | renderable[] | `null` | (optional) array of buttons, first being the innermost; ignored if `leftContent` present | | `rightButtons` | renderable[] | `null` | (optional) array of buttons, first being the innermost; ignored if `rightContent` present | | `leftActionActivationDistance` | integer | 125 | (optional) minimum swipe distance to activate left action | | `onLeftActionRelease` | function | `null` | (optional) user has swiped beyond `leftActionActivationDistance` and released | | `rightActionActivationDistance` | integer | 125 | (optional) minimum swipe distance to activate right action | | `onRightActionRelease` | function | `null` | (optional) user has swiped beyond `rightActionActivationDistance` and released | | `leftButtonWidth` | integer | 75 | (optional) resting visible peek of each left button after buttons are swiped open | | `rightButtonWidth` | integer | 75 | (optional) resting visible peek of each right button after buttons are swiped open | | `onRef` | function | `null` | (optional) receive swipeable component instance reference | | `onPanAnimatedValueRef` | function | `null` | (optional) receive swipeable pan `Animated.ValueXY` reference for upstream animations | ### Advanced Props [Check out the `Swipeable` component's `propTypes`](https://github.com/jshanson7/react-native-swipeable/blob/master/src/index.js#L14) for a huge list of options including animation lifecycle hooks and low-level overrides. ### Instance Methods #### recenter() Imperatively reset swipeable component back to initial position. This is useful if buttons are exposed and the user has begun scrolling the parent view. ```javascript class MyListItem extends Component { swipeable = null; handleUserBeganScrollingParentView() { this.swipeable.recenter(); } render() { return ( this.swipeable = ref} rightButtons={rightButtons}> My swipeable content ); } } ``` ## Example To run [the example](https://github.com/jshanson7/react-native-swipeable/blob/master/example/swipeable-example.js): ```sh npm run build cd example npm install react-native run-ios # or run-android ```

## Common Issues > Action being triggered more than once ([#3](https://github.com/jshanson7/react-native-swipeable/issues/3)) This seems to occur occasionally (but not always) with certain `ScrollView` and `ListView` configurations. The fix is simple though, just ensure that `scrollEnabled` is set to `false` while the user is swiping a row. ```js this.setState({isSwiping: true})} onSwipeRelease={() => this.setState({isSwiping: false})} ``` or: ```js ( this.setState({isSwiping: true})} onSwipeRelease={() => this.setState({isSwiping: false})} )} /> ``` ## License MIT [npm-image]: https://badge.fury.io/js/react-native-swipeable.svg [npm-url]: https://npmjs.org/package/react-native-swipeable

	Stars	Issues	Version	Updated	Created
react-native-swipeable	1,202	96	0.6.0	7 years ago	7 years ago
react-native-swipeable-flat-list			0.1.2	4 years ago	7 years ago
react-native-swipeout	2,614	108	2.3.6	6 years ago	9 years ago

react-native-swipeable vs react-native-swipeable-flat-list vs react-native-swipeout

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past