narendrashetty

...
onSwipeLeft() {
  const { _counter } = this.state;
  let newCounter = _counter < screens.length - 1 ? _counter + 1 : 0;
  this.swipeTo(newCounter);
}
onSwipeRight() {
  const { _counter } = this.state;
  let newCounter = _counter === 0 ? screens.length - 1 : _counter - 1;
  this.swipeTo(newCounter);

narendrashetty

componentWillMount() {
  this.panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderRelease: (evt, gestureState) => {
      const swipeDirection = this._getSwipeDirection(gestureState);
      this._triggerSwipeHandlers(swipeDirection, gestureState);
    }
  });
}
_triggerSwipeHandlers(swipeDirection, gestureState) {

narendrashetty

const swipeDirections = {
  SWIPE_LEFT: 'SWIPE_LEFT',
  SWIPE_RIGHT: 'SWIPE_RIGHT'
};
function isValidSwipe(velocity, 
  velocityThreshold, 
  directionalOffset, 
  directionalOffsetThreshold) {
    return Math.abs(velocity) >= velocityThreshold && 
      Math.abs(directionalOffset) < directionalOffsetThreshold;

narendrashetty

...
export default class Swipe extends React.Component {
componentWillMount() {
    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderRelease: () => {}
    });
  }
render() {
    return (

narendrashetty

...
render() {
  return (
    <Swipe 
      style={[styles.container, {
        backgroundColor: this.state.currentbg
      }]}
    >
      <CircleTransition
        ref={(circle) => { this.circleTransition = circle }}

narendrashetty

...
this.circleTransition.start(newColor, this.changeColor.bind(this, newColor));
...
changeColor(newColor) {
  this.setState({
    currentbg: newColor
  });
}
...

narendrashetty

start(color, callback) {
  ...
  this.animate(callback);
  ...
}
animate(callback) {
  Animated.timing(this.state.scale, {
    ...
  }).start(() => {
    callback();

narendrashetty

...
start(color) {
  this.setState({
    color: color
  }, () => {
    this.animate();
  });
}
animate() {
  Animated.timing(this.state.scale, {

narendrashetty

...
const screens = [{
  id: 0,
  bgcolor: '#698FB2'
}, {
  id: 1,
  bgcolor: '#68B0B3'
}, {
  id: 2,
  bgcolor: '#9B91BA'

narendrashetty

import React, { Component, PropTypes } from 'react';
import { Easing, Modal, Dimensions, Animated } from 'react-native';
const { width, height } = Dimensions.get('window');
class CircleTransition extends Component {
  constructor (props) {
    super(props);
this.state = {
      scale: new Animated.Value(0),
      color: '#ccc'
    };