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,25 +15,68 @@ const renderCard = (card) => {
   )
 }
 
-const LessonItem = ({cards}) => {
-  const {defaultStyle} = styles;
+export default class LessonItem extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      cardIndex: 0
+    }
+  }
 
-  return (
-    <View style={defaultStyle}>
-      <Swiper
-        backgroundColor='#7270a8'
-        cards={cards}
-        renderCard={renderCard}
-        disableBottomSwipe={true}
-        disableTopSwipe={true}
-        disableRightSwipe={true}
-      >
-      </Swiper>
+  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={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}
+          disableBottomSwipe={true}
+          disableTopSwipe={true}
+          disableRightSwipe={true}
+        >
+        </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;