LessonItem card swipe

package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "react": "16.0.0-alpha.12",
     "react-native": "0.47.0",
-    "react-native-deck-swiper": "^1.3.8"
+    "react-native-deck-swiper": "^1.3.8",
+    "react-native-progress": "^3.4.0"
   },
   "devDependencies": {
     "babel-jest": "21.0.2",

src/components/LessonItem.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, Image } from 'react-native';
 import Swiper from 'react-native-deck-swiper';
+import * as Progress from 'react-native-progress';
 
 const renderCard = (card) => {
   return (
@@ -14,12 +15,47 @@ const renderCard = (card) => {
   )
 }
 
-const LessonItem = ({cards}) => {
+export default class LessonItem extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      cardIndex: 0
+    }
+  }
+
+  render () {
+    const {cards} = this.props
     const {defaultStyle} = styles;
 
+    const onSwiped = (index) => {
+      this.setState({
+        cardIndex: index + 1
+      })
+    }
+
+    const progress = this.state.cardIndex > 0 ? this.state.cardIndex / cards.length : 0
     return (
-    <View style={defaultStyle}>
+      <View style={styles.top}>
+        <View style={
+          {
+
+            marginLeft: 20,
+            marginRight: 20,
+            justifyContent: 'center',
+            paddingTop: 30
+          }
+        }>
+
+        <Progress.Bar
+          borderColor="#7270a8"
+          color="#53537d"
+          unfilledColor="#ececec"
+          progress={progress} width={null} />
+
+      </View>
+      <View>
         <Swiper
+          onSwiped={onSwiped}
           backgroundColor='#7270a8'
           cards={cards}
           renderCard={renderCard}
@@ -29,10 +65,18 @@ const LessonItem = ({cards}) => {
         >
         </Swiper>
       </View>
+    </View>
     );
-};
+  }
+}
 
 const styles = {
+
+  top: {
+    flexDirection: 'column',
+    backgroundColor: '#7270a8',
+    flex: 1
+  },
   defaultStyle: {
     flexDirection: 'column',
     justifyContent: 'center',
@@ -56,5 +100,3 @@ const styles = {
     lineHeight: 18
   },
 };
-
-export default LessonItem;