Categoris (wip)

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "rallycoding"
+}

index.android.js

@@ -1,53 +1,19 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
 import React, { Component } from 'react';
 import {
   AppRegistry,
-  StyleSheet,
-  Text,
   View
 } from 'react-native';
 
+import Categories from './src/components/Categories';
+
 export default class meme extends Component {
   render() {
     return (
-      <View style={styles.container}>
+      <View>
-        <Text style={styles.welcome}>
+        <Categories />
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Double tap R on your keyboard to reload,{'\n'}
-          Shake or press menu button for dev menu
-        </Text>
       </View>
     );
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    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);

package.json

@@ -13,6 +13,7 @@
 	"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"
 	},

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;