AnatomyCard done

index.ios.js

@@ -12,42 +12,22 @@ import {
   View
 } from 'react-native';
 
+import AnatomyCard from './src/components/AnatomyCard'
+
 export default class meme extends Component {
   render() {
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome}>
+        <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."/>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
       </View>
-    );
+    )
   }
 }
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flex: 1
-    justifyContent: 'center',
+  }
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
 });
 
 AppRegistry.registerComponent('meme', () => meme);

src/components/AnatomyCard.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+//import CategoryItem from './CategoryItem';
+
+const AnatomyCard = ({title, text}) => {
+  const { defaultStyle, titleStyle, textStyle } = styles;
+
+  return (
+    <View style={defaultStyle}>
+      <Text style={titleStyle}>{title}</Text>
+      <Text style={textStyle}>{text}</Text>
+    </View>
+  );
+};
+
+const styles = {
+  defaultStyle: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    backgroundColor: '#f7bcbc',
+    flex: 1
+  },
+  titleStyle: {
+    color: 'white',
+    textAlign: 'center',
+    fontSize: 24
+  },
+  textStyle: {
+    textAlign: 'center',
+    color: 'white',
+    fontSize: 16,
+    margin: 20,
+    lineHeight: 22
+  }
+};
+
+export default AnatomyCard;