Add comments for code structure clarity; enhance readability across multiple components

src/components/API/API.js

@@ -0,0 +1,32 @@
+const API = {};
+
+API.get = (endpoint) => callFetch(endpoint, 'GET');
+API.post = (endpoint, data) => callFetch(endpoint, 'POST', data);
+API.put = (endpoint, data) => callFetch(endpoint, 'PUT', data);
+API.delete = (endpoint) => callFetch(endpoint, 'DELETE');
+
+export default API;
+
+const callFetch = async (endpoint, method, dataObj = null) => {
+    // Build request object
+    let requestObj = {method: method}; // GET, POST, PUT or DELETE
+    if (dataObj)
+        requestObj = {
+            ...requestObj,
+            headers: {'Content-type': 'application/json'},
+            body: JSON.stringify(dataObj),
+        };
+
+    // Call the fetch and process the return
+    try {
+        let result = null;
+        const response = await fetch(endpoint, requestObj);
+        if (response.status !== 204) result = await response.json();
+        return response.status >= 200 && response.status < 300
+            ? {isSuccess: true, result}
+            : {isSuccess: false, message: `${result.message}`};
+    } catch (error) {
+        return {isSuccess: false, message: error.message};
+    }
+};
+

src/components/API/useLoad.js

@@ -0,0 +1,30 @@
+import {useEffect, useState} from "react";
+import API from "./API";
+
+
+const useLoad = (loadEndpoint) => {
+
+    //   State ----------------------
+
+    const [records, setRecords] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    //   Loader ----------------------
+    const loadRecords = async (endpoint) => {
+        setIsLoading(true);
+        const response = await API.get(endpoint);
+        if (response.isSuccess) setRecords(response.result);
+        setIsLoading(false);
+    };
+
+    useEffect(() => {
+        loadRecords(loadEndpoint);
+    }, []);
+
+    //   return ----------------------
+
+    return [records, setRecords, isLoading, loadRecords];
+};
+
+export default useLoad;
+

src/components/UI/Button.js

