react-native-swipy v0.0.1

React Native Swipy

A powerful React Native swipe component. Supports both iOS and Android.

Installation

npm i --save react-native-swipy

Usage

Wrap your ListView/TableView items with the Swipy component:

import Swipy from 'react-native-swipy';

const leftContent = <Text>Pull to activate</Text>;

const rightButtons = [
  <TouchableHighlight><Text>Button 1</Text></TouchableHighlight>,
  <TouchableHighlight><Text>Button 2</Text></TouchableHighlight>
];

function MyListItem() {
  return (
    <Swipy leftContent={leftContent} rightButtons={rightButtons}>
      <Text>My Swipy content</Text>
    </Swipy>
  );
}

Props

Advanced Props

Check out the Swipy component's propTypes 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.

class MyListItem extends Component {

  swipeable = null;

  handleUserBeganScrollingParentView() {
    this.swipeable.recenter();
  }

  render() {
    return (
      <Swipy onRef={ref => this.swipeable = ref} rightButtons={rightButtons}>
        <Text>My Swipy content</Text>
      </Swipy>
    );
  }
}

Example

To run the example:

npm run build
cd example
npm install
react-native run-ios # or run-android

Common Issues

Action being triggered more than once (#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.

<ScrollView scrollEnabled={!this.state.isSwiping}>
  <Swipy
    onSwipeStart={() => this.setState({isSwiping: true})}
    onSwipeRelease={() => this.setState({isSwiping: false})}
  </Swipy>
</ScrollView>

or:

<ListView
  scrollEnabled={!this.state.isSwiping}
  renderRow={() => (
    <Swipy
      onSwipeStart={() => this.setState({isSwiping: true})}
      onSwipeRelease={() => this.setState({isSwiping: false})}
    </Swipy>
  )}
/>

License

MIT