refactored into budgetHeader component

components/budget/budgetHeader.tsx

@@ -0,0 +1,35 @@
+import { StyleSheet, Text, View } from "react-native";
+import { useThemeColor } from "../../hooks/useThemeColor";
+import SearchBar from "../common/SearchBar";
+
+const BudgetHeader = () => {
+    const primaryTextColor = useThemeColor("primaryText");
+    const secondaryTextColor = useThemeColor("secondaryText");
+
+
+
+    return (<>
+        <View style={styles.containerStyle}>
+                <Text style={[styles.selectedHeaderTextStyle, {color: primaryTextColor}]}>Expense View</Text>
+                <Text style={[styles.defaultHeaderTextStyle, {color: secondaryTextColor}]}>Savings View</Text>
+        </View>
+        <SearchBar placeholder='Search...'></SearchBar>
+    </>);
+}
+
+export default BudgetHeader;
+
+const styles = StyleSheet.create({
+    selectedHeaderTextStyle: {
+        fontSize: 40,
+        fontWeight: "bold",
+    },
+    defaultHeaderTextStyle: {
+        fontSize: 20,
+    },
+    containerStyle: {
+        backgroundColor: "blue",
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+});

components/index.tsx

@@ -11,10 +11,11 @@ import CustomCard from "./common/CustomCard"
 
 
 //login
+import BudgetHeader from "./budget/budgetHeader"
 import Input from "./login/input"
 
 export {
-  ButtonSetting, CustomCard, ExpenseItem, Input,
+  BudgetHeader, ButtonSetting, CustomCard, ExpenseItem, Input,
   LoadingSymbol, Plus,
   SearchBar, ToggleSetting, Welcome
 }