Added sample deck card

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'
   },
 });

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;

Components/Button/index.js

@@ -0,0 +1 @@
+export { default } from './Button'

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

Components/Card/index.js

@@ -0,0 +1 @@
+export { default } from './Card'

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

Components/Swiper/index.js

@@ -0,0 +1 @@
+export { default } from './Swiper'

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"
   }
-}
+}

yarn.lock

@@ -4528,6 +4528,14 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
+[email protected]:
+  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"
+
 [email protected]:
   version "0.57.7"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.57.7.tgz#5b3af1c43366c41d8d8d2540fea8ce590060bca1"