Added home page and liked tracks page, added media player persistence, small other tweaks

.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

jukebox/App.js

@@ -1,21 +1,83 @@
 import { StatusBar } from "expo-status-bar";
-import { StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, View, Pressable } from "react-native";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import MediaPlayer from "./src/components/MediaPlayer";
+import HomeScreen from "./src/screens/HomeScreen";
+import { createContext, useState, useContext } from "react";
+import LikedTracksScreen from "./src/screens/LikedTracksScreen";
+
+const Stack = createNativeStackNavigator();
+
+const playerContext = createContext(null);
+
+export function UsePlayer() {
+  return useContext(playerContext);
+}
+
+function PlayerProvider({ children }) {
+  const [currentTrack, setCurrentTrack] = useState({
+    title: "Swans - A Piece Of The Sky",
+  });
+
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  return (
+    <playerContext.Provider
+      value={{ currentTrack, setCurrentTrack, isPlaying, setIsPlaying }}
+    >
+      {children}
+    </playerContext.Provider>
+  );
+}
+
+function AppNavigator() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="LikedTracks" component={LikedTracksScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+function RootLayout() {
+  const { currentTrack } = UsePlayer();
 
-export default function App() {
   return (
     <View style={styles.container}>
       <StatusBar style="auto" />
-      <MediaPlayer title="Swans - A Piece Of The Sky" />
+
+      <AppNavigator />
+
+      <View style={styles.mediaPlayerWrapper} pointerEvents="box-none">
+        <MediaPlayer title={currentTrack?.title ?? "No track"} />
+      </View>
     </View>
   );
 }
 
+export default function App() {
+  return (
+    <PlayerProvider>
+      <RootLayout />
+    </PlayerProvider>
+  );
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
+    backgroundColor: "#000",
-    alignItems: "center",
+  },
-    justifyContent: "flex-end",
+  mediaPlayerWrapper: {
+    position: "absolute",
+    left: 16,
+    right: 16,
+    bottom: 16,
+    zIndex: 999,
+    elevation: 10,
+    pointerEvents: "box-none",
   },
 });

jukebox/package-lock.json

@@ -9,11 +9,19 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/vector-icons": "^15.0.3",
+        "@react-navigation/native": "^7.1.31",
+        "@react-navigation/native-stack": "^7.14.2",
+        "@react-navigation/stack": "^7.8.2",
         "expo": "~54.0.33",
+        "expo-linear-gradient": "~15.0.8",
         "expo-status-bar": "~3.0.9",
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "react-native": "0.81.5",
+        "react-native-gesture-handler": "~2.28.0",
+        "react-native-reanimated": "~4.1.1",
+        "react-native-safe-area-context": "~5.6.0",
+        "react-native-screens": "~4.16.0",
         "react-native-vector-icons": "^10.3.0",
         "react-native-web": "^0.21.0",
         "rn-inkpad": "^1.1.0"
@@ -1331,6 +1339,22 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.27.1.tgz",
+      "integrity": "sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-typescript": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.28.6.tgz",
@@ -1520,6 +1544,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@expo/code-signing-certificates": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/@expo/code-signing-certificates/-/code-signing-certificates-0.0.6.tgz",
@@ -3069,6 +3105,142 @@
       "integrity": "sha512-0HuJ8YtqlTVRXGZuGeBejLE04wSQsibpTI+RGOyVqxZvgtlLLC/Ssw0UmbHhT4lYMp2fhdtvKZSs5emWB1zR/g==",
       "license": "MIT"
     },
