created buttons component & created login header bar

src/components/buttons/index.js

@@ -0,0 +1,3 @@
+import GreetingHeaderButton from "./views/greetingHeaderButtonView";
+
+export { GreetingHeaderButton };

src/components/buttons/views/greetingHeaderButtonStyles.js

@@ -0,0 +1,13 @@
+import EStyleSheet from "react-native-extended-stylesheet";
+
+export default EStyleSheet.create({
+  button: {
+    width: 54,
+    backgroundColor: "transparent",
+    height: 19,
+  },
+  buttonText: {
+    color: "#c1c5c7",
+    fontSize: 16,
+  },
+});

src/components/buttons/views/greetingHeaderButtonView.js

@@ -0,0 +1,17 @@
+import React, { Fragment } from "react";
+import { TouchableWithoutFeedback, Text } from "react-native";
+
+import styles from "./greetingHeaderButtonStyles";
+
+const GreetingHeaderButtonView = ({ text, onPress, style }) => (
+  <Fragment>
+    <TouchableWithoutFeedback
+      style={[styles.button, style]}
+      onPress={() => onPress && onPress()}
+    >
+      <Text style={styles.buttonText}>{text}</Text>
+    </TouchableWithoutFeedback>
+  </Fragment>
+);
+
+export default GreetingHeaderButtonView;

src/components/loginHeader/view/loginHeaderStyles.js

@@ -1,12 +1,16 @@
 import EStyleSheet from "react-native-extended-stylesheet";
 
 export default EStyleSheet.create({
-  wrapper: {
+  container: {
     flex: 1,
+    flexDirection: "column",
+    height: "$deviceHeight / 3",
+  },
+  body: {
     flexDirection: "row",
     maxHeight: "$deviceHeight / 3",
     overflow: "hidden",
-    backgroundColor: "#ffffff",
+    backgroundColor: "$white",
   },
   description: {
     textAlignVertical: "center",
@@ -31,7 +35,24 @@ export default EStyleSheet.create({
     flex: 0.4,
     alignSelf: "center",
     height: 100,
-    marginTop: 20,
+    marginTop: 50,
-    left: 20,
+    marginLeft: 32,
+  },
+  headerRow: {
+    width: "$deviceWidth",
+    flexDirection: "row",
+    height: 55,
+    justifyContent: "space-between",
+  },
+  logo: {
+    width: 32,
+    height: 32,
+    marginLeft: 32,
+    alignSelf: "center",
+  },
+  headerButton: {
+    margin: 10,
+    marginRight: 19,
+    alignSelf: "center",
   },
 });

src/components/loginHeader/view/loginHeaderView.js

@@ -3,7 +3,7 @@ import { View, Text, Image } from "react-native";
 // Constants
 
 // Components
-
+import { GreetingHeaderButton } from "../../buttons";
 // Styles
 // eslint-disable-next-line
 import styles from "./loginHeaderStyles";
@@ -28,7 +28,17 @@ class LoginHeaderView extends Component {
     const { description, title } = this.props;
 
     return (
-      <View style={styles.wrapper}>
+      <View styles={styles.container}>
+        <View style={styles.headerRow}>
+          <Image
+            style={styles.logo}
+            source={require("../../../assets/esteem.png")}
+          />
+          <View style={styles.headerButton}>
+            <GreetingHeaderButton text="Sign up" />
+          </View>
+        </View>
+        <View style={styles.body}>
           <View style={styles.titleText}>
             <Text style={styles.title}>{title}</Text>
             <Text style={styles.description}>{description}</Text>
@@ -40,6 +50,7 @@ class LoginHeaderView extends Component {
             />
           </View>
         </View>
+      </View>
     );
   }
 }

src/screens/login/screen/loginScreen.js

@@ -8,6 +8,7 @@ import {
   TextInput,
   BackHandler,
   Linking,
+  StatusBar,
 } from "react-native";
 
 import { Navigation } from "react-native-navigation";
@@ -154,6 +155,7 @@ class LoginScreen extends Component {
   render() {
     return (
       <View style={{ flex: 1 }}>
+        <StatusBar hidden translucent />
         <LoginHeader
           title="Sign in"
           description="To get all the benefits using eSteem"