Package.json

index.ios.js

@@ -13,12 +13,21 @@ import {
 } from 'react-native';
 
 import AnatomyCard from './src/components/AnatomyCard'
+import LessonItem from './src/components/LessonItem'
 
 export default class meme extends Component {
   render() {
+
     return (
       <View style={styles.container}>
-        <AnatomyCard title="Bradavica" text="O alveoli, o tkivu, o mliječnim putevima i živcima. Zamišljeno je da korisnik može fizički da istraži anatomiju i fizionomiju dojke. Zoomin/zoomout sa tagovima. U sekciji anatomije nas dočeka kao neka interaktivna infografika. Npr, dojka i njen presjek sa tagovima. Kada kliknemo na tag dobijemo karticu sa svim informacijama o alveoli. Kartice kao i sav drugi sadržaj ne bi pravila skrolabilnim, radje bi sadržaj rasporedjivala na više kartica. Ali recimo da u ovoj sekciji fiziologije bi za svaki pojam bila jedna kartica jer su to neki uopšteni pojmovi."/>
+        <LessonItem cards={[
+          {text: "Nakon 3. ili 4. dana života dijete bi trebalo imati barem 6 mokrih pelena. Nakon što je sav mekonij izašao i stolica postala senfasta, sjemenasta i žuta, treba očekivati barem 3-4 pokakane pelene dnevno (veličine najmanje 2,5 cm). Nakon 6. tjedna života neka djeca kakaju znatno rjeđe, pa i pauziraju po nekoliko dana. To je također sasvim normalno. U slučaju da dijete nakon 5. dana starosti nema dovoljno mokrih i zaprljanih pelena, trebalo bi pogledati signale koji upućuju na probleme i odvesti dijete liječniku.", image: require('./images/lesson-item-1.png')},
+          {text: 'Card2', image: require('./images/lesson-item-1.png')},
+          {text: 'Card3', image: require('./images/lesson-item-1.png')},
+          {text: 'Card4', image: require('./images/lesson-item-1.png')},
+          {text: 'Card5', image: require('./images/lesson-item-1.png')},
+          {text: 'Card6', image: require('./images/lesson-item-1.png')},
+        ]} />
       </View>
     )
   }

package.json

@@ -1,24 +1,26 @@
 {
-	"name": "meme",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"start": "node node_modules/react-native/local-cli/cli.js start",
-		"test": "jest"
-	},
-	"dependencies": {
-		"react": "16.0.0-alpha.12",
-		"react-native": "0.47.0",
+  "name": "meme",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "node node_modules/react-native/local-cli/cli.js start",
+    "test": "jest"
+  },
+  "dependencies": {
+    "react": "16.0.0-alpha.12",
+    "react-native": "0.47.0",
+    "react-native-deck-swiper": "^1.3.8",
+    "react-native-progress": "^3.4.0",
 		"react-native-router-flux": "^4.0.0-beta.21"
-	},
-	"devDependencies": {
-		"babel-jest": "21.0.2",
-		"babel-preset-react-native": "4.0.0",
-		"eslint-config-rallycoding": "^3.2.0",
-		"jest": "21.1.0",
-		"react-test-renderer": "16.0.0-alpha.12"
-	},
-	"jest": {
-		"preset": "react-native"
-	}
+  },
+  "devDependencies": {
+    "babel-jest": "21.0.2",
+    "babel-preset-react-native": "4.0.0",
+    "eslint-config-rallycoding": "^3.2.0",
+    "jest": "21.1.0",
+    "react-test-renderer": "16.0.0-alpha.12"
+  },
+  "jest": {
+    "preset": "react-native"
+  }
 }

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
+  },
+};