Package.json

src/Router.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Scene, Router, Stack } from 'react-native-router-flux';
+import Categories from './components/Categories';
+import LessonCategories from './components/LessonCategories';
+import AnatomyCard from './components/AnatomyCard';
+
+const RouterComponent = () => {
+  const { headerTextStyle } = styles;
+  return (
+    <Router tintColor={'#fff'}>
+      <Stack key="root">
+        <Scene
+          key="categories"
+          component={Categories}
+          title="MeMe"
+          headerTitleStyle={headerTextStyle}
+          headerStyle={headerStyle('#6d6e71')}
+        />
+        <Scene
+          key="lessonCategories"
+          component={LessonCategories}
+          title="LEKCIJE"
+          headerStyle={headerStyle('#808285')}
+          headerTitleStyle={headerTextStyle}
+        />
+        <Scene
+          key="anatomyCard"
+          component={AnatomyCard}
+          title="Anatomy"
+          headerStyle={headerStyle('#808285')}
+          headerTitleStyle={headerTextStyle}
+        />
+      </Stack>
+    </Router>
+  );
+};
+
+const headerStyle = function (headerBackgroudColor) {
+   return {
+     backgroundColor: headerBackgroudColor
+   };
+ };
+
+const styles = {
+  headerTextStyle: {
+    fontSize: 20,
+    alignSelf: 'center',
+    color: '#fff'
+  }
+};
+
+export default RouterComponent;

src/components/AnatomyCard.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { View, Text } from 'react-native';
-//import CategoryItem from './CategoryItem';
 
 const AnatomyCard = ({ title, text }) => {
   const { defaultStyle, titleStyle, textStyle } = styles;

src/components/LessonItem.js

@@ -0,0 +1,102 @@
+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 (
+    <View style={styles.card}>
+      <Image
+        style={{width: 120, height: 120, borderRadius: 60}}
+        source={card.image}
+      />
+      <Text style={styles.text}>{card.text}</Text>
+    </View>
+  )
+}
+
+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={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',
+    backgroundColor: '#7270a8',
+    flex: 1
+  },
+  card: {
+    flex: 1,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: '#E8E8E8',
+    justifyContent: 'center',
+    backgroundColor: 'white',
+    alignItems: 'center'
+  },
+  text: {
+    margin: 20,
+    color: 'black',
+    textAlign: 'justify',
+    fontSize: 14,
+    lineHeight: 18
+  },
+};