diff --git a/screens/ProjectsScreen.js b/screens/ProjectsScreen.js index aac4349..36280db 100644 --- a/screens/ProjectsScreen.js +++ b/screens/ProjectsScreen.js @@ -9,20 +9,38 @@ class ProjectsScreen extends React.Component { }; state = { - pan: new Animated.ValueXY() + pan: new Animated.ValueXY(), + scale: new Animated.Value(0.9), + translateY: new Animated.Value(44) }; componentWillMount() { this._panResponder = PanResponder.create({ + onPanResponderGrant: () => { + Animated.spring(this.state.scale, { toValue: 1 }).start(); + Animated.spring(this.state.translateY, { toValue: 0 }).start(); + }, onMoveShouldSetPanResponder: () => true, onPanResponderMove: Animated.event([ null, { dx: this.state.pan.x, dy: this.state.pan.y } ]), onPanResponderRelease: () => { - Animated.spring(this.state.pan, { - toValue: { x: 0, y: 0 } - }).start(); + 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(); + } 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(); + } } }); } @@ -40,10 +58,33 @@ class ProjectsScreen extends React.Component { {...this._panResponder.panHandlers} > + + + @@ -61,3 +102,27 @@ const Container = styled.View` `; const Text = styled.Text``; + +const projects = [ + { + title: "Price Tag", + image: require("../assets/background5.jpg"), + author: "Liu Yi", + text: + "Thanks to Design+Code, I improved my design skill and learned to do animations for my app Price Tag, a top news app in China." + }, + { + title: "The DM App - Ananoumous Chat", + image: require("../assets/background6.jpg"), + author: "Chad Goodman", + text: + "Design+Code was the first resource I used when breaking into software. I went from knowing nothing about design or code to building a production ready app from scratch. " + }, + { + title: "Nikhiljay", + image: require("../assets/background7.jpg"), + author: "Nikhil D'Souza", + text: + "Recently finished the React course by @Mengto, and I 10/10 would recommend. I already rewrote my personal website in @reactjs and I'm very excited with it." + } +];