+    "node_modules/@react-navigation/core": {
+      "version": "7.15.1",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-7.15.1.tgz",
+      "integrity": "sha512-Fqr6qxfZJIC4ewho7LtTa9zz6hcOzohX7D1lcDfrkGaYkS5xBwEZViGNxCJK/czUc74ua8NThyrObQFjB6Q/RQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-navigation/routers": "^7.5.3",
+        "escape-string-regexp": "^4.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^3.3.11",
+        "query-string": "^7.1.3",
+        "react-is": "^19.1.0",
+        "use-latest-callback": "^0.2.4",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": ">= 18.2.0"
+      }
+    },
+    "node_modules/@react-navigation/core/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-navigation/core/node_modules/react-is": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz",
+      "integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==",
+      "license": "MIT"
+    },
+    "node_modules/@react-navigation/elements": {
+      "version": "2.9.8",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-2.9.8.tgz",
+      "integrity": "sha512-3gpwUmVnDJYvK9nFmAA/YXw0hmT/C/lZx8RkRMK+ux9l1T+32EWnQFnn34Wa1BMDX8HN2r64yrlW93DIzKI7Uw==",
+      "license": "MIT",
+      "dependencies": {
+        "color": "^4.2.3",
+        "use-latest-callback": "^0.2.4",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "peerDependencies": {
+        "@react-native-masked-view/masked-view": ">= 0.2.0",
+        "@react-navigation/native": "^7.1.31",
+        "react": ">= 18.2.0",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@react-native-masked-view/masked-view": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-navigation/native": {
+      "version": "7.1.31",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-7.1.31.tgz",
+      "integrity": "sha512-+YCUwtfDgsux59Q0LDHc3Zid9ih93ecUCFWZOH6/+eNoUGnWx77wjS6ZfvBO/7E+EiIup11IVShDzCHR4of8hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-navigation/core": "^7.15.1",
+        "escape-string-regexp": "^4.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^3.3.11",
+        "use-latest-callback": "^0.2.4"
+      },
+      "peerDependencies": {
+        "react": ">= 18.2.0",
+        "react-native": "*"
+      }
+    },
+    "node_modules/@react-navigation/native-stack": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-7.14.2.tgz",
+      "integrity": "sha512-/nKxFAFSUSGV+NSXrXXcWEcGAHdyp8RyWjoGMDzVPdBhjCLblVSgHWx5y4mm+k0de9V1pkjsftUaroP7rQckzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-navigation/elements": "^2.9.8",
+        "color": "^4.2.3",
+        "sf-symbols-typescript": "^2.1.0",
+        "warn-once": "^0.1.1"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^7.1.31",
+        "react": ">= 18.2.0",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 4.0.0",
+        "react-native-screens": ">= 4.0.0"
+      }
+    },
+    "node_modules/@react-navigation/native/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-navigation/routers": {
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-7.5.3.tgz",
+      "integrity": "sha512-1tJHg4KKRJuQ1/EvJxatrMef3NZXEPzwUIUZ3n1yJ2t7Q97siwRtbynRpQG9/69ebbtiZ8W3ScOZF/OmhvM4Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11"
+      }
+    },
+    "node_modules/@react-navigation/stack": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-7.8.2.tgz",
+      "integrity": "sha512-M91rWznv8mV1IvoBF9MJS3952gZAAYKnd5WcZdXqQDuA/Ol2eeXXoeRdlrapxULaEVdtbFv+6eeabG9QwWdr6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-navigation/elements": "^2.9.8",
+        "color": "^4.2.3",
+        "use-latest-callback": "^0.2.4"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^7.1.31",
+        "react": ">= 18.2.0",
+        "react-native": "*",
+        "react-native-gesture-handler": ">= 2.0.0",
+        "react-native-safe-area-context": ">= 4.0.0",
+        "react-native-screens": ">= 4.0.0"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.10",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.10.tgz",
@@ -3143,6 +3315,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.46",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.46.tgz",
+      "integrity": "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==",
+      "license": "MIT"
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -4053,6 +4231,19 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -4068,6 +4259,34 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/color/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -4244,6 +4463,15 @@
         }
       }
     },
+    "node_modules/decode-uri-component": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/deep-extend": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -4510,6 +4738,17 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-linear-gradient": {
+      "version": "15.0.8",
+      "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-15.0.8.tgz",
+      "integrity": "sha512-V2d8Wjn0VzhPHO+rrSBtcl+Fo+jUUccdlmQ6OoL9/XQB7Qk3d9lYrqKDJyccwDxmQT10JdST3Tmf2K52NLc3kw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "3.0.24",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-3.0.24.tgz",
@@ -4912,6 +5151,12 @@
       "integrity": "sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA==",
       "license": "Apache-2.0"
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -4969,6 +5214,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@@ -5196,6 +5450,21 @@
         "hermes-estree": "0.32.0"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/hosted-git-info": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-7.0.2.tgz",
@@ -5356,6 +5625,12 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
+      "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
+      "license": "MIT"
+    },
     "node_modules/is-core-module": {
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
@@ -7337,6 +7612,24 @@
         "qrcode-terminal": "bin/qrcode-terminal.js"
       }
     },
