Components

index.android.js

@@ -4,13 +4,22 @@ import {
   View
 } from 'react-native';
 
+import Lesson from './src/components/Lesson';
 import Categories from './src/components/Categories';
+import LessonCategories from './src/components/LessonCategories';
 
 export default class meme extends Component {
   render() {
     return (
-      <View>
+      <View style={{ flex: 1 }}>
-        <Categories />
+        <Lesson
+          lessonHeaderText={'IMA LI MLIJEKA?'} lessonHeaderBackroundColor={'#7270a8'}
+          questions={
+            ['Kako funkcioniše produkcija mlijeka?',
+             'Uspostavljanje i zadržavanje zaliha mlijeka kad beba ne doji',
+             'Prejak refleks otpuštanja mlijeka ili prekomjerne zalihe',
+             'Koje biljke izbjegavati za vrijeme dojenja']}
+        />
       </View>
     );
   }

src/components/Categories.js

@@ -4,10 +4,10 @@ import ApplicationHeader from './ApplicationHeader';
 import CategoryItem from './CategoryItem';
 
 const Categories = () => {
-  const { categoriesListStyle } = styles;
+  const { categoriesContainerStyle, categoriesListStyle } = styles;
 
   return (
-    <View>
+    <View style={categoriesContainerStyle}>
       <ApplicationHeader headerText='MeMe' headerBackgroudColor='#6d6e71' />
       <View style={categoriesListStyle}>
         <CategoryItem categoryName='ANATOMIJA' categoryBackgroudColor='#f7bcbc' />
@@ -22,7 +22,11 @@ const Categories = () => {
 const styles = {
   categoriesListStyle: {
     flexDirection: 'column',
-    justifyContent: 'center'
+    flex: 1
+  },
+
+  categoriesContainerStyle: {
+    flex: 1, flexDirection: 'column'
   }
 };
 

src/components/CategoryItem.js

@@ -1,14 +1,17 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { Text, TouchableOpacity } from 'react-native';
 
 const CategoryItem = (props) => {
   const { categoryTextStyle } = styles;
   return (
-    <View style={containerStyle(props.categoryBackgroudColor)}>
+    <TouchableOpacity
+onPress={() => console.log(props.categoryName)}
+      style={containerStyle(props.categoryBackgroudColor)}
+    >
       <Text style={categoryTextStyle}>
         {props.categoryName}
       </Text>
-    </View>
+    </TouchableOpacity>
   );
 };
 
@@ -16,7 +19,8 @@ const containerStyle = function (containerBackgroudColor) {
    return {
      backgroundColor: containerBackgroudColor,
      justifyContent: 'center',
-     alignItems: 'center'
+     alignItems: 'center',
+     flex: 1
    };
 };
 

src/components/Lesson.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { View } from 'react-native';
+import ApplicationHeader from './ApplicationHeader';
+import Question from './Question';
+
+const Lesson = (props) => {
+  const { categoriesContainerStyle, categoriesListStyle } = styles;
+
+  // Render questions
+  const renderQuestions = () => props.questions.map((question) =>
+    (<Question questionText={question} key={question} />));
+
+  return (
+    <View style={categoriesContainerStyle}>
+      <ApplicationHeader
+        headerText={props.lessonHeaderText}
+        headerBackgroudColor={props.lessonHeaderBackroundColor}
+      />
+      <View style={categoriesListStyle}>
+        {renderQuestions()}
+      </View>
+    </View>
+  );
+};
+
+const styles = {
+  categoriesListStyle: {
+    flexDirection: 'column',
+    flex: 1
+  },
+
+  categoriesContainerStyle: {
+    flex: 1,
+    flexDirection: 'column'
+  }
+};
+
+export default Lesson;

src/components/LessonCategories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View } from 'react-native';
+import ApplicationHeader from './ApplicationHeader';
+import CategoryItem from './CategoryItem';
+
+const LessonCategories = () => {
+  const { categoriesContainerStyle, categoriesListStyle } = styles;
+
+  return (
+    <View style={categoriesContainerStyle}>
+      <ApplicationHeader headerText='LEKCIJE' headerBackgroudColor='#808285' />
+      <View style={categoriesListStyle}>
+        <CategoryItem categoryName='IMA LI MLIJEKA?' categoryBackgroudColor='#7270a8' />
+        <CategoryItem categoryName='ŠTA JE NORMALNO?' categoryBackgroudColor='#819dd1' />
+        <CategoryItem categoryName='MOGU LI PODOJITI AKO..?' categoryBackgroudColor='#b0bad6' />
+        <CategoryItem categoryName='ČESTA PITANJA?' categoryBackgroudColor='#e7e2dc' />
+      </View>
+    </View>
+  );
+};
+
+const styles = {
+  categoriesListStyle: {
+    flexDirection: 'column',
+    flex: 1
+  },
+
+  categoriesContainerStyle: {
+    flex: 1, flexDirection: 'column'
+  }
+};
+
+export default LessonCategories;

src/components/Question.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+
+const Question = (props) => {
+  const { containerStyle, questionTextStyle } = styles;
+  return (
+    <TouchableOpacity
+onPress={() => console.log(props.questionText)}
+      style={containerStyle}
+    >
+      <Text style={questionTextStyle}>
+        {props.questionText}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = {
+  questionTextStyle: {
+    fontSize: 25,
+    color: '#000',
+    padding: 20
+  },
+
+  containerStyle: {
+    backgroundColor: '#fff',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1
+  }
+};
+
+export default Question;