Completely reworked the app by starting fresh

- Now you can just swipe to access categories
- Redone side menu
- Inital API input screen is more legible
- A goose as an icon
- Proper display and internal name
- Correct handling of incoming data

.gitignore

@@ -44,3 +44,5 @@ app-example
 
 
 google-services.json
+build-*
+*.apk

app.json

@@ -1,44 +1,30 @@
 {
   "expo": {
-    "name": "my-drawer-app",
-    "slug": "my-drawer-app",
+    "name": "Notifier",
+    "slug": "notifier",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
-    "scheme": "mydrawerapp",
+    "scheme": "notifier",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
     "ios": {
-      "supportsTablet": true,
-      "bundleIdentifier": "com.anonymous.mydrawerapp",
-      "buildNumber": "1.0.0",
-      "infoPlist": {
-        "UIBackgroundModes": [
-          "remote-notification"
-        ],
-        "NSUserTrackingUsageDescription": "This identifier will be used to deliver personalized notifications.",
-        "NSUserNotificationUsageDescription": "This app uses notifications to keep you informed."
-      }
+      "supportsTablet": true
     },
     "android": {
+      "useNextNotificationsApi": true,
+      "googleServicesFile": "./google-services.json",
         "adaptiveIcon": {
           "backgroundColor": "#E6F4FE",
-        "foregroundImage": "./assets/images/android-icon-foreground.png",
-        "backgroundImage": "./assets/images/android-icon-background.png",
-        "monochromeImage": "./assets/images/android-icon-monochrome.png"
+          "foregroundImage": "./assets/images/icon.png"
         },
       "edgeToEdgeEnabled": true,
       "predictiveBackGestureEnabled": false,
-      "package": "com.anonymous.mydrawerapp",
-      "versionCode": 1,
-      "permissions": [
-        "NOTIFICATIONS"
-      ],
-      "googleServicesFile": "./google-services.json"
+      "package": "com.gansejunge.notifier"
     },
     "web": {
       "output": "static",
-      "favicon": "./assets/images/favicon.png"
+      "favicon": "./assets/images/icon.png"
     },
     "plugins": [
       "expo-router",
@@ -53,15 +39,6 @@
             "backgroundColor": "#000000"
           }
         }
-      ],
-      [
-        "expo-notifications",
-        {
-          "icon": "./assets/images/notification-icon.png",
-          "color": "#000000",
-          "androidMode": "default",
-          "androidCollapsedTitle": "New notification"
-        }
       ]
     ],
     "experiments": {
@@ -71,7 +48,7 @@
     "extra": {
       "router": {},
       "eas": {
-        "projectId": "630e211b-f7de-4a82-a863-5962a593f5aa"
+        "projectId": "361036ad-f0cf-41d1-ba27-d3f39f6019dc"
       }
     }
   }

app/HomeScreen.tsx