@@ -1,6 +1,11 @@
 import {Pressable, StyleSheet, Text, View} from "react-native";
 
 export const Button = ({ label, icon, onClick, styleLabel, styleButton }) => {
+  //   Initialisation -------------
+  //   State ----------------------
+  //   Handlers -------------------
+  //   View -----------------------
+
   return (
     <Pressable onPress={onClick} style={[styles.button, styleButton]}>
       {icon ? icon : null}
@@ -10,6 +15,11 @@ export const Button = ({ label, icon, onClick, styleLabel, styleButton }) => {
 };
 
 export const ButtonTray = ({ children }) => {
+  //   Initialisation -------------
+  //   State ----------------------
+  //   Handlers -------------------
+  //   View -----------------------
+
   return <View style={styles.buttonTray}>{children}</View>;
 };
 

src/components/gameplay/AdminCacheEditorView.js

@@ -2,6 +2,11 @@ import React from 'react';
 import MapView, {Circle, Marker} from 'react-native-maps';
 
 const AdminCacheEditorView = ({ userLocation, caches, onAddCache, onMoveCache }) => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
   if (!userLocation) {
     return null;
   }

src/components/gameplay/ClaimTimerView.js

@@ -2,8 +2,13 @@ import React, {useEffect, useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const ClaimTimerView = ({ cache, onClaimSuccess, isClaiming }) => {
+//   Initialisation -------------
+//   State ----------------------
+
   const [timeLeft, setTimeLeft] = useState(5);
 
+//   Handlers -------------------
+
   useEffect(() => {
     let timer;
     if (isClaiming && timeLeft > 0) {
@@ -16,6 +21,8 @@ const ClaimTimerView = ({ cache, onClaimSuccess, isClaiming }) => {
     return () => clearTimeout(timer);
   }, [isClaiming, timeLeft, cache, onClaimSuccess]);
 
+//   View -----------------------
+
   if (!isClaiming) {
     return null;
   }
@@ -45,4 +52,3 @@ const styles = StyleSheet.create({
 });
 
 export default ClaimTimerView;
-

src/components/gameplay/PlayerMapView.js

@@ -3,9 +3,12 @@ import MapView, {Circle} from 'react-native-maps';
 import ClaimTimerView from './ClaimTimerView';
 
 const PlayerMapView = ({ userLocation, visibleCache, isClaiming, onClaimSuccess }) => {
-  if (!userLocation) {
-    return null;
-  }
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+  if (!userLocation) return null;
 
   return (
     <>

src/components/layout/BottomNavbar.js

@@ -1,74 +1,79 @@
 import {Pressable, StyleSheet, Text, View} from 'react-native';
 
 const BottomNavbar = ({ navigation, routeName }) => {
-  const tabs = [
-    {
-      label: 'Map',
-      route: 'MapScreen',
-      onPress: () => navigation.navigate('Game', { screen: 'MapScreen' }),
-    },
-    {
-      label: 'Leaderboard',
-      route: 'LeaderboardScreen',
-      onPress: () => navigation.navigate('Game', { screen: 'LeaderboardScreen' }),
-    },
-    {
-      label: 'Current Team',
-      route: 'TeamScreen',
-      onPress: () => navigation.navigate('Game', { screen: 'TeamScreen' }),
-    },
-  ];
+//   Initialisation ------------
 
-  return (
-    <View style={styles.container}>
-      {tabs.map((tab) => {
-        const isActive = routeName === tab.route;
-        return (
-          <Pressable
-            key={tab.route}
-            onPress={tab.onPress}
-            style={[styles.tab, isActive && styles.tabActive]}
-          >
-            <Text style={[styles.tabText, isActive && styles.tabTextActive]}>{tab.label}</Text>
-          </Pressable>
-        );
-      })}
-    </View>
-  );
+    const tabs = [
+        {
+            label: 'Map',
+            route: 'MapScreen',
+            onPress: () => navigation.navigate('Game', { screen: 'MapScreen' }),
+        },
+        {
+            label: 'Leaderboard',
+            route: 'LeaderboardScreen',
+            onPress: () => navigation.navigate('Game', { screen: 'LeaderboardScreen' }),
+        },
+        {
+            label: 'Current Team',
+            route: 'TeamScreen',
+            onPress: () => navigation.navigate('Game', { screen: 'TeamScreen' }),
+        },
+    ];
+
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+    return (
+        <View style={styles.container}>
+            {tabs.map((tab) => {
+                const isActive = routeName === tab.route;
+                return (
+                    <Pressable
+                        key={tab.route}
+                        onPress={tab.onPress}
+                        style={[styles.tab, isActive && styles.tabActive]}
+                    >
+                        <Text style={[styles.tabText, isActive && styles.tabTextActive]}>{tab.label}</Text>
+                    </Pressable>
+                );
+            })}
+        </View>
+    );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    minHeight: 64,
-    borderTopWidth: 1,
-    borderTopColor: '#e5e7eb',
-    backgroundColor: '#ffffff',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-around',
-    paddingHorizontal: 8,
-  },
-  tab: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 12,
-    borderRadius: 8,
-    marginHorizontal: 4,
-  },
-  tabActive: {
-    backgroundColor: '#eff6ff',
-  },
-  tabText: {
-    color: '#374151',
-    fontSize: 12,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-  tabTextActive: {
-    color: '#2563eb',
-  },
+    container: {
+        minHeight: 64,
+        borderTopWidth: 1,
+        borderTopColor: '#e5e7eb',
+        backgroundColor: '#ffffff',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-around',
+        paddingHorizontal: 8,
+    },
+    tab: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 12,
+        borderRadius: 8,
+        marginHorizontal: 4,
+    },
+    tabActive: {
+        backgroundColor: '#eff6ff',
+    },
+    tabText: {
+        color: '#374151',
+        fontSize: 12,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+    tabTextActive: {
+        color: '#2563eb',
+    },
 });
 
 export default BottomNavbar;
-

src/components/layout/Screen.js

@@ -5,18 +5,18 @@ import TopNavbar from "./TopNavbar";
 import BottomNavbar from "./BottomNavbar";
 
 const Screen = ({ children, style }) => {
+  //   Initialisation -------------
+
   const navigation = useNavigation();
   const route = useRoute();
 
   const titleMap = {
-    LoginScreen: "Login",
-    RegisterScreen: "Register",
     GameTypeScreen: "Game Type",
     JoinPrivateGameScreen: "Join Private Game",
     ManagePrivateGameScreen: "Manage Private Game",
     CreateGameScreen: "Create Game",
     ManageGameScreen: "Manage Game",
-    GameLobbyScreen: "Leaderboard",
+    GameLobbyScreen: "Game Lobby",
     LeaderboardScreen: "Leaderboard",
     TeamScreen: "Current Team",
     MapScreen: "Map",
@@ -24,15 +24,21 @@ const Screen = ({ children, style }) => {
     ManageSubgroupsScreen: "Manage Subgroups",
   };
 
+  //   State ----------------------
+
   const routeName = route.name;
-  const showBack = routeName !== "LoginScreen" && navigation.canGoBack();
+  const isAuthScreen = routeName === "LoginScreen" || routeName === "RegisterScreen";
+  const showBack = !isAuthScreen && navigation.canGoBack();
   const pageTitle = titleMap[routeName] || "Treasure Hunt";
 
+  //   Handlers -------------------
+  //   View -----------------------
+
   return (
     <View style={[styles.screen, style]}>
-      <TopNavbar title={pageTitle} showBack={showBack} navigation={navigation} />
+      {!isAuthScreen && <TopNavbar title={pageTitle} showBack={showBack} navigation={navigation} />}
       <View style={styles.content}>{children}</View>
-      <BottomNavbar navigation={navigation} routeName={routeName} />
+      {!isAuthScreen && <BottomNavbar navigation={navigation} routeName={routeName} />}
       <StatusBar style="light" />
     </View>
   );

src/components/layout/TopNavbar.js

@@ -1,90 +1,94 @@
 import {Pressable, StyleSheet, Text, View} from 'react-native';
 import {clearSession} from '../../hooks/SessionStore';
 
-const TopNavbar = ({ title, showBack, navigation }) => {
-  const routeName = navigation.getState()?.routes?.[navigation.getState().index]?.name;
-  const showLogout = routeName !== 'LoginScreen' && routeName !== 'RegisterScreen';
+const TopNavbar = ({title, showBack, navigation}) => {
+//   Initialisation ------------
 
-  const handleBack = () => {
-    if (navigation.canGoBack()) {
-      navigation.goBack();
-    }
-  };
+    const routeName = navigation.getState()?.routes?.[navigation.getState().index]?.name;
+    const showLogout = routeName !== 'LoginScreen' && routeName !== 'RegisterScreen';
 
-  const handleLogout = () => {
-    clearSession();
-    navigation.reset({
-      index: 0,
-      routes: [{ name: 'Auth', params: { screen: 'LoginScreen' } }],
-    });
-  };
+//   State ----------------------
+//   Handlers -------------------
 
-  return (
-    <View style={styles.container}>
-      <View style={styles.leftSlot}>
-        {showBack ? (
-          <Pressable onPress={handleBack} style={styles.iconButton}>
-            <Text style={styles.iconText}>{'<'}</Text>
-          </Pressable>
-        ) : null}
-      </View>
-      <Text style={styles.title}>{title}</Text>
-      <View style={styles.rightSlot}>
-        {showLogout ? (
-          <Pressable onPress={handleLogout} style={styles.logoutButton}>
-            <Text style={styles.logoutText}>Logout</Text>
-          </Pressable>
-        ) : null}
-      </View>
-    </View>
-  );
+    const handleBack = () => {
+        if (navigation.canGoBack()) navigation.goBack();
+    };
+
+    const handleLogout = () => {
+        clearSession();
+        navigation.reset({
+            index: 0,
+            routes: [{name: 'Auth', params: {screen: 'LoginScreen'}}],
+        });
+    };
+
+//   View -----------------------
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.leftSlot}>
+                {showBack ? (
+                    <Pressable onPress={handleBack} style={styles.iconButton}>
+                        <Text style={styles.iconText}>{'<'}</Text>
+                    </Pressable>
+                ) : null}
+            </View>
+            <Text style={styles.title}>{title}</Text>
+            <View style={styles.rightSlot}>
+                {showLogout ? (
+                    <Pressable onPress={handleLogout} style={styles.logoutButton}>
+                        <Text style={styles.logoutText}>Logout</Text>
+                    </Pressable>
+                ) : null}
+            </View>
+        </View>
+    );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    minHeight: 56,
-    borderBottomWidth: 1,
-    borderBottomColor: '#e5e7eb',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 12,
-    backgroundColor: '#ffffff',
-  },
-  leftSlot: {
-    width: 72,
-    alignItems: 'flex-start',
-  },
-  rightSlot: {
-    width: 72,
-    alignItems: 'flex-end',
-  },
-  iconButton: {
-    paddingVertical: 8,
-    paddingHorizontal: 10,
-  },
-  iconText: {
-    fontSize: 20,
-    color: '#111827',
-    fontWeight: '700',
-  },
-  title: {
-    flex: 1,
-    textAlign: 'center',
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#111827',
-  },
-  logoutButton: {
-    paddingVertical: 6,
-    paddingHorizontal: 8,
-  },
-  logoutText: {
-    color: '#2563eb',
-    fontSize: 13,
-    fontWeight: '600',
-  },
+    container: {
+        minHeight: 56,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e5e7eb',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        backgroundColor: '#ffffff',
+    },
+    leftSlot: {
+        width: 72,
+        alignItems: 'flex-start',
+    },
+    rightSlot: {
+        width: 72,
+        alignItems: 'flex-end',
+    },
+    iconButton: {
+        paddingVertical: 8,
+        paddingHorizontal: 10,
+    },
+    iconText: {
+        fontSize: 20,
+        color: '#111827',
+        fontWeight: '700',
+    },
+    title: {
+        flex: 1,
+        textAlign: 'center',
+        fontSize: 18,
+        fontWeight: '700',
+        color: '#111827',
+    },
+    logoutButton: {
+        paddingVertical: 6,
+        paddingHorizontal: 8,
+    },
+    logoutText: {
+        color: '#2563eb',
+        fontSize: 13,
+        fontWeight: '600',
+    },
 });
 
 export default TopNavbar;
-

src/components/screens/AdminHubScreen.js

@@ -2,17 +2,24 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
-const AdminHubScreen = () => (
-  <Screen style={styles.container}>
-    <Text style={styles.title}>Admin Hub</Text>
-    <Text style={styles.body}>Admin hub setup goes here.</Text>
-  </Screen>
-);
+const AdminHubScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+    return (
+        <Screen style={styles.container}>
+            <Text style={styles.title}>Admin Hub</Text>
+            <Text style={styles.body}>Admin hub setup goes here.</Text>
+        </Screen>
+    );
+};
 
 const styles = StyleSheet.create({
-  container: { justifyContent: 'center', alignItems: 'center' },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  body: { color: '#4b5563', fontSize: 15, marginTop: 10 },
+    container: {justifyContent: 'center', alignItems: 'center'},
+    title: {fontSize: 24, fontWeight: 'bold'},
+    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
 });
 
 export default AdminHubScreen;

src/components/screens/CreateGameScreen.js

@@ -2,17 +2,24 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
-const CreateGameScreen = () => (
-  <Screen style={styles.container}>
-    <Text style={styles.title}>Create Game</Text>
-    <Text style={styles.body}>Create game setup goes here.</Text>
-  </Screen>
-);
+const CreateGameScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+    return (
+        <Screen style={styles.container}>
+            <Text style={styles.title}>Create Game</Text>
+            <Text style={styles.body}>Create game setup goes here.</Text>
+        </Screen>
+    );
+};
 
 const styles = StyleSheet.create({
-  container: { justifyContent: 'center', alignItems: 'center' },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  body: { color: '#4b5563', fontSize: 15, marginTop: 10 },
+    container: {justifyContent: 'center', alignItems: 'center'},
+    title: {fontSize: 24, fontWeight: 'bold'},
+    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
 });
 
 export default CreateGameScreen;

src/components/screens/GameLobbyScreen.js

@@ -2,17 +2,24 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
-const GameLobbyScreen = () => (
-  <Screen style={styles.container}>
-    <Text style={styles.title}>Game Lobby</Text>
-    <Text style={styles.body}>Game lobby setup goes here.</Text>
-  </Screen>
-);
+const GameLobbyScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+    return (
+        <Screen style={styles.container}>
+            <Text style={styles.title}>Game Lobby</Text>
+            <Text style={styles.body}>Game lobby setup goes here.</Text>
+        </Screen>
+    );
+};
 
 const styles = StyleSheet.create({
-  container: { justifyContent: 'center', alignItems: 'center' },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  body: { color: '#4b5563', fontSize: 15, marginTop: 10 },
+    container: {justifyContent: 'center', alignItems: 'center'},
+    title: {fontSize: 24, fontWeight: 'bold'},
+    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
 });
 
 export default GameLobbyScreen;

src/components/screens/GameTypeScreen.js

@@ -3,66 +3,71 @@ import {Pressable, StyleSheet, Text, View} from 'react-native';
 import useGameHook from '../../hooks/useGameHook';
 import Screen from '../layout/Screen';
 
-const GameTypeScreen = ({ navigation }) => {
-  const { getGameTypes } = useGameHook();
-  const [gameTypes, setGameTypes] = useState([]);
+const GameTypeScreen = ({navigation}) => {
+//   Initialisation ------------
 
-  useEffect(() => {
-	let isMounted = true;
+    const {getGameTypes} = useGameHook();
 
-	const load = async () => {
-	  const types = await getGameTypes();
-	  if (isMounted) {
-		setGameTypes(types || []);
-	  }
-	};
+//   State ----------------------
 
-	load();
+    const [gameTypes, setGameTypes] = useState([]);
 
-	return () => {
-	  isMounted = false;
-	};
-  }, [getGameTypes]);
+//   Handlers -------------------
 
-  return (
-	<Screen style={styles.container}>
-	  <Text style={styles.title}>Select Game Type</Text>
-	  <View style={styles.content}>
-		{gameTypes && gameTypes.map((type) => (
-		  <Pressable key={type} style={styles.button} onPress={() => navigation.navigate('GameLobbyScreen')}>
-			<Text style={styles.buttonText}>{type}</Text>
-		  </Pressable>
-		))}
-	  </View>
-	</Screen>
-  );
+    useEffect(() => {
+        let isMounted = true;
+        const load = async () => {
+            const types = await getGameTypes();
+            if (isMounted) setGameTypes(types || []);
+        };
+        load();
+        return () => { isMounted = false; };
+    }, []);
+
+//   View -----------------------
+
+    return (
+        <Screen style={styles.container}>
+            <Text style={styles.title}>Select Game Type</Text>
+            <View style={styles.content}>
+                {gameTypes && gameTypes.map((type) => (
+                    <Pressable
+                        key={type}
+                        style={styles.button}
+                        onPress={() => navigation.navigate('GameLobbyScreen')}
+                    >
+                        <Text style={styles.buttonText}>{type}</Text>
+                    </Pressable>
+                ))}
+            </View>
+        </Screen>
+    );
 };
 
 const styles = StyleSheet.create({
-  container: {
-	justifyContent: 'center',
-  },
-  content: {
-	gap: 12,
-	flex: 1,
-  },
-  title: {
-	fontSize: 24,
-	fontWeight: 'bold',
-	textAlign: 'center',
-	marginBottom: 20,
-  },
-  button: {
-	backgroundColor: '#2563eb',
-	borderRadius: 8,
-	paddingVertical: 12,
-	alignItems: 'center',
-  },
-  buttonText: {
-	color: '#ffffff',
-	fontWeight: '600',
-  },
+    container: {
+        justifyContent: 'center',
+    },
+    content: {
+        gap: 12,
+        flex: 1,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        textAlign: 'center',
+        marginBottom: 20,
+    },
+    button: {
+        backgroundColor: '#2563eb',
+        borderRadius: 8,
+        paddingVertical: 12,
+        alignItems: 'center',
+    },
+    buttonText: {
+        color: '#ffffff',
+        fontWeight: '600',
+    },
 });
 
 export default GameTypeScreen;
-

src/components/screens/JoinPrivateGameScreen.js

@@ -3,6 +3,11 @@ import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
 const JoinPrivateGameScreen = () => {
+  //   Initialisation -------------
+  //   State ----------------------
+  //   Handlers -------------------
+  //   View -----------------------
+
   return (
     <Screen style={styles.container}>
       <Text style={styles.title}>Join Private Game</Text>

src/components/screens/LeaderboardScreen.js

@@ -2,18 +2,24 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
-const LeaderboardScreen = () => (
-  <Screen style={styles.container}>
-    <Text style={styles.title}>Leaderboard</Text>
-    <Text style={styles.body}>Leaderboard view goes here.</Text>
-  </Screen>
-);
+const LeaderboardScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+    return (
+        <Screen style={styles.container}>
+            <Text style={styles.title}>Leaderboard</Text>
+            <Text style={styles.body}>Leaderboard view goes here.</Text>
+        </Screen>
+    );
+};
 
 const styles = StyleSheet.create({
-  container: { justifyContent: 'center', alignItems: 'center' },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  body: { color: '#4b5563', fontSize: 15, marginTop: 10 },
+    container: {justifyContent: 'center', alignItems: 'center'},
+    title: {fontSize: 24, fontWeight: 'bold'},
+    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
 });
 
 export default LeaderboardScreen;
-

src/components/screens/LoginScreen.js

@@ -5,9 +5,16 @@ import Screen from '../layout/Screen';
 import {Button, ButtonTray} from '../UI/Button';
 
 const LoginScreen = ({ navigation }) => {
+//   Initialisation ------------->
+
   const { email, password, error, isLoading, setEmail, setPassword, login } = useAuthHook();
+
+//   State ----------------------
+
   const [submitting, setSubmitting] = useState(false);
 
+//   Handlers -------------------
+
   const handleLogin = async () => {
     setSubmitting(true);
     const user = await login();
@@ -22,6 +29,8 @@ const LoginScreen = ({ navigation }) => {
     navigation.reset({ index: 0, routes: [{ name: 'Game' }] });
   };
 
+//   View -----------------------
+
   return (
     <Screen style={styles.container}>
       <View style={styles.content}>
@@ -107,4 +116,3 @@ const styles = StyleSheet.create({
 });
 
 export default LoginScreen;
-

src/components/screens/ManageGameScreen.js

@@ -7,163 +7,138 @@ import useGameHook from '../../hooks/useGameHook';
 import {getSession} from '../../hooks/SessionStore';
 
 const ManageGameScreen = () => {
-  const session = getSession();
-  const { getCaches, upsertCache } = useGameHook();
-  const [userLocation, setUserLocation] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-  const [cacheRecords, setCacheRecords] = useState([]);
+//   Initialisation ------------
 
-  const loadCaches = useCallback(async () => {
-    if (!session.currentGid) {
-      setCacheRecords([]);
-      return;
-    }
-    const rows = await getCaches(session.currentGid, null);
-    setCacheRecords(rows || []);
-  }, [getCaches, session.currentGid]);
+    const session = getSession();
+    const {getCaches, upsertCache} = useGameHook();
 
-  useEffect(() => {
-    loadCaches();
-  }, [loadCaches]);
+//   State ----------------------
 
-  useEffect(() => {
-    let locationSub;
+    const [userLocation, setUserLocation] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const [cacheRecords, setCacheRecords] = useState([]);
 
-    const start = async () => {
-      const { status } = await Location.requestForegroundPermissionsAsync();
-      if (status !== 'granted') {
-        setError('Location permission denied');
-        setLoading(false);
-        return;
-      }
+//   Handlers -------------------
 
-      const current = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Balanced });
-      setUserLocation({ latitude: current.coords.latitude, longitude: current.coords.longitude });
+    const loadCaches = useCallback(async () => {
+        if (!session.currentGid) {
+            setCacheRecords([]);
+            return;
+        }
+        const rows = await getCaches(session.currentGid, null);
+        setCacheRecords(rows || []);
+    }, [session.currentGid]);
 
-      locationSub = await Location.watchPositionAsync(
-        {
-          accuracy: Location.Accuracy.Balanced,
-          distanceInterval: 1,
-          timeInterval: 1000,
-        },
-        (next) => {
-          setUserLocation({ latitude: next.coords.latitude, longitude: next.coords.longitude });
-        },
-      );
+    useEffect(() => { loadCaches(); }, [loadCaches]);
 
-      setLoading(false);
+    useEffect(() => {
+        let locationSub;
+        const start = async () => {
+            const {status} = await Location.requestForegroundPermissionsAsync();
+            if (status !== 'granted') {
+                setError('Location permission denied');
+                setLoading(false);
+                return;
+            }
+            const current = await Location.getCurrentPositionAsync({accuracy: Location.Accuracy.Balanced});
+            setUserLocation({latitude: current.coords.latitude, longitude: current.coords.longitude});
+
+            locationSub = await Location.watchPositionAsync(
+                {accuracy: Location.Accuracy.Balanced, distanceInterval: 1, timeInterval: 1000},
+                (next) => {
+                    setUserLocation({latitude: next.coords.latitude, longitude: next.coords.longitude});
+                },
+            );
+            setLoading(false);
+        };
+        start();
+        return () => { if (locationSub) locationSub.remove(); };
+    }, []);
+
+    const handleAddCache = async (coordinate) => {
+        if (!session.currentGid) return;
+        await upsertCache({
+            gid: session.currentGid,
+            latitude: coordinate.latitude,
+            longitude: coordinate.longitude,
+            radius: 20,
+            clue: `Cache ${cacheRecords.length + 1}`,
+            subgroupId: 1,
+        });
+        await loadCaches();
     };
 
-    start();
-
-    return () => {
-      if (locationSub) {
-        locationSub.remove();
-      }
+    const handleMoveCache = async (cacheId, coordinate) => {
+        if (!session.currentGid) return;
+        const current = cacheRecords.find((cache) => cache.id === cacheId);
+        if (!current) return;
+        await upsertCache({
+            gid: session.currentGid,
+            cacheId,
+            latitude: coordinate.latitude,
+            longitude: coordinate.longitude,
+            radius: current.radius,
+            clue: current.clue,
+            subgroupId: current.subgroupId,
+        });
+        await loadCaches();
     };
-  }, []);
 
-  const handleAddCache = async (coordinate) => {
+//   View -----------------------
+
     if (!session.currentGid) {
-      return;
+        return (
+            <Screen style={styles.center}>
+                <Text style={styles.body}>Create or join a game first.</Text>
+            </Screen>
+        );
     }
-    await upsertCache({
-      gid: session.currentGid,
-      latitude: coordinate.latitude,
-      longitude: coordinate.longitude,
-      radius: 20,
-      clue: `Cache ${cacheRecords.length + 1}`,
-      subgroupId: 1,
-    });
-    await loadCaches();
-  };
 
-  const handleMoveCache = async (cacheId, coordinate) => {
-    if (!session.currentGid) {
-      return;
+    if (!session.isAcceptedAdmin) {
+        return (
+            <Screen style={styles.center}>
+                <Text style={styles.body}>Only admins can edit cache locations.</Text>
+            </Screen>
+        );
     }
-    const current = cacheRecords.find((cache) => cache.id === cacheId);
-    if (!current) {
-      return;
+
+    if (loading) {
+        return (
+            <Screen style={styles.center}>
+                <ActivityIndicator size="large"/>
+            </Screen>
+        );
+    }
+
+    if (error) {
+        return (
+            <Screen style={styles.center}>
+                <Text style={styles.error}>{error}</Text>
+            </Screen>
+        );
     }
-    await upsertCache({
-      gid: session.currentGid,
-      cacheId,
-      latitude: coordinate.latitude,
-      longitude: coordinate.longitude,
-      radius: current.radius,
-      clue: current.clue,
-      subgroupId: current.subgroupId,
-    });
-    await loadCaches();
-  };
 
-  if (!session.currentGid) {
     return (
-      <Screen style={styles.center}>
-        <Text style={styles.body}>Create or join a game first.</Text>
-      </Screen>
+        <Screen style={styles.container}>
+            <View style={styles.mapWrap}>
+                <AdminCacheEditorView
+                    userLocation={userLocation}
+                    caches={cacheRecords}
+                    onAddCache={handleAddCache}
+                    onMoveCache={handleMoveCache}
+                />
+            </View>
+        </Screen>
     );
-  }
-
-  if (!session.isAcceptedAdmin) {
-    return (
-      <Screen style={styles.center}>
-        <Text style={styles.body}>Only admins can edit cache locations.</Text>
-      </Screen>
-    );
-  }
-
-  if (loading) {
-    return (
-      <Screen style={styles.center}>
-        <ActivityIndicator size="large" />
-      </Screen>
-    );
-  }
-
-  if (error) {
-    return (
-      <Screen style={styles.center}>
-        <Text style={styles.error}>{error}</Text>
-      </Screen>
-    );
-  }
-
-  return (
-    <Screen style={styles.container}>
-      <View style={styles.mapWrap}>
-        <AdminCacheEditorView
-          userLocation={userLocation}
-          caches={cacheRecords}
-          onAddCache={handleAddCache}
-          onMoveCache={handleMoveCache}
-        />
-      </View>
-    </Screen>
-  );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    padding: 0,
-  },
-  mapWrap: {
-    flex: 1,
-  },
-  center: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  body: {
-    color: '#4b5563',
-    fontSize: 15,
-  },
-  error: {
-    color: '#dc2626',
-    fontSize: 15,
-  },
+    container: {padding: 0},
+    mapWrap: {flex: 1},
+    center: {justifyContent: 'center', alignItems: 'center'},
+    body: {color: '#4b5563', fontSize: 15},
+    error: {color: '#dc2626', fontSize: 15},
 });
 
 export default ManageGameScreen;

src/components/screens/ManagePrivateGameScreen.js

@@ -3,18 +3,23 @@ import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
 const ManagePrivateGameScreen = () => {
-  return (
-    <Screen style={styles.container}>
-      <Text style={styles.title}>Manage Private Game</Text>
-      <Text style={styles.body}>Manage private game setup goes here.</Text>
-    </Screen>
-  );
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+    return (
+        <Screen style={styles.container}>
+            <Text style={styles.title}>Manage Private Game</Text>
+            <Text style={styles.body}>Manage private game setup goes here.</Text>
+        </Screen>
+    );
 };
 
 const styles = StyleSheet.create({
-  container: { justifyContent: 'center', alignItems: 'center' },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  body: { color: '#4b5563', fontSize: 15, marginTop: 10 },
+    container: {justifyContent: 'center', alignItems: 'center'},
+    title: {fontSize: 24, fontWeight: 'bold'},
+    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
 });
 
 export default ManagePrivateGameScreen;

src/components/screens/ManageSubgroupsScreen.js

@@ -2,17 +2,24 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
-const ManageSubgroupsScreen = () => (
-  <Screen style={styles.container}>
-    <Text style={styles.title}>Manage Subgroups</Text>
-    <Text style={styles.body}>Manage subgroups setup goes here.</Text>
-  </Screen>
-);
+const ManageSubgroupsScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+    return (
+        <Screen style={styles.container}>
+            <Text style={styles.title}>Manage Subgroups</Text>
+            <Text style={styles.body}>Manage subgroups setup goes here.</Text>
+        </Screen>
+    );
+};
 
 const styles = StyleSheet.create({
-  container: { justifyContent: 'center', alignItems: 'center' },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  body: { color: '#4b5563', fontSize: 15, marginTop: 10 },
+    container: {justifyContent: 'center', alignItems: 'center'},
+    title: {fontSize: 24, fontWeight: 'bold'},
+    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
 });
 
 export default ManageSubgroupsScreen;

src/components/screens/MapScreen.js

@@ -9,175 +9,153 @@ import usePlayerGame from '../../hooks/usePlayerGame';
 import {getSession} from '../../hooks/SessionStore';
 import Cache from '../../models/Cache';
 
-const toHeading = ({ x, y }) => {
-  const angle = Math.atan2(y, x) * (180 / Math.PI);
-  return angle < 0 ? angle + 360 : angle;
+const toHeading = ({x, y}) => {
+    const angle = Math.atan2(y, x) * (180 / Math.PI);
+    return angle < 0 ? angle + 360 : angle;
 };
 
 const MapScreen = () => {
-  const session = getSession();
-  const { getCaches, claimCache } = useGameHook();
-  const [userLocation, setUserLocation] = useState(null);
-  const [heading, setHeading] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [cacheRecords, setCacheRecords] = useState([]);
-  const [error, setError] = useState('');
+//   Initialisation ------------
 
-  const activeCaches = useMemo(() => (
-    cacheRecords.map(
-      (cache) => new Cache(
-        cache.id,
-        cache.coordinates.latitude,
-        cache.coordinates.longitude,
-        cache.radius,
-        cache.clue,
-        cache.groupId,
-        cache.subgroupId,
-      ),
-    )
-  ), [cacheRecords]);
+    const session = getSession();
+    const {getCaches, claimCache} = useGameHook();
 
-  const subgroupFilter = session.currentSGid;
-  const { visibleCache, isClaiming, setIsClaiming } = usePlayerGame(userLocation, heading, activeCaches);
+//   State ----------------------
 
-  const loadCaches = useCallback(async () => {
-    if (!session.currentGid) {
-      setCacheRecords([]);
-      return;
-    }
-    const rows = await getCaches(session.currentGid, subgroupFilter);
-    setCacheRecords(rows || []);
-  }, [getCaches, session.currentGid, subgroupFilter]);
+    const [userLocation, setUserLocation] = useState(null);
+    const [heading, setHeading] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [cacheRecords, setCacheRecords] = useState([]);
+    const [error, setError] = useState('');
 
-  useEffect(() => {
-    loadCaches();
-  }, [loadCaches]);
+    const activeCaches = useMemo(() => (
+        cacheRecords.map((cache) => new Cache(
+            cache.id,
+            cache.coordinates.latitude,
+            cache.coordinates.longitude,
+            cache.radius,
+            cache.clue,
+            cache.groupId,
+            cache.subgroupId,
+        ))
+    ), [cacheRecords]);
 
-  useEffect(() => {
-    let locationSub;
-    let headingSub;
+    const subgroupFilter = session.currentSGid;
+    const {visibleCache, isClaiming, setIsClaiming} = usePlayerGame(userLocation, heading, activeCaches);
 
-    const start = async () => {
-      const { status } = await Location.requestForegroundPermissionsAsync();
-      if (status !== 'granted') {
-        setError('Location permission denied');
-        setLoading(false);
-        return;
-      }
+//   Handlers -------------------
 
-      const current = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Balanced });
-      setUserLocation({ latitude: current.coords.latitude, longitude: current.coords.longitude });
+    const loadCaches = useCallback(async () => {
+        if (!session.currentGid) {
+            setCacheRecords([]);
+            return;
+        }
+        const rows = await getCaches(session.currentGid, subgroupFilter);
+        setCacheRecords(rows || []);
+    }, [session.currentGid, subgroupFilter]);
 
-      locationSub = await Location.watchPositionAsync(
-        {
-          accuracy: Location.Accuracy.Balanced,
-          distanceInterval: 1,
-          timeInterval: 1000,
-        },
-        (next) => {
-          setUserLocation({ latitude: next.coords.latitude, longitude: next.coords.longitude });
-        },
-      );
+    useEffect(() => { loadCaches(); }, [loadCaches]);
 
-      Magnetometer.setUpdateInterval(500);
-      headingSub = Magnetometer.addListener((data) => {
-        setHeading(toHeading(data));
-      });
+    useEffect(() => {
+        let locationSub;
+        let headingSub;
 
-      setLoading(false);
+        const start = async () => {
+            const {status} = await Location.requestForegroundPermissionsAsync();
+            if (status !== 'granted') {
+                setError('Location permission denied');
+                setLoading(false);
+                return;
+            }
+            const current = await Location.getCurrentPositionAsync({accuracy: Location.Accuracy.Balanced});
+            setUserLocation({latitude: current.coords.latitude, longitude: current.coords.longitude});
+
+            locationSub = await Location.watchPositionAsync(
+                {accuracy: Location.Accuracy.Balanced, distanceInterval: 1, timeInterval: 1000},
+                (next) => {
+                    setUserLocation({latitude: next.coords.latitude, longitude: next.coords.longitude});
+                },
+            );
+
+            Magnetometer.setUpdateInterval(500);
+            headingSub = Magnetometer.addListener((data) => { setHeading(toHeading(data)); });
+            setLoading(false);
+        };
+
+        start();
+
+        return () => {
+            if (locationSub) locationSub.remove();
+            if (headingSub) headingSub.remove();
+        };
+    }, []);
+
+    const handleClaim = async (cacheId) => {
+        if (!session.currentGid) return;
+        await claimCache({
+            gid: session.currentGid,
+            cacheId,
+            uid: session.currentUid,
+            tid: session.currentTid,
+        });
+        setIsClaiming(false);
+        await loadCaches();
     };
 
-    start();
+//   View -----------------------
 
-    return () => {
-      if (locationSub) {
-        locationSub.remove();
-      }
-      if (headingSub) {
-        headingSub.remove();
-      }
-    };
-  }, []);
-
-  const handleClaim = async (cacheId) => {
     if (!session.currentGid) {
-      return;
+        return (
+            <Screen style={styles.center}>
+                <Text style={styles.body}>Join or create a game to use map features.</Text>
+            </Screen>
+        );
+    }
+
+    if (session.isAcceptedAdmin) {
+        return (
+            <Screen style={styles.center}>
+                <Text style={styles.body}>Admins manage caches from Manage Game.</Text>
+            </Screen>
+        );
+    }
+
+    if (loading) {
+        return (
+            <Screen style={styles.center}>
+                <ActivityIndicator size="large"/>
+            </Screen>
+        );
+    }
+
+    if (error) {
+        return (
+            <Screen style={styles.center}>
+                <Text style={styles.error}>{error}</Text>
+            </Screen>
+        );
     }
-    await claimCache({
-      gid: session.currentGid,
-      cacheId,
-      uid: session.currentUid,
-      tid: session.currentTid,
-    });
-    setIsClaiming(false);
-    await loadCaches();
-  };
 
-  if (!session.currentGid) {
     return (
-      <Screen style={styles.center}>
-        <Text style={styles.body}>Join or create a game to use map features.</Text>
-      </Screen>
+        <Screen style={styles.container}>
+            <View style={styles.mapWrap}>
+                <PlayerMapView
+                    userLocation={userLocation}
+                    visibleCache={visibleCache}
+                    isClaiming={isClaiming}
+                    onClaimSuccess={handleClaim}
+                />
+            </View>
+        </Screen>
     );
-  }
-
-  if (session.isAcceptedAdmin) {
-    return (
-      <Screen style={styles.center}>
-        <Text style={styles.body}>Admins manage caches from Manage Game.</Text>
-      </Screen>
-    );
-  }
-
-  if (loading) {
-    return (
-      <Screen style={styles.center}>
-        <ActivityIndicator size="large" />
-      </Screen>
-    );
-  }
-
-  if (error) {
-    return (
-      <Screen style={styles.center}>
-        <Text style={styles.error}>{error}</Text>
-      </Screen>
-    );
-  }
-
-  return (
-    <Screen style={styles.container}>
-      <View style={styles.mapWrap}>
-        <PlayerMapView
-          userLocation={userLocation}
-          visibleCache={visibleCache}
-          isClaiming={isClaiming}
-          onClaimSuccess={handleClaim}
-        />
-      </View>
-    </Screen>
-  );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    padding: 0,
-  },
-  mapWrap: {
-    flex: 1,
-  },
-  center: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  body: {
-    color: '#4b5563',
-    fontSize: 15,
-  },
-  error: {
-    color: '#dc2626',
-    fontSize: 15,
-  },
+    container: {padding: 0},
+    mapWrap: {flex: 1},
+    center: {justifyContent: 'center', alignItems: 'center'},
+    body: {color: '#4b5563', fontSize: 15},
+    error: {color: '#dc2626', fontSize: 15},
 });
 
 export default MapScreen;

src/components/screens/RegisterScreen.js

@@ -4,175 +4,177 @@ import useAuthHook from '../../hooks/useAuthHook';
 import Screen from '../layout/Screen';
 import {Button, ButtonTray} from '../UI/Button';
 
-const RegisterScreen = ({ navigation }) => {
-  const {
-    username,
-    email,
-    password,
-    confirmPassword,
-    accountType,
-    error,
-    isLoading,
-    setUsername,
-    setEmail,
-    setPassword,
-    setConfirmPassword,
-    setAccountType,
-    register,
-  } = useAuthHook();
-  const [submitting, setSubmitting] = useState(false);
+const RegisterScreen = ({navigation}) => {
+//   Initialisation ------------
 
-  const handleRegister = async () => {
-    setSubmitting(true);
-    const user = await register();
-    setSubmitting(false);
-    if (!user) {
-      return;
-    }
-    if (user.IsAcceptedAdmin) {
-      navigation.reset({ index: 0, routes: [{ name: 'Admin' }] });
-      return;
-    }
-    navigation.reset({ index: 0, routes: [{ name: 'Game' }] });
-  };
+    const {
+        username, email, password, confirmPassword, accountType,
+        error, isLoading,
+        setUsername, setEmail, setPassword, setConfirmPassword, setAccountType,
+        register,
+    } = useAuthHook();
 
-  return (
-    <Screen style={styles.container}>
-      <View style={styles.content}>
-        <Text style={styles.title}>Create Account</Text>
+//   State ----------------------
 
-        <TextInput
-          style={styles.input}
-          placeholder="Username"
-          value={username}
-          onChangeText={setUsername}
-          editable={!isLoading}
-        />
-        <TextInput
-          style={styles.input}
-          placeholder="Email"
-          autoCapitalize="none"
-          keyboardType="email-address"
-          value={email}
-          onChangeText={setEmail}
-          editable={!isLoading}
-        />
-        <TextInput
-          style={styles.input}
-          placeholder="Password"
-          secureTextEntry
-          value={password}
-          onChangeText={setPassword}
-          editable={!isLoading}
-        />
-        <TextInput
-          style={styles.input}
-          placeholder="Confirm Password"
-          secureTextEntry
-          value={confirmPassword}
-          onChangeText={setConfirmPassword}
-          editable={!isLoading}
-        />
+    const [submitting, setSubmitting] = useState(false);
 
-        <View style={styles.typeRow}>
-          <Pressable
-            style={[styles.typeButton, accountType === 'Individual' && styles.typeButtonActive]}
-            onPress={() => setAccountType('Individual')}
-            disabled={isLoading}
-          >
-            <Text style={[styles.typeText, accountType === 'Individual' && styles.typeTextActive]}>Individual</Text>
-          </Pressable>
-          <Pressable
-            style={[styles.typeButton, accountType === 'Business/School' && styles.typeButtonActive]}
-            onPress={() => setAccountType('Business/School')}
-            disabled={isLoading}
-          >
-            <Text style={[styles.typeText, accountType === 'Business/School' && styles.typeTextActive]}>Business</Text>
-          </Pressable>
-        </View>
+//   Handlers -------------------
 
-        {error ? <Text style={styles.errorText}>{error}</Text> : null}
+    const handleRegister = async () => {
+        setSubmitting(true);
+        const user = await register();
+        setSubmitting(false);
+        if (!user) return;
+        if (user.IsAcceptedAdmin) {
+            navigation.reset({index: 0, routes: [{name: 'Admin'}]});
+            return;
+        }
+        navigation.reset({index: 0, routes: [{name: 'Game'}]});
+    };
 
-        <ButtonTray>
-          <Button
-            label={submitting ? 'Creating...' : 'Create Account'}
-            onClick={handleRegister}
-            styleButton={styles.submitButton}
-            styleLabel={styles.submitText}
-          />
-        </ButtonTray>
+//   View -----------------------
 
-        <Pressable onPress={() => navigation.navigate('Auth', { screen: 'LoginScreen' })}>
-          <Text style={styles.linkText}>Back to Login</Text>
-        </Pressable>
-      </View>
-    </Screen>
-  );
+    return (
+        <Screen style={styles.container}>
+            <View style={styles.content}>
+                <Text style={styles.title}>Create Account</Text>
+
+                <TextInput
+                    style={styles.input}
+                    placeholder="Username"
+                    value={username}
+                    onChangeText={setUsername}
+                    editable={!isLoading}
+                />
+                <TextInput
+                    style={styles.input}
+                    placeholder="Email"
+                    autoCapitalize="none"
+                    keyboardType="email-address"
+                    value={email}
+                    onChangeText={setEmail}
+                    editable={!isLoading}
+                />
+                <TextInput
+                    style={styles.input}
+                    placeholder="Password"
+                    secureTextEntry
+                    value={password}
+                    onChangeText={setPassword}
+                    editable={!isLoading}
+                />
+                <TextInput
+                    style={styles.input}
+                    placeholder="Confirm Password"
+                    secureTextEntry
+                    value={confirmPassword}
+                    onChangeText={setConfirmPassword}
+                    editable={!isLoading}
+                />
+
+                <View style={styles.typeRow}>
+                    <Pressable
+                        style={[styles.typeButton, accountType === 'Individual' && styles.typeButtonActive]}
+                        onPress={() => setAccountType('Individual')}
+                        disabled={isLoading}
+                    >
+                        <Text style={[styles.typeText, accountType === 'Individual' && styles.typeTextActive]}>
+                            Individual
+                        </Text>
+                    </Pressable>
+                    <Pressable
+                        style={[styles.typeButton, accountType === 'Business/School' && styles.typeButtonActive]}
+                        onPress={() => setAccountType('Business/School')}
+                        disabled={isLoading}
+                    >
+                        <Text style={[styles.typeText, accountType === 'Business/School' && styles.typeTextActive]}>
+                            Business
+                        </Text>
+                    </Pressable>
+                </View>
+
+                {error ? <Text style={styles.errorText}>{error}</Text> : null}
+
+                <ButtonTray>
+                    <Button
+                        label={submitting ? 'Creating...' : 'Create Account'}
+                        onClick={handleRegister}
+                        styleButton={styles.submitButton}
+                        styleLabel={styles.submitText}
+                    />
+                </ButtonTray>
+
+                <Pressable onPress={() => navigation.navigate('Auth', {screen: 'LoginScreen'})}>
+                    <Text style={styles.linkText}>Back to Login</Text>
+                </Pressable>
+            </View>
+        </Screen>
+    );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-  },
-  content: {
-    gap: 12,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    textAlign: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: '#d1d5db',
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    fontSize: 16,
-  },
-  typeRow: {
-    flexDirection: 'row',
-    gap: 10,
-  },
-  typeButton: {
-    flex: 1,
-    borderWidth: 1,
-    borderColor: '#cbd5e1',
-    borderRadius: 8,
-    alignItems: 'center',
-    paddingVertical: 10,
-  },
-  typeButtonActive: {
-    backgroundColor: '#2563eb',
-    borderColor: '#2563eb',
-  },
-  typeText: {
-    color: '#1f2937',
-    fontWeight: '600',
-  },
-  typeTextActive: {
-    color: '#ffffff',
-  },
-  errorText: {
-    color: '#dc2626',
-    textAlign: 'center',
-    marginTop: 5,
-  },
-  submitButton: {
-    backgroundColor: '#2563eb',
-    borderColor: '#2563eb',
-  },
-  submitText: {
-    color: '#ffffff',
-    fontWeight: '600',
-  },
-  linkText: {
-    textAlign: 'center',
-    color: '#2563eb',
-    fontWeight: '600',
-    paddingVertical: 10,
-  },
+    container: {
+        justifyContent: 'center',
+    },
+    content: {
+        gap: 12,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        textAlign: 'center',
+        marginBottom: 10,
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#d1d5db',
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        fontSize: 16,
+    },
+    typeRow: {
+        flexDirection: 'row',
+        gap: 10,
+    },
+    typeButton: {
+        flex: 1,
+        borderWidth: 1,
+        borderColor: '#cbd5e1',
+        borderRadius: 8,
+        alignItems: 'center',
+        paddingVertical: 10,
+    },
+    typeButtonActive: {
+        backgroundColor: '#2563eb',
+        borderColor: '#2563eb',
+    },
+    typeText: {
+        color: '#1f2937',
+        fontWeight: '600',
+    },
+    typeTextActive: {
+        color: '#ffffff',
+    },
+    errorText: {
+        color: '#dc2626',
+        textAlign: 'center',
+        marginTop: 5,
+    },
+    submitButton: {
+        backgroundColor: '#2563eb',
+        borderColor: '#2563eb',
+    },
+    submitText: {
+        color: '#ffffff',
+        fontWeight: '600',
+    },
+    linkText: {
+        textAlign: 'center',
+        color: '#2563eb',
+        fontWeight: '600',
+        paddingVertical: 10,
+    },
 });
 
 export default RegisterScreen;

src/components/screens/TeamScreen.js

@@ -2,17 +2,24 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
-const TeamScreen = () => (
-  <Screen style={styles.container}>
-    <Text style={styles.title}>Team Management</Text>
-    <Text style={styles.body}>Team management setup goes here.</Text>
-  </Screen>
-);
+const TeamScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+    return (
+        <Screen style={styles.container}>
+            <Text style={styles.title}>Team Management</Text>
+            <Text style={styles.body}>Team management setup goes here.</Text>
+        </Screen>
+    );
+};
 
 const styles = StyleSheet.create({
-  container: { justifyContent: 'center', alignItems: 'center' },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  body: { color: '#4b5563', fontSize: 15, marginTop: 10 },
+    container: {justifyContent: 'center', alignItems: 'center'},
+    title: {fontSize: 24, fontWeight: 'bold'},
+    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
 });
 
 export default TeamScreen;