From e2a8d1309b7988196cf14642c50bfc2b149a80e8 Mon Sep 17 00:00:00 2001
From: amir <lifemount@gmail.com>
Date: Fri, 30 Nov 2018 00:37:51 +0500
Subject: [PATCH] Added sample deck card

---
 App.js                      | 68 +++++++++++++++++++------------------
 Components/Button/Button.js | 30 ++++++++++++++++
 Components/Button/index.js  |  1 +
 Components/Card/Card.js     | 30 ++++++++++++++++
 Components/Card/index.js    |  1 +
 Components/Swiper/Swiper.js | 32 +++++++++++++++++
 Components/Swiper/index.js  |  1 +
 package.json                |  5 +--
 yarn.lock                   | 15 ++++++++
 9 files changed, 148 insertions(+), 35 deletions(-)
 create mode 100644 Components/Button/Button.js
 create mode 100644 Components/Button/index.js
 create mode 100644 Components/Card/Card.js
 create mode 100644 Components/Card/index.js
 create mode 100644 Components/Swiper/Swiper.js
 create mode 100644 Components/Swiper/index.js

diff --git a/App.js b/App.js
index 171d0f0..70ad4f2 100644
--- a/App.js
+++ b/App.js
@@ -1,29 +1,42 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
-
 import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
+import Swiper from './Components/Swiper'
+import {StyleSheet, View} from 'react-native';
 
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
+import Button from './Components/Button'
+
+
+export default class App extends Component {
+  state = {
+    cards: [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+    ],
+  };
+
+  handleChange = (cardIndex) => {
+    console.log('CardChanged', cardIndex)
+  };
+
+  resetDeck = () => {
+    this.swiper.resetDeck()
+  };
 
-type Props = {};
-export default class App extends Component<Props> {
   render() {
+    const { cards } = this.state;
+
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome}>Welcome to React Native!</Text>
-        <Text style={styles.instructions}>To get started, edit App.js</Text>
-        <Text style={styles.instructions}>{instructions}</Text>
+        <Swiper
+          ref={swiper => {
+            this.swiper = swiper
+          }}
+          cards={cards}
+          onChange={this.handleChange}
+        />
+        <Button onPress={this.resetDeck} label="Сбросить колоду" style={{ marginTop: 25 }}/>
       </View>
     );
   }
@@ -32,18 +45,7 @@ export default class App extends Component<Props> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
+    padding: 24,
+    flexDirection: 'column-reverse'
   },
 });
diff --git a/Components/Button/Button.js b/Components/Button/Button.js
new file mode 100644
index 0000000..0b96afc
--- /dev/null
+++ b/Components/Button/Button.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import {
+  Text,
+  TouchableOpacity,
+  StyleSheet
+} from 'react-native'
+
+const Button = ({ onPress, label, style }) => (
+  <TouchableOpacity onPress={onPress} style={[styles.Wrapper, style]}>
+    <Text style={styles.Label}>
+      {label}
+    </Text>
+  </TouchableOpacity>
+);
+
+const styles = StyleSheet.create({
+  Wrapper: {
+    backgroundColor: `#fff`,
+    padding: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 50,
+    elevation: 3
+  },
+  Label: {
+    fontSize: 18
+  }
+});
+
+export default Button;
diff --git a/Components/Button/index.js b/Components/Button/index.js
new file mode 100644
index 0000000..3389ecb
--- /dev/null
+++ b/Components/Button/index.js
@@ -0,0 +1 @@
+export { default } from './Button'
diff --git a/Components/Card/Card.js b/Components/Card/Card.js
new file mode 100644
index 0000000..6e2ecdc
--- /dev/null
+++ b/Components/Card/Card.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  StyleSheet
+} from 'react-native'
+
+const Card = ({ number }) => (
+  <View style={styles.Wrapper}>
+    <Text style={styles.Text}>{number}</Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  Wrapper: {
+    backgroundColor: '#fff',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 24,
+    display: 'flex',
+    height: '90%',
+    width: '100%',
+    elevation: 1,
+  },
+  Text: {
+    fontSize: 56
+  },
+});
+
+export default Card
diff --git a/Components/Card/index.js b/Components/Card/index.js
new file mode 100644
index 0000000..95cfda2
--- /dev/null
+++ b/Components/Card/index.js
@@ -0,0 +1 @@
+export { default } from './Card'
diff --git a/Components/Swiper/Swiper.js b/Components/Swiper/Swiper.js
new file mode 100644
index 0000000..67b44d4
--- /dev/null
+++ b/Components/Swiper/Swiper.js
@@ -0,0 +1,32 @@
+import React, {Component} from 'react'
+import Swiper from 'react-native-deck-swiper'
+
+import Card from '../Card'
+
+
+class SwiperComp extends Component {
+
+  resetDeck = () => {
+    this.swiper.jumpToCardIndex(0)
+  };
+
+  render() {
+    let {cards, onChange} = this.props;
+    return (
+      <Swiper
+        goBackToPreviousCardOnSwipeLeft={true}
+        stackSize={2}
+        showSecondCard={true}
+        renderCard={(value) => <Card number={value}/>}
+        cards={cards}
+        ref={swiper => {
+          this.swiper = swiper
+        }}
+        onSwiped={onChange}
+      />
+    );
+  }
+}
+
+
+export default SwiperComp
diff --git a/Components/Swiper/index.js b/Components/Swiper/index.js
new file mode 100644
index 0000000..3e4a233
--- /dev/null
+++ b/Components/Swiper/index.js
@@ -0,0 +1 @@
+export { default } from './Swiper'
diff --git a/package.json b/package.json
index 0a68157..7e23104 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "react": "16.6.1",
-    "react-native": "0.57.7"
+    "react-native": "0.57.7",
+    "react-native-deck-swiper": "^1.5.26"
   },
   "devDependencies": {
     "babel-jest": "23.6.0",
@@ -19,4 +20,4 @@
   "jest": {
     "preset": "react-native"
   }
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index e15c9c3..0811150 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4528,6 +4528,14 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
+prop-types@15.5.10:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  integrity sha1-J5ffwxJhguOpXj37suiT3ddFYVQ=
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
 prop-types@^15.5.8, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
@@ -4616,6 +4624,13 @@ react-is@^16.6.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0"
   integrity sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA==
 
+react-native-deck-swiper@^1.5.26:
+  version "1.5.26"
+  resolved "https://registry.yarnpkg.com/react-native-deck-swiper/-/react-native-deck-swiper-1.5.26.tgz#c55c443b4ebe92eceaa67fe2f7d0288df4966cd0"
+  integrity sha512-6sB1T0EDlrZ4SSxL2qUOltq5ufhBXQ9I0ZvflmkO6k+zDOtGJ0BoFnVSfdjIuXnfVpdZVdSHQmpKtDmtIxPzmQ==
+  dependencies:
+    prop-types "15.5.10"
+
 react-native@0.57.7:
   version "0.57.7"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.57.7.tgz#5b3af1c43366c41d8d8d2540fea8ce590060bca1"