Looping the Cards

MengTo · May 11, 2019 · 46f6536 · 46f6536
1 parent 60b25cd
commit 46f6536
Showing 1 changed file with 62 additions and 12 deletions.
diff --git a/screens/ProjectsScreen.js b/screens/ProjectsScreen.js
@@ -3,6 +3,14 @@ import styled from "styled-components";
 import Project from "../components/Project";
 import { PanResponder, Animated } from "react-native";
 
+function getNextIndex(index) {
+  var nextIndex = index + 1;
+  if (nextIndex > projects.length - 1) {
+    return 0;
+  }
+  return nextIndex;
+}
+
 class ProjectsScreen extends React.Component {
   static navigationOptions = {
     header: null
@@ -11,35 +19,54 @@ class ProjectsScreen extends React.Component {
   state = {
     pan: new Animated.ValueXY(),
     scale: new Animated.Value(0.9),
-    translateY: new Animated.Value(44)
+    translateY: new Animated.Value(44),
+    thirdScale: new Animated.Value(0.8),
+    thirdTranslateY: new Animated.Value(-50),
+    index: 0
   };
 
   componentWillMount() {
     this._panResponder = PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+
       onPanResponderGrant: () => {
         Animated.spring(this.state.scale, { toValue: 1 }).start();
         Animated.spring(this.state.translateY, { toValue: 0 }).start();
+
+        Animated.spring(this.state.thirdScale, { toValue: 0.9 }).start();
+        Animated.spring(this.state.thirdTranslateY, { toValue: 44 }).start();
       },
-      onMoveShouldSetPanResponder: () => true,
+
       onPanResponderMove: Animated.event([
         null,
         { dx: this.state.pan.x, dy: this.state.pan.y }
       ]),
+
       onPanResponderRelease: () => {
         const positionY = this.state.pan.y.__getValue();
         // console.log(positionY);
 
         if (positionY > 200) {
           Animated.timing(this.state.pan, {
-            toValue: { x: this.state.pan.x, y: 1000 }
-          }).start();
+            toValue: { x: 0, y: 1000 }
+          }).start(() => {
+            this.state.pan.setValue({ x: 0, y: 0 });
+            this.state.scale.setValue(0.9);
+            this.state.translateY.setValue(44);
+            this.state.thirdScale.setValue(0.8);
+            this.state.thirdTranslateY.setValue(-50);
+            this.setState({ index: getNextIndex(this.state.index) });
+          });
         } else {
           Animated.spring(this.state.pan, {
             toValue: { x: 0, y: 0 }
           }).start();
 
           Animated.spring(this.state.scale, { toValue: 0.9 }).start();
           Animated.spring(this.state.translateY, { toValue: 44 }).start();
+
+          Animated.spring(this.state.thirdScale, { toValue: 0.8 }).start();
+          Animated.spring(this.state.thirdTranslateY, { toValue: -50 }).start();
         }
       }
     });
@@ -58,10 +85,10 @@ class ProjectsScreen extends React.Component {
           {...this._panResponder.panHandlers}
         >
           <Project
-            title={projects[0].title}
-            image={projects[0].image}
-            author={projects[0].author}
-            text={projects[0].text}
+            title={projects[this.state.index].title}
+            image={projects[this.state.index].image}
+            author={projects[this.state.index].author}
+            text={projects[this.state.index].text}
           />
         </Animated.View>
         <Animated.View
@@ -81,10 +108,33 @@ class ProjectsScreen extends React.Component {
           }}
         >
           <Project
-            title={projects[1].title}
-            image={projects[1].image}
-            author={projects[1].author}
-            text={projects[1].text}
+            title={projects[getNextIndex(this.state.index)].title}
+            image={projects[getNextIndex(this.state.index)].image}
+            author={projects[getNextIndex(this.state.index)].author}
+            text={projects[getNextIndex(this.state.index)].text}
+          />
+        </Animated.View>
+        <Animated.View
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            zIndex: -3,
+            width: "100%",
+            height: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+            transform: [
+              { scale: this.state.thirdScale },
+              { translateY: this.state.thirdTranslateY }
+            ]
+          }}
+        >
+          <Project
+            title={projects[getNextIndex(this.state.index + 1)].title}
+            image={projects[getNextIndex(this.state.index + 1)].image}
+            author={projects[getNextIndex(this.state.index + 1)].author}
+            text={projects[getNextIndex(this.state.index + 1)].text}
           />
         </Animated.View>
       </Container>