https://github.com/jshanson7/react-native-swipeable

A powerful React Native swipe component.
https://github.com/jshanson7/react-native-swipeable

Last synced: 7 days ago
JSON representation

A powerful React Native swipe component.

• Host: GitHub
• URL: https://github.com/jshanson7/react-native-swipeable
• Owner: jshanson7
• License: mit
• Created: 2017-01-05T02:04:12.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2024-05-10T19:32:36.000Z (7 months ago)
• Last Synced: 2024-11-23T13:37:17.850Z (19 days ago)
• Language: JavaScript
• Homepage:
• Size: 6.89 MB
• Stars: 1,239
• Watchers: 24
• Forks: 272
• Open Issues: 96
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-swipeable

README

        
# 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