Add LessionItem (swipe)

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,23 +1,24 @@
 {
-	"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"
-	},
-	"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"
-	}
+  "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"
+  },
+  "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/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,60 @@
+import React from 'react';
+import { View, Text, Image } from 'react-native';
+import Swiper from 'react-native-deck-swiper';
+
+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>
+  )
+}
+
+const LessonItem = ({cards}) => {
+  const {defaultStyle} = styles;
+
+  return (
+    <View style={defaultStyle}>
+      <Swiper
+        backgroundColor='#7270a8'
+        cards={cards}
+        renderCard={renderCard}
+        disableBottomSwipe={true}
+        disableTopSwipe={true}
+        disableRightSwipe={true}
+      >
+      </Swiper>
+    </View>
+  );
+};
+
+const styles = {
+  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
+  },
+};
+
+export default LessonItem;