square not square header

squarenotsquare/src/screens/Home.js

@@ -1,14 +1,30 @@
 import React from "react";
 import { Text, View } from "react-native";
 import { useState } from "react";
+import { styles } from './styles/AppStyles';
 
 function Home(props){
 
   return (
-    <View>
+    <View style={[styles.flex]}>
-      <Text style={{color: 'black'}}>test</Text>
+      <View style={[styles.flexHalf, styles.spaceAround]}>
+        <Text style={[styles.headerTitleFont, styles.centeredText, styles.darkText]}>
+          Square
+          <Text style={[styles.green, styles.headerTitleFont, styles.centeredText, styles.lightText]}>
+            {' not '}
+          </Text>
+          <Text style={[styles.headerTitleFont, styles.centeredText, styles.darkText]}>
+            Square
+          </Text>
+        </Text>
+      </View>
+      <View style={styles.flex}>
+        <Text style={[styles.largeFont, styles.centeredText, styles.darkText]}>
+          Loading...
+        </Text>
+      </View>
     </View>
-  );
+  )
 }
 
 export default Home;

squarenotsquare/src/screens/styles/AppStyles.js

@@ -62,6 +62,7 @@ export const styles = StyleSheet.create({
   
   italic: {fontStyle: 'italic'},
   darkText: {color: Colors.fonts.dark},
+  lightText: {color: Colors.fonts.light},
   greyText: {color: Colors.material.grey600},
   redText: {color: Colors.material.red800},
   blueText: {color: Colors.material.blue400},
@@ -71,8 +72,16 @@ export const styles = StyleSheet.create({
     backgroundColor: Colors.material.light,
   },
 
+  green: {
+    backgroundColor: Colors.material.green400
+  },
+
   splashLogo: {
     width: Metrics.images.splashLogo.width,
     height: Metrics.images.splashLogo.height
+  },
+
+  smallMargin: {
+    margin: Metrics.margins.default
   }
 })

squarenotsquare/src/themes/Metrics.js

@@ -38,6 +38,10 @@ class AppMetrics {
         height: this.screenWidth * 0.33
       }
     }
+
+    this.margins = {
+      default: this.normalize(5)
+    }
   }
 
   normalize(size){