React Native Swipe Example

index.ios.js

'use strict';

var React = require('react-native');
var {
  StyleSheet,
  PanResponder,
  View,
  AppRegistry,
  Dimensions
} = React;

var windowSize = Dimensions.get('window');

var AwesomeProject = React.createClass({

  statics: {
    title: 'Visual Noble',
    description: '',
  },

  _panResponder: {},

  componentWillMount: function() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
      onPanResponderRelease: this._handlePanResponderEnd,
      onPanResponderTerminate: this._handlePanResponderEnd,
    });
  },

  componentDidMount: function() {
  },

  render: function() {
    return (
      <View
        style={styles.container}
        {...this._panResponder.panHandlers}>
      </View>
    );
  },
  _handleStartShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {
    return true;
  },
  _handleMoveShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {
    return true;
  },
  
  getSwipeDirection: function(e){

    var up = e.nativeEvent.pageY < (windowSize.height / 2);
    var verticalDif = Math.abs(e.nativeEvent.pageY - (windowSize.height / 2));

    var left = e.nativeEvent.pageX < (windowSize.width / 2);
    var horizontalDif = Math.abs(e.nativeEvent.pageX - (windowSize.width / 2));

    var direction;
    if(verticalDif > horizontalDif){
      direction = up ? 'up' : 'down';
    }else{
      direction = left ? 'left' : 'right';
    }
    return direction;
  },

  _handlePanResponderEnd: function(e: Object, gestureState: Object){

    var direction = this.getSwipeDirection(e);
    console.log(direction);
  },
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 64,
  },
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);