@@ -1,144 +0,0 @@
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import * as Notifications from "expo-notifications";
-import React, { useEffect, useState } from "react";
-import { Linking, ScrollView, Text, TextInput, TouchableOpacity, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { Category, categories, categoryKeys, categoryTitles } from "types/Category";
-import { Item } from "types/Item";
-import { usePushNotifications } from "../hooks/usePushNotifications";
-import { styles } from "../styles/HomeScreen.styles";
-
-const API_URL = "https://notifier.gansejunge.com";
-const STORAGE_KEY = "notifications";
-const API_KEY_STORAGE = "api_key";
-
-export default function HomeScreen() {
-	const [data, setData] = useState<Item[]>([]);
-	const [selected, setSelected] = useState<Category>("home");
-	const [menuOpen, setMenuOpen] = useState(false);
-	const [apiKey, setApiKey] = useState<string | null>(null);
-	const [tempKey, setTempKey] = useState("");
-
-	const pushToken = usePushNotifications({
-		apiKey,
-		backendUrl: API_URL,
-		appVersion: "1.0.0",
-		locale: "en-uk",
-	});
-
-	// Load API key on startup
-	useEffect(() => {
-		(async () => {
-			const storedKey = await AsyncStorage.getItem(API_KEY_STORAGE);
-			if (storedKey) setApiKey(storedKey);
-		})();
-	}, []);
-
-	// Load saved notifications
-	useEffect(() => {
-		(async () => {
-			try {
-				const stored = await AsyncStorage.getItem(STORAGE_KEY);
-				if (stored) setData(JSON.parse(stored));
-			} catch (err) {
-				console.error("Failed to load stored notifications:", err);
-			}
-		})();
-	}, []);
-
-
-	// Listen for incoming notifications
-	useEffect(() => {
-		const subscription = Notifications.addNotificationReceivedListener(notification => {
-			const rawCategory = notification.request.content.data?.category as Category | undefined;
-			const category: Category = rawCategory && categoryKeys.includes(rawCategory) ? rawCategory : "home";
-
-			const item: Item = {
-				timestamp: Date.now(),
-				category,
-				title: notification.request.content.title || "No title",
-				info: notification.request.content.body || "No description",
-				link: (notification.request.content.data?.link as string) || "#",
-			};
-
-			setData(prev => {
-				const updated = [...prev, item].sort((a, b) => b.timestamp - a.timestamp);
-				AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
-				return updated;
-			});
-		});
-		return () => subscription.remove();
-	}, []);
-
-	const filteredData = selected === "home" ? data : data.filter(item => item.category === selected);
-	const menuItems = categories;
-
-	if (!apiKey) {
-		return (
-			<SafeAreaView style={styles.container}>
-				<View style={{ padding: 20 }}>
-					<Text style={{ marginBottom: 10 }}>Enter API Key:</Text>
-					<TextInput
-						value={tempKey}
-						onChangeText={setTempKey}
-						style={{ borderWidth: 1, padding: 8, marginBottom: 10 }}
-					/>
-					<TouchableOpacity
-						onPress={async () => {
-							await AsyncStorage.setItem(API_KEY_STORAGE, tempKey);
-							setApiKey(tempKey);
-						}}
-						style={{ backgroundColor: "blue", padding: 10 }}
-					>
-						<Text style={{ color: "white" }}>Save</Text>
-					</TouchableOpacity>
-				</View>
-			</SafeAreaView>
-		);
-	}
-
-	return (
-		<SafeAreaView style={styles.container}>
-			{/* Side Menu */}
-			<View style={[styles.sideMenu, menuOpen && styles.sideMenuOpen]}>
-				{menuItems.map(item => (
-					<TouchableOpacity
-						key={item.key}
-						style={[styles.menuItem, selected === item.key && styles.menuItemSelected]}
-						onPress={() => {
-							setSelected(item.key);
-							setMenuOpen(false);
-						}}
-					>
-						<Text style={styles.menuText}>{item.label}</Text>
-					</TouchableOpacity>
-				))}
-			</View>
-
-			{/* Main Content */}
-			<View style={styles.mainContent}>
-				<TouchableOpacity style={styles.menuButton} onPress={() => setMenuOpen(!menuOpen)}>
-					<Text style={styles.menuButtonText}>☰</Text>
-				</TouchableOpacity>
-				<Text style={styles.title}>{categoryTitles[selected]}</Text>
-
-				<ScrollView style={styles.dataContainer}>
-					{filteredData.length === 0 ? (
-						<Text style={{ textAlign: "center", marginTop: 20 }}>No items yet</Text>
-					) : (
-						filteredData.map(item => (
-							<View key={`${item.timestamp}-${item.title}`} style={styles.dataItem}>
-								<Text style={styles.dataTitle}>{item.title}</Text>
-								<Text style={styles.dataDescription}>{item.info}</Text>
-								<TouchableOpacity onPress={() => Linking.openURL(item.link)}>
-									<Text style={{ color: "blue" }}>Read more</Text>
-								</TouchableOpacity>
-							</View>
-						))
-					)}
-				</ScrollView>
-			</View>
-		</SafeAreaView>
-	);
-}
-

app/MainContent.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import { Linking, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { Category, categoryTitles } from 'types/Category';
-import { Item } from 'types/Item';
-
-type MainContentProps = {
-	selected: Category;
-	onToggleMenu: () => void;
-	data: Item[];
-};
-
-export default function MainContent({ selected, onToggleMenu, data }: MainContentProps) {
-	return (
-		<View style={styles.mainContent}>
-			<TouchableOpacity style={styles.menuButton} onPress={onToggleMenu}>
-				<Text style={styles.menuButtonText}>☰</Text>
-			</TouchableOpacity>
-
-			<Text style={styles.title}>{categoryTitles[selected]}</Text>
-
-			<ScrollView style={styles.dataContainer}>
-				{data.map(item => (
-					<TouchableOpacity key={`${item.timestamp}-${item.title}`} onPress={() => Linking.openURL(item.link)}>
-						<View style={styles.dataItem}>
-							<Text style={styles.dataTitle}>{item.title}</Text>
-							<Text style={styles.dataDescription}>{item.info}</Text>
-						</View>
-					</TouchableOpacity>
-				))}
-			</ScrollView>
-		</View>
-	);
-}
-
-const styles = StyleSheet.create({
-	mainContent: {
-		flex: 1,
-		justifyContent: 'center',
-		alignItems: 'center',
-		position: 'relative',
-		backgroundColor: '#f2f2f2',
-	},
-	menuButton: {
-		position: 'absolute',
-		top: 40,
-		left: 16,
-		zIndex: 1,
-		backgroundColor: '#333',
-		borderRadius: 20,
-		padding: 8,
-	},
-	menuButtonText: {
-		color: '#fff',
-		fontSize: 24,
-	},
-	title: {
-		fontSize: 24,
-		fontWeight: 'bold',
-		color: '#333',
-		marginTop: 60,
-		marginBottom: 16,
-	},
-	dataContainer: {
-		width: '90%',
-	},
-	dataItem: {
-		backgroundColor: '#fff',
-		borderRadius: 8,
-		padding: 16,
-		marginBottom: 12,
-		boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
-	},
-	dataTitle: {
-		fontSize: 18,
-		fontWeight: 'bold',
-		color: '#222',
-		marginBottom: 4,
-	},
-	dataDescription: {
-		fontSize: 15,
-		color: '#555',
-	},
-});

app/SideMenu.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-
-export type MenuItem = {
-	label: string;
-	key: string;
-};
-
-type SideMenuProps = {
-	menuItems: MenuItem[];
-	selected: string;
-	onSelect: (key: string) => void;
-};
-
-export default function SideMenu({ menuItems, selected, onSelect }: SideMenuProps) {
-	return (
-		<View style={styles.sideMenu}>
-			{menuItems.map(item => (
-				<TouchableOpacity
-					key={item.key}
-					style={[
-						styles.menuItem,
-						selected === item.key && styles.menuItemSelected,
-					]}
-					onPress={() => onSelect(item.key)}>
-					<Text style={styles.menuText}>{item.label}</Text>
-				</TouchableOpacity>
-			))}
-		</View>
-	);
-}
-
-const styles = StyleSheet.create({
-	sideMenu: {
-		width: 180,
-		backgroundColor: '#333',
-		paddingTop: 40,
-		paddingHorizontal: 16,
-	},
-	menuItem: {
-		paddingVertical: 16,
-		borderRadius: 4,
-		marginBottom: 8,
-	},
-	menuItemSelected: {
-		backgroundColor: '#555',
-	},
-	menuText: {
-		color: '#fff',
-		fontSize: 18,
-	},
-});

app/index.tsx

@@ -1,11 +1,207 @@
-import React from 'react';
-import { SafeAreaProvider } from "react-native-safe-area-context";
-import HomeScreen from './HomeScreen';
+import React, { useEffect, useState } from 'react';
+import { View, Text, TextInput, Button, Linking, TouchableOpacity, ScrollView } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
+import { categories, categoryTitles, Category } from '../types/Category';
+import { Item } from "../types/Item";
+import { styles } from '../styles/styles';
+import { usePushNotifications } from '../hooks/usePushNotifications';
+import { useNotificationListener, STORAGE_KEY } from '../hooks/useNotificationListener';
+import { version as appVersion } from '../package.json';
+
+const Drawer = createDrawerNavigator();
+const API_KEY_STORAGE = 'API_KEY';
+const API_URL = 'https://notifier.gansejunge.com';
+
+type ApiKeyScreenProps = {
+	onApiKeySaved: (key: string) => void;
+};
+
+
+function ApiKeyScreen({ onApiKeySaved }: ApiKeyScreenProps) {
+	const [apiKey, setApiKey] = useState('');
+
+	const saveApiKey = async () => {
+		if (apiKey.trim()) {
+			await AsyncStorage.setItem(API_KEY_STORAGE, apiKey);
+			onApiKeySaved(apiKey);
+		}
+	};
 
-export default function App() {
 	return (
-		<SafeAreaProvider>
-			<HomeScreen />
-		</SafeAreaProvider>
+		<View style={styles.centered}>
+			<Text style={styles.label}>Enter your API Key:</Text>
+			<TextInput
+				style={[styles.input, { color: '#000', backgroundColor: '#fff' }]}
+				value={apiKey}
+				onChangeText={setApiKey}
+				secureTextEntry
+				placeholder="API Key"
+				placeholderTextColor="#030303ff"
+			/>
+			<Button title="Save" onPress={saveApiKey} />
+		</View>
+	);
+}
+
+function CategoryScreen({
+	category,
+	notifications,
+	registered,
+	registrationError,
+}: {
+	category: Category;
+	notifications: Item[];
+	registered: boolean;
+	registrationError: string | null;
+}) {
+	const [showBanner, setShowBanner] = useState(true);
+
+	// Auto-hide banner after 4 seconds whenever it changes
+	useEffect(() => {
+		if (!registered && !registrationError) return; // nothing to show
+		setShowBanner(true); // reset visibility
+		const timer = setTimeout(() => setShowBanner(false), 4000);
+		return () => clearTimeout(timer);
+	}, [registered, registrationError]);
+
+	const filtered = category === "home"
+		? notifications
+		: notifications.filter(n => n.category === category);
+
+	const sorted = filtered.sort((a, b) => b.timestamp - a.timestamp);
+
+	const openLink = (url: string) => {
+		if (url && url !== "#") Linking.openURL(url).catch(console.error);
+	};
+
+	return (
+		<ScrollView contentContainerStyle={{ padding: 16 }}>
+			{/* Banner */}
+			{showBanner && registrationError && (
+				<View style={{ padding: 8, backgroundColor: "#F44336", borderRadius: 4, marginBottom: 12 }}>
+					<Text style={{ color: "#fff", textAlign: "center", fontSize: 12 }}>
+						{registrationError}
+					</Text>
+				</View>
+			)}
+
+			<Text style={{ fontSize: 20, marginBottom: 16, color: "#fff", textAlign: "center" }}>
+				{categoryTitles[category]}
+			</Text>
+
+			{sorted.length === 0 ? (
+				<View style={{ backgroundColor: "#444", padding: 16, borderRadius: 10, alignItems: "center", justifyContent: "center", marginTop: 20 }}>
+					<Text style={{ color: "#ccc", fontSize: 14 }}>No notifications yet.</Text>
+				</View>
+			) : (
+				sorted.map((item, index) => (
+					<View key={index} style={{ backgroundColor: "#444", padding: 12, borderRadius: 10, marginBottom: 12 }}>
+						<Text style={{ color: "#fff", fontWeight: "bold", marginBottom: 4 }}>{item.title}</Text>
+						<Text style={{ color: "#ccc", fontSize: 12, marginBottom: 4 }}>{new Date(item.timestamp).toLocaleString()}</Text>
+						<Text style={{ color: "#fff", marginBottom: item.link && item.link !== "#" ? 8 : 0 }}>{item.info}</Text>
+						{item.link && item.link !== "#" && (
+							<TouchableOpacity onPress={() => openLink(item.link)}>
+								<Text style={{ color: "#4da6ff", textDecorationLine: "underline" }}>Click here</Text>
+							</TouchableOpacity>
+						)}
+					</View>
+				))
+			)}
+		</ScrollView>
+	);
+}
+
+// Custom Drawer with Logout at bottom
+function CustomDrawerContent({ onLogout, ...props }: any) {
+	return (
+		<View style={{ flex: 1, backgroundColor: '#333' }}>
+			<DrawerContentScrollView {...props} contentContainerStyle={{ paddingTop: 0 }}>
+				<View style={{ flex: 1 }}>
+					<DrawerItemList {...props} />
+				</View>
+			</DrawerContentScrollView>
+
+			{/* Logout Button */}
+			<View style={{ padding: 20, borderTopWidth: 1, borderTopColor: '#444' }}>
+				<TouchableOpacity onPress={onLogout} style={styles.logoutButton}>
+					<Text style={styles.logoutText}>Logout</Text>
+				</TouchableOpacity>
+			</View>
+		</View>
+	);
+}
+
+export default function App() {
+	const [apiKeySaved, setApiKeySaved] = useState<boolean | null>(null);
+	const [apiKey, setApiKey] = useState<string | null>(null);
+	const [notifications, setNotifications] = useState<Item[]>([]);
+
+	useEffect(() => {
+		const checkApiKey = async () => {
+			const key = await AsyncStorage.getItem(API_KEY_STORAGE);
+			setApiKey(key); 
+			setApiKeySaved(!!key);
+		};
+		checkApiKey();
+	}, []);
+
+	const { expoPushToken, registered, registrationError, unregisterToken } = usePushNotifications({
+		apiKey: apiKey ?? undefined,
+		backendUrl: API_URL,
+		appVersion,
+		locale: 'en-uk',
+	});
+
+	const handleLogout = async () => {
+		if (unregisterToken) await unregisterToken();
+		await AsyncStorage.removeItem(API_KEY_STORAGE);
+		await AsyncStorage.removeItem(STORAGE_KEY);
+		setApiKey(null);
+		setApiKeySaved(false);
+		setNotifications([]);
+	};
+
+	useNotificationListener(setNotifications);
+
+	if (apiKeySaved === null) return null;
+
+	if (!apiKeySaved) {
+		return (
+			<ApiKeyScreen
+				onApiKeySaved={(key) => {
+					setApiKey(key);
+					setApiKeySaved(true);
+				}}
+			/>
+		);
+	}
+
+	return (
+			<Drawer.Navigator
+				initialRouteName="home"
+				drawerContent={props => <CustomDrawerContent {...props} onLogout={handleLogout} />}
+				screenOptions={{
+					headerStyle: { backgroundColor: '#222' },
+					headerTintColor: '#fff',
+					drawerStyle: { backgroundColor: '#333', width: 240 },
+					drawerActiveTintColor: '#fff',
+					drawerInactiveTintColor: '#ccc',
+					drawerLabelStyle: { textAlign: 'center', fontSize: 16 },
+				}}
+			>
+				{categories.map(c => (
+					<Drawer.Screen key={c.key} name={c.key} options={{ title: c.label }}>
+				{() => (
+			<	CategoryScreen 
+					category={c.key} 
+					notifications={notifications} 
+					registered={registered} 
+					registrationError={registrationError} 
+		/>
+	)}
+</Drawer.Screen>
+				))}
+			</Drawer.Navigator>
 	);
 }

backup_package.json

@@ -1,49 +0,0 @@
-{
-  "name": "my-drawer-app",
-  "main": "expo-router/entry",
-  "version": "1.0.0",
-  "scripts": {
-    "start": "expo start",
-    "reset-project": "node ./scripts/reset-project.js",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "lint": "expo lint"
-  },
-  "dependencies": {
-    "@expo/metro-runtime": "~6.1.2",
-    "@expo/vector-icons": "^15.0.2",
-    "@react-native-firebase/app": "^23.4.0",
-    "@react-navigation/bottom-tabs": "^7.4.0",
-    "@react-navigation/elements": "^2.6.3",
-    "@react-navigation/native": "^7.1.8",
-    "expo": "~54.0.10",
-    "expo-constants": "~18.0.9",
-    "expo-font": "~14.0.8",
-    "expo-haptics": "~15.0.7",
-    "expo-image": "~3.0.8",
-    "expo-linking": "~8.0.8",
-    "expo-router": "~6.0.8",
-    "expo-splash-screen": "~31.0.10",
-    "expo-status-bar": "~3.0.8",
-    "expo-symbols": "~1.0.7",
-    "expo-system-ui": "~6.0.7",
-    "expo-web-browser": "~15.0.7",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-native": "0.81.4",
-    "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-web": "~0.21.0",
-    "react-native-worklets": "0.5.1"
-  },
-  "devDependencies": {
-    "@types/react": "~19.1.0",
-    "eslint": "^9.25.0",
-    "eslint-config-expo": "~10.0.0",
-    "typescript": "~5.9.2"
-  },
-  "private": true
-}

eas.json

@@ -8,7 +8,7 @@
       "developmentClient": true,
       "distribution": "internal"
     },
-    "preview": {
+    "release": {
       "android": {"buildType": "apk"}
     },
     "debug":{

hooks/useNotificationListener.ts

@@ -1,10 +1,10 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as Notifications from "expo-notifications";
 import { useEffect } from "react";
-import { Category, categoryKeys } from "types/Category";
-import { Item } from "types/Item";
+import { Category, categoryKeys } from "../types/Category";
+import { Item } from "../types/Item";
 
-const STORAGE_KEY = "notifications-data";
+export const STORAGE_KEY = "notifications-data";
 
 // Hook: listens for incoming notifications → Item + persists them
 export function useNotificationListener(onItems: (items: Item[]) => void) {
@@ -48,27 +48,29 @@ export function useNotificationListener(onItems: (items: Item[]) => void) {
 }
 
 // Convert Expo notification → Item
-function mapNotificationToItem(notification: Notifications.Notification): Item | null {
+export function mapNotificationToItem(notification: Notifications.Notification): Item | null {
 	try {
 		const content = notification.request.content;
-		const rawCategory = content.data?.category as Category | undefined;
-		const category: Category = rawCategory && categoryKeys.includes(rawCategory) ? rawCategory : "home";
+		const data = content.data || {};
+
+		const rawCategory = data.category as string | undefined;
+		const category: Category = categoryKeys.includes(rawCategory as Category)
+			? (rawCategory as Category)
+			: "utility";
 
 		return {
-			timestamp: Date.now(), // could use backend timestamp if provided
+			timestamp: data.timestamp ? Number(data.timestamp) : Date.now(),
 			category,
 			title: content.title ?? "No title",
-			info: content.body ?? "No details",
-			link: (content.data?.link as string) ?? "",
+			info: content.body ?? "No description",
+			link: typeof data.link === "string" ? data.link : "#",
 		};
-	} catch (e) {
-		console.error("Failed to map notification to Item:", e);
+	} catch (err) {
+		console.error("Failed to map notification to Item:", err);
 		return null;
 	}
 }
 
-export { mapNotificationToItem };
-
 // Save a new item into storage and update state
 async function addItem(item: Item, onItems: (items: Item[]) => void) {
 	try {
@@ -83,3 +85,5 @@ async function addItem(item: Item, onItems: (items: Item[]) => void) {
 		console.error("Failed to persist notification:", e);
 	}
 }
+
+export default null;

hooks/usePushNotifications.ts

@@ -2,6 +2,7 @@ import * as Device from "expo-device";
 import * as Notifications from "expo-notifications";
 import { useEffect, useState } from "react";
 import { Platform } from "react-native";
+import { version as packageVersion } from '../package.json';
 
 type RegisterTokenParams = {
 	apiKey?: string | null;
@@ -14,30 +15,27 @@ type RegisterTokenParams = {
 export function usePushNotifications({
 	apiKey,
 	backendUrl,
-	appVersion = "1.0.0",
+	appVersion = packageVersion,
 	locale,
 	topics
 }: RegisterTokenParams & { apiKey?: string | null }) {
 	const [expoPushToken, setExpoPushToken] = useState<string | null>(null);
+	const [registered, setRegistered] = useState(false);
+	const [registrationError, setRegistrationError] = useState<string | null>(null);
 
 	useEffect(() => {
-		if (!apiKey) return;
-		(async () => {
-			const token = await registerForPushNotificationsAsync();
-			if (token) {
-				setExpoPushToken(token);
-				await registerTokenWithBackend(token);
+		if (!apiKey) {
+			console.log("No API key available, skipping registration");
+			return;
 		}
-		})();
-	}, [apiKey]);
 
 		const registerTokenWithBackend = async (token: string) => {
-		try {
-			await fetch(`${backendUrl}/register_token`, {
+			console.log("Attempting to register token with backend...");
+			const res = await fetch(`${backendUrl}/register-token`, {
 				method: "POST",
 				headers: { 
 					"Content-Type": "application/json", 
-					"X-API-Key": apiKey ?? "",
+					"X-API-Key": apiKey 
 				},
 				body: JSON.stringify({ 
 					token, 
@@ -47,13 +45,74 @@ export function usePushNotifications({
 					topics 
 				})
 			});
+
+			if (!res.ok) {
+				const errorText = await res.text();
+				console.error("Backend registration failed:", res.status, errorText);
+				throw new Error(`Failed to register token: ${res.status}`);
+			}
+			
 			console.log("Push token registered with backend ✅");
+		};
+
+		(async () => {
+			try {
+				const token = await registerForPushNotificationsAsync();
+				if (token) {
+					console.log("Got push token:", token);
+					setExpoPushToken(token);
+					
+					await registerTokenWithBackend(token);
+					setRegistered(true);
+					setRegistrationError(null);
+				} else {
+					console.log("No push token received");
+					setRegistrationError("Could not get push token");
+				}
+			} catch (err) {
+				console.error("Registration error:", err);
+				setRegistered(false);
+				setRegistrationError(err instanceof Error ? err.message : "Failed to register push token");
+			}
+		})();
+	}, [apiKey, backendUrl, appVersion, locale, topics]);
+
+	const unregisterToken = async () => {
+		if (!expoPushToken || !apiKey) {
+			console.log("Cannot unregister: missing token or API key");
+			return;
+		}
+
+		try {
+			console.log("Unregistering token from backend...");
+			const res = await fetch(`${backendUrl}/unregister-token`, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+					"X-API-Key": apiKey,
+				},
+				body: JSON.stringify({
+					token: expoPushToken,
+					platform: Platform.OS,
+					app_ver: appVersion,
+					locale,
+					topics
+				})
+			});
+
+			if (!res.ok) {
+				throw new Error(`Unregister failed: ${res.status}`);
+			}
+			
+			console.log("Push token unregistered from backend ✅");
+			setExpoPushToken(null);
+			setRegistered(false);
 		} catch (error) {
-			console.error("Failed to register token with backend:", error);
+			console.error("Failed to unregister token:", error);
 		}
 	};
 
-	return expoPushToken;
+	return { expoPushToken, registered, registrationError, unregisterToken };
 }
 
 async function registerForPushNotificationsAsync() {

package.json

@@ -1,32 +1,45 @@
 {
-  "name": "my-drawer-app",
+  "name": "notifier",
   "main": "expo-router/entry",
   "version": "1.0.0",
   "scripts": {
     "start": "expo start",
-    "reset-project": "node ./scripts/reset-project.js",
-    "android": "expo run:android",
-    "ios": "expo run:ios",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
     "web": "expo start --web",
     "lint": "expo lint"
   },
   "dependencies": {
-    "@expo/metro-runtime": "~6.1.2",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@react-native-async-storage/async-storage": "2.2.0",
-    "expo": "~54.0.11",
+    "@expo/vector-icons": "^15.0.2",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/drawer": "^7.5.10",
+    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.18",
+    "eas-cli": "^16.23.0",
+    "expo": "~54.0.13",
     "expo-constants": "~18.0.9",
-    "expo-device": "~8.0.9",
+    "expo-device": "^8.0.9",
+    "expo-font": "~14.0.9",
+    "expo-haptics": "~15.0.7",
+    "expo-image": "~3.0.9",
     "expo-linking": "~8.0.8",
-    "expo-notifications": "~0.32.12",
-    "expo-router": "~6.0.9",
+    "expo-notifications": "^0.32.12",
+    "expo-router": "~6.0.11",
     "expo-splash-screen": "~31.0.10",
+    "expo-status-bar": "~3.0.8",
+    "expo-symbols": "~1.0.7",
     "expo-system-ui": "~6.0.7",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "expo-web-browser": "~15.0.8",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-native": "0.81.4",
+    "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-screens": "~4.16.0",
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.5.1"
   },
   "devDependencies": {
     "@types/react": "~19.1.0",

styles/HomeScreen.styles.ts

@@ -1,79 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		flexDirection: "row",
-		backgroundColor: "#f2f2f2",
-	},
-	sideMenu: {
-		width: 0,
-		backgroundColor: "#333",
-		paddingTop: 40,
-		paddingHorizontal: 0,
-		overflow: "hidden",
-	},
-	sideMenuOpen: {
-		width: 180,
-		paddingHorizontal: 16,
-	},
-	menuItem: {
-		paddingVertical: 16,
-		paddingHorizontal: 8,
-		borderRadius: 4,
-		marginBottom: 8,
-	},
-	menuItemSelected: {
-		backgroundColor: "#555",
-	},
-	menuText: {
-		color: "#fff",
-		fontSize: 18,
-	},
-	mainContent: {
-		flex: 1,
-		justifyContent: "center",
-		alignItems: "center",
-		position: "relative",
-	},
-	menuButton: {
-		position: "absolute",
-		top: 40,
-		left: 16,
-		zIndex: 1,
-		backgroundColor: "#333",
-		borderRadius: 20,
-		padding: 8,
-	},
-	menuButtonText: {
-		color: "#fff",
-		fontSize: 24,
-	},
-	title: {
-		fontSize: 24,
-		fontWeight: "bold",
-		marginTop: 60,
-		color: "#333",
-	},
-	dataContainer: {
-		marginTop: 24,
-		width: "90%",
-	},
-	dataItem: {
-		backgroundColor: '#fff',
-		borderRadius: 8,
-		padding: 16,
-		marginBottom: 12,
-		boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
-	},
-	dataTitle: {
-		fontSize: 18,
-		fontWeight: "bold",
-		color: "#222",
-		marginBottom: 4,
-	},
-	dataDescription: {
-		fontSize: 15,
-		color: "#555",
-	},
-});

styles/styles.ts

@@ -0,0 +1,35 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+	centered: {
+		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+		padding: 16,
+		backgroundColor: '#fff', // dark background for screens
+	},
+	input: {
+		borderWidth: 1,
+		borderColor: '#555',
+		width: '80%',
+		padding: 8,
+		marginVertical: 16,
+		borderRadius: 8,
+		color: '#fff',
+	},
+	label: {
+		color: '#fff',
+		fontSize: 16,
+	},
+		logoutButton: {
+		backgroundColor: '#444',
+		paddingVertical: 12,
+		borderRadius: 8,
+		alignItems: 'center',
+	},
+	logoutText: {
+		color: '#fff',
+		fontSize: 16,
+		fontWeight: '600',
+	},
+});

tsconfig.json

@@ -5,9 +5,6 @@
     "paths": {
       "@/*": [
         "./*"
-      ],
-      "types/*": [
-        "./types/*"
       ]
     }
   },

types/Category.ts

@@ -1,6 +1,5 @@
 export type Category = "home" | "royal-road" | "podcasts" | "mixtapes" | "utility";
 
-
 const baseCategories = [
 	{ key: "home", label: "Home", title: "Welcome to Home!" },
 	{ key: "royal-road", label: "Royal Road", title: "Royal Road Chapters" },
@@ -9,7 +8,8 @@ const baseCategories = [
 	{ key: "utility", label: "Utility", title: "Utility" },
 ] as const;
 
-
-export const categoryKeys: Category[] = baseCategories.map(c => c.key);
+export const categoryKeys: Category[] = baseCategories.map(c => c.key) as Category[];
 export const categories: { label: string; key: Category }[] = baseCategories.map(c => ({ label: c.label, key: c.key }));
 export const categoryTitles: Record<Category, string> = Object.fromEntries(baseCategories.map(c => [c.key, c.title])) as Record<Category, string>;
+
+export default Category;