Decker.js

import React from 'react';
import { StyleSheet, Text, View, Dimensions, Image, Animated, PanResponder, ActivityIndicator, ScrollView } from 'react-native';

const SCREEN_HEIGHT = Dimensions.get('window').height
const SCREEN_WIDTH = Dimensions.get('window').width
import Icon from 'react-native-vector-icons/Ionicons'
const Users = [
  { id: "1", uri: require('./assets/1.jpg') },
  { id: "2", uri: require('./assets/2.jpg') },
  { id: "3", uri: require('./assets/3.jpg') },
  { id: "4", uri: require('./assets/4.jpg') },
  { id: "5", uri: require('./assets/5.jpg') },
]

export default class Decker extends React.Component {

  constructor() {
    super();

    this.position = new Animated.ValueXY();
    this.swipedPosition = new Animated.ValueXY({ x: -SCREEN_WIDTH-100, y:0 });
    this.gestPosition = new Animated.ValueXY();
    this.state = {
      currentIndex: 0,
      isLoading: true
    }
    this.lastIndex = 4

    this.rotate = this.position.x.interpolate({
      inputRange: [-SCREEN_WIDTH / 2, 0],
      outputRange: ['-10deg', '0deg'],
      extrapolate: 'clamp'
    })
    this.cardOpacity = this.gestPosition.x.interpolate({
        inputRange: [0,SCREEN_WIDTH / 2],
        outputRange: [1, 0.5],
        extrapolate: 'clamp'
      })
    this.cardScale = this.gestPosition.x.interpolate({
        inputRange: [0,SCREEN_WIDTH / 2],
        outputRange: [1, 0.8],
        extrapolate: 'clamp'
      })
    this.swipedRotate = this.swipedPosition.x.interpolate({
        inputRange: [-SCREEN_WIDTH / 2, 0],
        outputRange: ['-10deg','0deg'],
        extrapolate: 'clamp'
    })

    this.rotateAndTranslate = {
      opacity: this.cardOpacity,  
      
      transform: [{
        rotate: this.rotate,
        
      },
      {
        scale: this.cardScale
      },
      ...this.position.getTranslateTransform()
      ]
    }

    this.swipedTrasnform = {
        transform: [{
            rotate: this.swipedRotate
        },
        ...this.swipedPosition.getTranslateTransform()
        ]
    }
    // this.likeOpacity = this.gestPosition.x.interpolate({
    //   inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
    //   outputRange: [0, 0, 1],
    //   extrapolate: 'clamp'
    // })
    // this.dislikeOpacity = this.gestPosition.x.interpolate({
    //   inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
    //   outputRange: [1, 0, 0],
    //   extrapolate: 'clamp'
    // })

    this.nextCardOpacity = this.position.x.interpolate({
      inputRange: [-SCREEN_WIDTH / 2, 0],
      outputRange: [1, 0],
      extrapolate: 'clamp'
    })
    this.nextCardScale = this.position.x.interpolate({
      inputRange: [-SCREEN_WIDTH / 2, 0],
      outputRange: [1, 0.8],
      extrapolate: 'clamp'
    })

  }
  componentWillMount() {
    fetch('http://172.17.74.169:3000/projects')
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(JSON.stringify(responseJson));
        var arr = Object.keys(responseJson).map((k) => { return {id:k ,...responseJson[k]} });
        console.log(arr);
        this.setState({
          isLoading: false,
          dataSource: arr,
        })
        this.lastIndex = arr.length - 1;
       })
      .catch((error) =>{
        console.error(error);
      });
    
    this.PanResponder = PanResponder.create({

    onStartShouldSetPanResponder: (evt, gestureState) => true,

    onPanResponderMove: (evt, gestureState) => {
        if(gestureState.dx<0) {
            this.position.setValue({ x: gestureState.dx, y: gestureState.dy });
        }
        else if(gestureState.dx>0 && this.state.currentIndex > 0) {
            this.swipedPosition.setValue({ x:-SCREEN_WIDTH - 100 + gestureState.dx, y: 0})
        }
        this.gestPosition.setValue({ x: gestureState.dx, y: gestureState.dy })

    },
    onPanResponderRelease: (evt, gestureState) => {
        if (gestureState.dx > 120) {    // swipe right (load previous card)
            
            Animated.spring(this.swipedPosition, {
                toValue: { x:0, y:0 },
                friction:3
            }).start();

            this.setState({ currentIndex: (this.state.currentIndex) ? this.state.currentIndex - 1: 0 }, () => {
                this.position.setValue({ x: 0, y: 0 })
                this.swipedPosition.setValue({ x:-SCREEN_WIDTH-100, y:0 })
                this.gestPosition.setValue({ x: 0, y: 0 })
            });
        }

        else if (gestureState.dx < -120) {  // swipe left (load next card)
            Animated.spring(this.swipedPosition, {
                toValue: { x: -SCREEN_WIDTH - 100, y: gestureState.dy },
                friction: 3
            }).start();
            this.setState({ currentIndex: (this.state.currentIndex<this.lastIndex) ? this.state.currentIndex + 1:this.lastIndex }, () => {
                this.position.setValue({ x: 0, y: 0 })
                this.swipedPosition.setValue({ x:-SCREEN_WIDTH-100, y:0})
                this.gestPosition.setValue({ x: 0, y: 0 })
            });
        }

        else {
        Animated.spring(this.position, {
            toValue: { x: 0, y: 0 },
            friction: 4
        }).start()
        Animated.spring(this.gestPosition, {
            toValue: { x: 0, y: 0 },
            friction: 4
        }).start()

        Animated.spring(this.swipedPosition, {
            toValue: { x: -SCREEN_WIDTH - 100, y: 0 },
            friction: 4
        }).start()
        }
    }
    })
  }

  renderUsers = () => {

    if(this.state.isLoading==true)
    return(
        <ActivityIndicator/>
    );
    return this.state.dataSource.map((item, i) => {

      if (i==this.state.currentIndex - 1){
          return (
            <Animated.View
            key={item.id} style={[this.swipedTrasnform, { height: SCREEN_HEIGHT - 70, width: SCREEN_WIDTH, padding: 10, position: 'absolute' }]}>
            <ScrollView style={styles.card}>
                <Text>Project Name - {item.projectName}</Text>
                <Text>Short Desc- {item.longDescription}</Text>
                <Text>Long Desc- {item.shortDescription}</Text>
            </ScrollView>

          </Animated.View>
          )
      }
      else if (i < this.state.currentIndex) {
        return null
      }
      else if (i == this.state.currentIndex) {

        return (
          <Animated.View
            {...this.PanResponder.panHandlers}
            key={item.id} style={[this.rotateAndTranslate, { backgroundColor:'',height: SCREEN_HEIGHT - 70, width: SCREEN_WIDTH, padding: 10, position: 'absolute', }]}>
            <ScrollView style={styles.card}>
                <Text style={styles.projectName}>{item.projectName}</Text>
                <Text>Short Desc- {item.longDescription}</Text>
                <Text>Long Desc- {item.shortDescription}</Text>
            </ScrollView>
          </Animated.View>
        )
      }
      else {
        return (
          <Animated.View

            key={item.id} style={[{
              opacity: this.nextCardOpacity,
              transform: [{ scale: this.nextCardScale }],
              height: SCREEN_HEIGHT - 70, width: SCREEN_WIDTH, padding: 10, position: 'absolute'
            }]}>
            <ScrollView style={styles.card}>
                
                <Text>Project Name - {item.projectName}</Text>
                <Text>Short Desc- {item.longDescription}</Text>
                <Text>Long Desc- {item.shortDescription}</Text>
            </ScrollView>
          </Animated.View>
        )
      }
    }).reverse()
  }

  render() {
    

    return (
      <View style={{ flex: 1 }}>
        <View style={{ height: 90, backgroundColor:'skyblue' }}>

        </View>
        <View style={{ flex: 1, backgroundColor:'#ededed', }}>
            {this.renderUsers()}
        </View>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  card: {
    flex: 1,
    padding:15,
    borderRadius:10,
    elevation:1,
    backgroundColor: 'white',
  },
  projectName: {
    fontSize:SCREEN_WIDTH/10,
  },

});