+    "node_modules/query-string": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
+      "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==",
+      "license": "MIT",
+      "dependencies": {
+        "decode-uri-component": "^0.2.2",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/queue": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
@@ -7401,6 +7694,18 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-freeze": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz",
+      "integrity": "sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -7464,6 +7769,21 @@
         }
       }
     },
+    "node_modules/react-native-gesture-handler": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.28.0.tgz",
+      "integrity": "sha512-0msfJ1vRxXKVgTgvL+1ZOoYw3/0z1R+Ked0+udoJhyplC2jbVKIJ8Z1bzWdpQRCV3QcQ87Op0zJVE5DhKK2A0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@egjs/hammerjs": "^2.0.17",
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-is-edge-to-edge": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.2.1.tgz",
@@ -7474,6 +7794,59 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-reanimated": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-4.1.6.tgz",
+      "integrity": "sha512-F+ZJBYiok/6Jzp1re75F/9aLzkgoQCOh4yxrnwATa8392RvM3kx+fiXXFvwcgE59v48lMwd9q0nzF1oJLXpfxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-native-is-edge-to-edge": "^1.2.1",
+        "semver": "7.7.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-worklets": ">=0.5.0"
+      }
+    },
+    "node_modules/react-native-reanimated/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-safe-area-context": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.2.tgz",
+      "integrity": "sha512-4XGqMNj5qjUTYywJqpdWZ9IG8jgkS3h06sfVjfw5yZQZfWnRFXczi0GnYyFyCc2EBps/qFmoCH8fez//WumdVg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-screens": {
+      "version": "4.16.0",
+      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-4.16.0.tgz",
+      "integrity": "sha512-yIAyh7F/9uWkOzCi1/2FqvNvK6Wb9Y1+Kzn16SuGfN9YFJDTbwlzGRvePCNTOX0recpLQF3kc2FmvMUhyTCH1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-freeze": "^1.0.0",
+        "react-native-is-edge-to-edge": "^1.2.1",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-vector-icons": {
       "version": "10.3.0",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.3.0.tgz",
@@ -7561,6 +7934,135 @@
       "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
       "license": "MIT"
     },
+    "node_modules/react-native-worklets": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/react-native-worklets/-/react-native-worklets-0.7.4.tgz",
+      "integrity": "sha512-NYOdM1MwBb3n+AtMqy1tFy3Mn8DliQtd8sbzAVRf9Gc+uvQ0zRfxN7dS8ZzoyX7t6cyQL5THuGhlnX+iFlQTag==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/plugin-transform-arrow-functions": "7.27.1",
+        "@babel/plugin-transform-class-properties": "7.27.1",
+        "@babel/plugin-transform-classes": "7.28.4",
+        "@babel/plugin-transform-nullish-coalescing-operator": "7.27.1",
+        "@babel/plugin-transform-optional-chaining": "7.27.1",
+        "@babel/plugin-transform-shorthand-properties": "7.27.1",
+        "@babel/plugin-transform-template-literals": "7.27.1",
+        "@babel/plugin-transform-unicode-regex": "7.27.1",
+        "@babel/preset-typescript": "7.27.1",
+        "convert-source-map": "2.0.0",
+        "semver": "7.7.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-worklets/node_modules/@babel/plugin-transform-class-properties": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.27.1.tgz",
+      "integrity": "sha512-D0VcalChDMtuRvJIu3U/fwWjf8ZMykz5iZsg77Nuj821vCKI3zCyRLwRdWbsuJ/uRwZhZ002QtCqIkwC/ZkvbA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/react-native-worklets/node_modules/@babel/plugin-transform-classes": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.28.4.tgz",
+      "integrity": "sha512-cFOlhIYPBv/iBoc+KS3M6et2XPtbT2HiCRfBXWtfpc9OAyostldxIf9YAYB6ypURBBbx+Qv6nyrLzASfJe+hBA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.27.1",
+        "@babel/traverse": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/react-native-worklets/node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.27.1.tgz",
+      "integrity": "sha512-aGZh6xMo6q9vq1JGcw58lZ1Z0+i0xB2x0XaauNIUXd6O1xXc3RwoWEBlsTQrY4KQ9Jf0s5rgD6SiNkaUdJegTA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/react-native-worklets/node_modules/@babel/plugin-transform-optional-chaining": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.27.1.tgz",
+      "integrity": "sha512-BQmKPPIuc8EkZgNKsv0X4bPmOoayeu4F1YCwx2/CfmDSXDbp7GnzlUH+/ul5VGfRg1AoFPsrIThlEBj2xb4CAg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/react-native-worklets/node_modules/@babel/preset-typescript": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.27.1.tgz",
+      "integrity": "sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-validator-option": "^7.27.1",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/plugin-transform-modules-commonjs": "^7.27.1",
+        "@babel/plugin-transform-typescript": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/react-native-worklets/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "license": "ISC",
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native/node_modules/@react-native/virtualized-lists": {
       "version": "0.81.5",
       "resolved": "https://registry.npmjs.org/@react-native/virtualized-lists/-/virtualized-lists-0.81.5.tgz",
