Categoris (wip)

src/components/ApplicationHeader.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+
+const ApplicationHeader = (props) => {
+  const { headerTextStyle } = styles;
+  return (
+    <View style={headerStyle(props.headerBackgroudColor)}>
+      <Text style={headerTextStyle}>{props.headerText}</Text>
+    </View>
+  );
+};
+
+const headerStyle = function (headerBackgroudColor) {
+   return {
+     backgroundColor: headerBackgroudColor,
+     height: 50,
+     justifyContent: 'center',
+     alignItems: 'center'
+   };
+ };
+
+const styles = {
+  headerTextStyle: {
+    fontSize: 20,
+    color: '#fff'
+  }
+};
+
+export default ApplicationHeader;

src/components/Categories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { View } from 'react-native';
+import ApplicationHeader from './ApplicationHeader';
+import CategoryItem from './CategoryItem';
+
+const Categories = () => {
+  const { categoriesListStyle } = styles;
+
+  return (
+    <View>
+      <ApplicationHeader headerText='MeMe' headerBackgroudColor='#6d6e71' />
+      <View style={categoriesListStyle}>
+        <CategoryItem categoryName='ANATOMIJA' categoryBackgroudColor='#f7bcbc' />
+        <CategoryItem categoryName='LEKCIJE' categoryBackgroudColor='#f4d4d4' />
+        <CategoryItem categoryName='UPITNIK' categoryBackgroudColor='#bcbec0' />
+        <CategoryItem categoryName='REKLA KAZALA' categoryBackgroudColor='#e6e51a' />
+      </View>
+    </View>
+  );
+};
+
+const styles = {
+  categoriesListStyle: {
+    flexDirection: 'column',
+    justifyContent: 'center'
+  }
+};
+
+export default Categories;

src/components/CategoryItem.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+const CategoryItem = (props) => {
+  const { categoryTextStyle } = styles;
+  return (
+    <View style={containerStyle(props.categoryBackgroudColor)}>
+      <Text style={categoryTextStyle}>
+        {props.categoryName}
+      </Text>
+    </View>
+  );
+};
+
+const containerStyle = function (containerBackgroudColor) {
+   return {
+     backgroundColor: containerBackgroudColor,
+     justifyContent: 'center',
+     alignItems: 'center'
+   };
+};
+
+const styles = {
+  categoryTextStyle: {
+    fontSize: 20,
+    color: '#fff'
+  }
+};
+
+export default CategoryItem;