Header is now a component imported into each page

jukebox/src/components/Header.js

@@ -0,0 +1,58 @@
+import { View, Text, Pressable, StyleSheet } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useNavigation } from "@react-navigation/native";
+
+export default function Header({ title, showIcons }) {
+  const navigation = useNavigation();
+  return (
+    <View style={styles.headerRow}>
+      <Text style={styles.mainTitle}>{title}</Text>
+
+      {showIcons && (
+        <View style={styles.headerActions}>
+          <Pressable
+            style={styles.iconBtn}
+            onPress={() => navigation.navigate("Login")}
+          >
+            <Ionicons name="person-outline" size={24} color="#fff" />
+          </Pressable>
+          <Pressable
+            style={styles.iconBtn}
+            onPress={() => navigation.navigate("Settings")}
+          >
+            <Ionicons name="settings-outline" size={24} color="#fff" />
+          </Pressable>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#000",
+        paddingTop: 24,
+        paddingHorizontal: 16,
+    },
+    headerRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: 12,
+    },
+    headerActions: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+    },
+    iconBtn: {
+        padding: 2,
+    },
+    mainTitle: {
+        color: "#ffffff",
+        fontSize: 32,
+        fontWeight: "700",
+        marginBottom: 12,
+    },
+})

jukebox/src/screens/AlbumScreen.js

@@ -4,6 +4,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import TrackRow from '../components/TrackRow';
 import { useLibrary } from '../contexts/LibraryContext';
 import { durationFormatter } from '../components/DurationFormatter';
+import Header from "../components/Header";
 
 export default function AlbumScreen({ route, navigation }) {
   const { album: routeAlbum } = route.params;

jukebox/src/screens/HomeScreen.js

@@ -12,6 +12,7 @@ import { useNavigation } from "@react-navigation/native";
 import TrackRow from "../components/TrackRow";
 import { useLibrary } from "../contexts/LibraryContext";
 import { SafeAreaView } from "react-native-safe-area-context";
+import Header from "../components/Header";
 
 export default function HomeScreen() {
   const navigation = useNavigation();
@@ -21,24 +22,7 @@ export default function HomeScreen() {
 
   return (
     <SafeAreaView style={styles.container}>
-      <View style={styles.headerRow}>
-        <Text style={styles.homeTitle}>Home</Text>
-        <View style={styles.headerActions}>
-          <Pressable
-            style={styles.iconBtn}
-            onPress={() => navigation.navigate("Login")}
-          >
-            <Ionicons name="person-outline" size={24} color="#fff" />
-          </Pressable>
-          <Pressable
-            style={styles.iconBtn}
-            onPress={() => navigation.navigate("Settings")}
-          >
-            <Ionicons name="settings-outline" size={24} color="#fff" />
-          </Pressable>
-        </View>
-      </View>
-
+      <Header title="Home" showIcons={true}/>
       <Pressable onPress={() => navigation.navigate("LikedTracks")}>
         <Text style={styles.sectionTitle}>Liked tracks ➚</Text>
       </Pressable>

jukebox/src/screens/LikedTracksScreen.js

@@ -10,6 +10,7 @@ import {
 import TrackRow from "../components/TrackRow";
 import { useLibrary } from "../contexts/LibraryContext";
 import { SafeAreaView } from "react-native-safe-area-context";
+import Header from "../components/Header";
 
 export default function LikedTracksScreen({ navigation }) {
   const [query, setQuery] = useState("");
@@ -54,7 +55,7 @@ export default function LikedTracksScreen({ navigation }) {
         <Text style={styles.backText}>← Back</Text>
       </Pressable>
 
-      <Text style={styles.title}>Your liked tracks</Text>
+      <Header title="Your liked tracks" showIcons={true}/>
 
       <TextInput
         value={query}

jukebox/src/screens/LoginScreen.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { View, Text, StyleSheet, TextInput, Pressable } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import Header from "../components/Header";
 
 export default function LoginScreen({ navigation }) {
   const [email, setEmail] = useState("");
@@ -24,7 +25,7 @@ export default function LoginScreen({ navigation }) {
         <Text style={styles.backText}>← Back</Text>
       </Pressable>
 
-      <Text style={styles.title}>Login</Text>
+      <Header title="Login" showIcons={false}/>
 
       <TextInput
         value={email}

jukebox/src/screens/PasswordResetScreen.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { View, Text, StyleSheet, TextInput, Pressable } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import Header from "../components/Header";
 
 export default function PasswordResetScreen({ navigation }) {
   const [email, setEmail] = useState("");
@@ -15,7 +16,7 @@ export default function PasswordResetScreen({ navigation }) {
         <Text style={styles.backText}>← Back</Text>
       </Pressable>
 
-      <Text style={styles.title}>Reset password</Text>
+      <Header title="Password Reset" showIcons={false}/>
 
       <TextInput
         value={email}

jukebox/src/screens/SettingsScreen.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { View, Text, StyleSheet, Pressable, Switch } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import Header from "../components/Header";
 
 export default function SettingsScreen({ navigation }) {
   const [notificationsEnabled, setNotificationsEnabled] = useState(true);
@@ -12,7 +13,7 @@ export default function SettingsScreen({ navigation }) {
         <Text style={styles.backText}>← Back</Text>
       </Pressable>
 
-      <Text style={styles.title}>Settings</Text>
+      <Header title="Settings" showIcons={true}/>
 
       <View style={styles.row}>
         <Text style={styles.rowText}>Enable notifications</Text>

jukebox/src/screens/SignUpScreen.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { View, Text, StyleSheet, TextInput, Pressable } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import Header from "../components/Header";
 
 export default function SignUpScreen({ navigation }) {
   const [email, setEmail] = useState("");
@@ -16,7 +17,7 @@ export default function SignUpScreen({ navigation }) {
         <Text style={styles.backText}>← Back</Text>
       </Pressable>
 
-      <Text style={styles.title}>Sign up</Text>
+      <Header title="Sign up" showIcons={false}/>
 
       <TextInput
         value={email}