@@ -8070,6 +8572,15 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "license": "ISC"
     },
+    "node_modules/sf-symbols-typescript": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/sf-symbols-typescript/-/sf-symbols-typescript-2.2.0.tgz",
+      "integrity": "sha512-TPbeg0b7ylrswdGCji8FRGFAKuqbpQlLbL8SOle3j1iHSs5Ob5mhvMAxWN2UItOjgALAB5Zp3fmMfj8mbWvXKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -8120,6 +8631,15 @@
         "plist": "^3.0.5"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
+      "integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -8181,6 +8701,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -8244,6 +8773,15 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -8778,6 +9316,24 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-latest-callback": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.2.6.tgz",
+      "integrity": "sha512-FvRG9i1HSo0wagmX63Vrm8SnlUU3LMM3WyZkQ76RnslpBrX694AdG4A0zQBx2B3ZifFA0yv/BaEHGBnEax5rZg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -8829,6 +9385,12 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warn-once": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.1.tgz",
+      "integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==",
+      "license": "MIT"
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",

jukebox/package.json

@@ -10,11 +10,19 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
+    "@react-navigation/native": "^7.1.31",
+    "@react-navigation/native-stack": "^7.14.2",
+    "@react-navigation/stack": "^7.8.2",
     "expo": "~54.0.33",
+    "expo-linear-gradient": "~15.0.8",
     "expo-status-bar": "~3.0.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
     "react-native-vector-icons": "^10.3.0",
     "react-native-web": "^0.21.0",
     "rn-inkpad": "^1.1.0"

jukebox/src/components/MediaPlayer.js

@@ -2,15 +2,28 @@ import { useState } from "react";
 import { TouchableOpacity, Text, StyleSheet } from "react-native";
 import { View } from "react-native-web";
 import { Button, Slider } from "rn-inkpad";
