GorgeousHeader: Library is ready. Need to refactory

Author: WrathChaos

README.md

@@ -271,6 +271,10 @@ import { ClassicHeader } from "@freakycoder/react-native-header-view";
 
 \* _This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)_
 
+## Credits
+
+Photo by [Joanna Nix](https://unsplash.com/@joanna_nix?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/9Zso3BvhuCk)
+
 ## Author
 
 FreakyCoder, [email protected]

assets/Screenshots/gorgeous-header-view.png

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
-import { Text, View, Image, TouchableOpacity } from "react-native";
+import { Text, View, Image, TouchableOpacity, TextInput } from "react-native";
+import Icon from "react-native-dynamic-vector-icons";
 /**
  * ? Local Imports
  */
@@ -18,18 +19,43 @@ export default class GorgeousHeader extends Component {
 
           <TouchableOpacity style={{ marginLeft: "auto" }} onPress={() => {}}>
             <Image
+              style={{ height: 40, width: 40, borderRadius: 20 }}
               source={require("../../../local-assets/omid-armin-unsplash.jpg")}
-              style={{ height: 30, width: 30, borderRadius: 16 }}
             />
           </TouchableOpacity>
         </View>
-        <View style={{ marginTop: 32 }}>
+        <View style={{ marginTop: 24 }}>
           <Text style={{ color: "#2c2305", fontSize: 46, fontWeight: "bold" }}>
             Order
           </Text>
-          <Text style={{ fontSize: 14, color: "#999893" }}>
+          <Text
+            style={{
+              fontSize: 13,
+              marginTop: 5,
+              fontWeight: "400",
+              color: "#999893",
+            }}
+          >
             Healthy food can keep you fit.
           </Text>
+          <View
+            style={{
+              padding: 16,
+              marginTop: 48,
+              borderRadius: 24,
+              flexDirection: "row",
+              backgroundColor: "#f8f8f8",
+            }}
+          >
+            <Image
+              style={{ height: 20, width: 20 }}
+              source={require("../../../local-assets/search.png")}
+            />
+            <TextInput
+              style={{ marginLeft: 12, fontWeight: "500" }}
+              placeholder="Search something"
+            />
+          </View>
         </View>
       </View>
     );

example/lib/local-assets/menu-1.png

@@ -0,0 +1,63 @@
+import React, { Component } from "react";
+import { Text, View, Image, TouchableOpacity, TextInput } from "react-native";
+import Icon from "react-native-dynamic-vector-icons";
+/**
+ * ? Local Imports
+ */
+import styles from "./GorgeousHeader.style";
+
+const menuImg = require("../../../local-assets/menu.png");
+
+export default class GorgeousHeader extends Component {
+  render() {
+    return (
+      <View style={{ margin: 32 }}>
+        <View style={{ flexDirection: "row" }}>
+          <TouchableOpacity style={{ marginRight: "auto" }} onPress={() => {}}>
+            <Image source={menuImg} style={{ height: 20, width: 20 }} />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={{ marginLeft: "auto" }} onPress={() => {}}>
+            <Image
+              style={{ height: 40, width: 40, borderRadius: 20 }}
+              source={require("../../../local-assets/omid-armin-unsplash.jpg")}
+            />
+          </TouchableOpacity>
+        </View>
+        <View style={{ marginTop: 24 }}>
+          <Text style={{ color: "#2c2305", fontSize: 46, fontWeight: "bold" }}>
+            Order
+          </Text>
+          <Text
+            style={{
+              fontSize: 13,
+              marginTop: 5,
+              fontWeight: "400",
+              color: "#999893",
+            }}
+          >
+            Healthy food can keep you fit.
+          </Text>
+          <View
+            style={{
+              padding: 16,
+              marginTop: 48,
+              borderRadius: 24,
+              flexDirection: "row",
+              backgroundColor: "#f8f8f8",
+            }}
+          >
+            <Image
+              style={{ height: 20, width: 20 }}
+              source={require("../../../local-assets/search.png")}
+            />
+            <TextInput
+              style={{ marginLeft: 12, fontWeight: "500" }}
+              placeholder="Search something"
+            />
+          </View>
+        </View>
+      </View>
+    );
+  }
+}

example/lib/local-assets/menu.png

@@ -0,0 +1 @@
+export default {};