| @@ -1,18 +1,68 @@ | ||
| import React, { Component } from "react"; | ||
| import { Text } from "react-native"; | ||
| import { Card, Button } from "react-native-elements"; | ||
| import Deck from "./Deck"; | ||
|
|
||
| const DATA = [ | ||
| { | ||
| id: 1, | ||
| text: "Card #1", | ||
| uri: "http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-04.jpg" | ||
| }, | ||
| { | ||
| id: 2, | ||
| text: "Card #2", | ||
| uri: "http://www.fluxdigital.co/wp-content/uploads/2015/04/Unsplash.jpg" | ||
| }, | ||
| { | ||
| id: 3, | ||
| text: "Card #3", | ||
| uri: "http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-09.jpg" | ||
| }, | ||
| { | ||
| id: 4, | ||
| text: "Card #4", | ||
| uri: "http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-01.jpg" | ||
| }, | ||
| { | ||
| id: 5, | ||
| text: "Card #5", | ||
| uri: "http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-04.jpg" | ||
| }, | ||
| { | ||
| id: 6, | ||
| text: "Card #6", | ||
| uri: "http://www.fluxdigital.co/wp-content/uploads/2015/04/Unsplash.jpg" | ||
| }, | ||
| { | ||
| id: 7, | ||
| text: "Card #7", | ||
| uri: "http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-09.jpg" | ||
| }, | ||
| { | ||
| id: 8, | ||
| text: "Card #8", | ||
| uri: "http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-01.jpg" | ||
| } | ||
| ]; | ||
|
|
||
| class App extends Component { | ||
| renderCard(item) { | ||
| return ( | ||
| <Card key={item.id} title={item.text} image={{ uri: item.uri }}> | ||
| <Text style={{ marginBottom: 10 }}> Customize </Text> | ||
| <Button | ||
| icon={{ name: "code" }} | ||
| backgroundColor="#03A9F4" | ||
| title="View now" | ||
| /> | ||
| </Card> | ||
| ); | ||
| } | ||
|
|
||
| render() { | ||
| return <Deck data={DATA} renderCard={this.renderCard} />; | ||
| } | ||
| } | ||
|
|
||
| export default App; |
| @@ -0,0 +1,33 @@ | ||
| import React, { Component } from "react"; | ||
| import { View, Animated } from "react-native"; | ||
|
|
||
| const styles = { | ||
| ball: { | ||
| height: 60, | ||
| width: 60, | ||
| borderRadius: 30, | ||
| borderWidth: 30, | ||
| borderColor: "#000" | ||
| } | ||
| }; | ||
|
|
||
| class Ball extends Component { | ||
| componentWillMount() { | ||
| this.position = new Animated.ValueXY(0, 0); | ||
| Animated.spring(this.position, { | ||
| toValue: { x: 200, y: 500 } | ||
| }).start(); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <Animated.View style={this.position.getLayout()}> | ||
| <View style={styles.ball} /> | ||
| <View style={styles.ball} /> | ||
| <View style={styles.ball} /> | ||
| </Animated.View> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default Ball; |
| @@ -0,0 +1,50 @@ | ||
| import React, { Component } from "react"; | ||
| import { View, Animated, PanResponder } from "react-native"; | ||
|
|
||
| class Deck extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| const position = new Animated.ValueXY(); | ||
|
|
||
| const panResponder = PanResponder.create({ | ||
| onStartShouldSetPanResponder: () => true, | ||
| onPanResponderMove: (event, gesture) => { | ||
| position.setValue({ x: gesture.dx, y: gesture.dy }); | ||
| }, | ||
| onPanResponderRelease: () => { | ||
| position.setValue({ x: 0, y: 0 }); | ||
| } | ||
| }); | ||
| this.state = { panResponder, position }; | ||
| } | ||
|
|
||
| getCardStyle() { | ||
| return { | ||
| ...this.state.position.getLayout(), | ||
| transform: [{ rotate: "-45deg" }] | ||
| }; | ||
| } | ||
|
|
||
| renderCards() { | ||
| return this.props.data.map((item, index) => { | ||
| return index === 0 ? ( | ||
| <Animated.View | ||
| key={item.id} | ||
| style={this.getCardStyle()} | ||
| {...this.state.panResponder.panHandlers} | ||
| > | ||
| {this.props.renderCard(item)} | ||
| </Animated.View> | ||
| ) : ( | ||
| this.props.renderCard(item) | ||
| ); | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
| return <View>{this.renderCards()}</View>; | ||
| } | ||
| } | ||
|
|
||
| export default Deck; |