+import { LinearGradient } from "expo-linear-gradient";
 
 export default function MediaPlayer({ title, onPress }) {
   const [isPlaying, setIsPlaying] = useState(false);
 
   return (
-    <View style={styles.box}>
+    <LinearGradient
+      colors={[
+        "rgba(70,70,70,0.92)", // top
+        "rgba(35,35,35,0.95)", // middle
+        "rgba(15,15,15,0.98)", // bottom
+      ]}
+      locations={[0, 0.55, 1]}
+      start={{ x: 0.5, y: 0 }}
+      end={{ x: 0.5, y: 1 }}
+      style={styles.box}
+    >
       <Text style={styles.name_album_and_artist}>{title}</Text>
+
       <View style={styles.playback_row}>
         <Text style={styles.time}>1:20</Text>
+
         <View style={styles.slider_wrapper}>
           <Slider
             value={35}
@@ -25,26 +38,27 @@ export default function MediaPlayer({ title, onPress }) {
             }}
           />
         </View>
+
         <Text style={styles.time}>4:08</Text>
       </View>
+
       <Button
-        buttonColor="#000000"
+        buttonColor="rgba(0,0,0,0)"
         text=""
         icon={isPlaying ? "play" : "pause"}
         iconSize={45}
         onPress={() => setIsPlaying(!isPlaying)}
       />
-    </View>
+    </LinearGradient>
   );
 }
 
 const styles = StyleSheet.create({
   box: {
-    backgroundColor: "#000000",
     borderRadius: 15,
     padding: 20,
     alignSelf: "stretch",
-    margin: 5,
+    marginHorizontal: 5,
     height: "20%",
     alignItems: "center",
     opacity: 0.98,

jukebox/src/screens/HomeScreen.js

@@ -0,0 +1,102 @@
+import React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  ScrollView,
+  Pressable,
+} from "react-native";
+import { useNavigation } from "@react-navigation/native";
+
+const likedTracks = [
+  "Track 1",
+  "Track 2",
+  "Track 3",
+  "Track 4",
+  "Track 5",
+  "Track 6",
+];
+
+const likedAlbums = [
+  "Album 1",
+  "Album 2",
+  "Album 3",
+  "Album 4",
+  "Album 5",
+  "Album 6",
+  "Album 7",
+  "Album 8",
+];
+
+export default function HomeScreen() {
+  const navigation = useNavigation();
+  return (
+    <View style={styles.container}>
+      <Pressable
+        onPress={() =>
+          navigation.navigate("LikedTracks", { tracks: likedTracks })
+        }
+      >
+        <Text style={styles.sectionTitle}>Liked tracks ➚</Text>
+      </Pressable>
+
+      {likedTracks.map((item, index) => (
+        <View key={index} style={styles.trackItem} />
+      ))}
+
+      <Text style={[styles.sectionTitle, { marginTop: 24 }]}>
+        Liked albums ➚
+      </Text>
+
+      <FlatList
+        data={likedAlbums}
+        keyExtractor={(_, index) => index.toString()}
+        numColumns={2}
+        columnWrapperStyle={styles.albumRow}
+        contentContainerStyle={styles.albumList}
+        renderItem={() => <View style={styles.albumItem} />}
+        showsVerticalScrollIndicator={false}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#000",
+    paddingTop: 24,
+    paddingHorizontal: 16,
+  },
+  sectionTitle: {
+    color: "#fff",
+    fontSize: 34,
+    fontWeight: "700",
+    marginBottom: 12,
+  },
+  trackItem: {
+    height: 42,
+    backgroundColor: "#ffd9d9",
+    borderWidth: 2,
+    borderColor: "#ff4d4d",
+    borderRadius: 8,
+    marginBottom: 10,
+  },
+  tracksBox: {
+    maxHeight: 260, // about 5 track rows
+  },
+  albumList: {
+    paddingBottom: 120, // keep room for your media player at bottom
+  },
+  albumRow: {
+    justifyContent: "space-between",
+    marginBottom: 12,
+  },
+  albumItem: {
+    width: "48%",
+    aspectRatio: 1, // square
+    backgroundColor: "#f7d7a6",
+    borderRadius: 18,
+  },
+});

jukebox/src/screens/LikedTracksScreen.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
+
+export default function LikedTracksScreen({ route, navigation }) {
+  const tracks = route.params?.tracks ?? [];
+
+  return (
+    <View style={styles.container}>
+      <Pressable onPress={() => navigation.goBack()} style={styles.backBtn}>
+        <Text style={styles.backText}>← Back</Text>
+      </Pressable>
+
+      <Text style={styles.title}>Your liked tracks</Text>
+
+      <FlatList
+        data={tracks}
+        keyExtractor={(_, index) => index.toString()}
+        renderItem={({ item }) => (
+          <View style={styles.trackItem}>
+            <Text style={styles.trackText}>{item}</Text>
+          </View>
+        )}
+        contentContainerStyle={{ paddingBottom: 24 }}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#000",
+    paddingTop: 24,
+    paddingHorizontal: 16,
+  },
+  backBtn: { marginBottom: 10 },
+  backText: { color: "#fff", fontSize: 16 },
+  title: { color: "#fff", fontSize: 30, fontWeight: "700", marginBottom: 12 },
+  trackItem: {
+    height: 50,
+    justifyContent: "center",
+    paddingHorizontal: 12,
+    backgroundColor: "#ffd9d9",
+    borderWidth: 2,
+    borderColor: "#ff4d4d",
+    borderRadius: 8,
+    marginBottom: 10,
+  },
+  trackText: { color: "#111", fontWeight: "600" },
+});