Merge pull request #2

origin/ModuleListSetup

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

App.js

@@ -1,20 +1,54 @@
-import { StatusBar } from "expo-status-bar";
-import { StyleSheet, Text, View } from "react-native";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import ModuleListScreen from "./src/components/screens/ModuleListScreen";
+import ModuleModifyScreen from "./src/components/screens/ModuleModifyScreen";
+import ModuleViewScreen from "./src/components/screens/ModuleViewScreen";
+import ModuleAddScreen from "./src/components/screens/ModuleAddScreen";
 
-export default function App() {
+const Stack = createNativeStackNavigator();
+
+export const App = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
     return (
-    <View style={styles.container}>
-      <Text>Hello this is the app.js page</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
+        <NavigationContainer>
+         <Stack.Navigator
+             initialRouteName='ModuleAddScreen'
+             screenOptions= {{
+                headerStyle: { backgroundColor: "black" },
+                headerTintColor: "white"
+         }}
+         >
+             <Stack.Screen
+                 name="ModuleListScreen"
+                 component={ModuleListScreen}
+                 options={{  title: 'List Modules' }}
+             />
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
+             <Stack.Screen
+                 name="ModuleAddScreen"
+                 component={ModuleAddScreen}
+                 options={{  title: 'Add Modules' }}
+             />
+
+             <Stack.Screen
+                 name="ModuleViewScreen"
+                 component={ModuleViewScreen}
+                 options={{  title: 'View Modules' }}
+             />
+
+             <Stack.Screen
+              name="ModuleModifyScreen"
+              component={ModuleModifyScreen}
+              options={{  title: 'Modify Modules' }}
+             />
+
+         </Stack.Navigator>
+
+        </NavigationContainer>
+    );
+};
+
+export default App;

package.json

@@ -9,11 +9,12 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@react-navigation/native-stack": "^7.3.26",
-    "expo": "~54.0.12",
+    "@react-navigation/native": "^7.1.18",
+    "@react-navigation/native-stack": "^7.5.1",
+    "expo": "^54.0.20",
     "expo-status-bar": "~3.0.8",
     "react": "19.1.0",
-    "react-native": "0.81.4"
+    "react-native": "^0.81.5"
   },
   "private": true
 }

src/components/layout/Screen.js

@@ -0,0 +1,26 @@
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, View } from "react-native";
+
+const Screen = ({children}) => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+    return (
+        <View style={styles.screen}>
+            {children}
+            <StatusBar style="light" />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        backgroundColor: "#fff",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
+
+export default Screen;

src/components/screens/Add/add.js

@@ -1,22 +0,0 @@
-export default function add() {
-  // Initialisation ...............
-  // State ........................
-  // Handlers .....................
-  // View .........................
-
-  return (
-    <View style={styles.container}>
-      <Text>activity 1 complete on week 1 yay!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

src/components/screens/List/list.js

@@ -1,17 +0,0 @@
-export default function list() {
-  return (
-    <View style={styles.container}>
-      <Text>activity 1 complete on week 1 yay!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

src/components/screens/Modify/modify.js

@@ -1,17 +0,0 @@
-export default function modify() {
-  return (
-    <View style={styles.container}>
-      <Text>activity 1 complete on week 1 yay!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

src/components/screens/ModuleAddScreen.js

@@ -0,0 +1,19 @@
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, Text, View } from "react-native";
+
+export const ModuleAddScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+  return (
+    <Screen style={styles.container}>
+      <Text>Add</Text>
+      <StatusBar style="auto" />
+    </Screen>
+  );
+};
+
+const styles = StyleSheet.create({});
+
+export default ModuleAddScreen;

src/components/screens/ModuleListScreen.js

@@ -1,31 +1,19 @@
 import { StatusBar } from "expo-status-bar";
 import { StyleSheet, Text, View } from "react-native";
-import { NavigationContainer } from "@react-navigation/native";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-
-const Stack = createNativeStackNavigator();
 
 export const ModuleListScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
   return (
-    <NavigationContainer>
-      <Stack.Navigator initialRouteName="ModuleListScreen">
-        <Stack.Screen
-          name="ModuleListScreen"
-          component={ModuleListScreen}
-          options={{ title: "List Modules" }}
-        />
-      </Stack.Navigator>
-    </NavigationContainer>
+    <Screen style={styles.container}>
+      <Text>List</Text>
+      <StatusBar style="auto" />
+    </Screen>
   );
-}
+};
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
+const styles = StyleSheet.create({});
 
 export default ModuleListScreen;

src/components/screens/ModuleModifyScreen.js

@@ -0,0 +1,19 @@
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, Text, View } from "react-native";
+
+export const ModuleModifyScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+  return (
+    <Screen style={styles.container}>
+      <Text>Modify</Text>
+      <StatusBar style="auto" />
+    </Screen>
+  );
+};
+
+const styles = StyleSheet.create({});
+
+export default ModuleModifyScreen;

src/components/screens/ModuleViewScreen.js

@@ -0,0 +1,19 @@
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, Text, View } from "react-native";
+
+export const ModuleViewScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+  return (
+    <Screen style={styles.container}>
+      <Text>View</Text>
+      <StatusBar style="auto" />
+    </Screen>
+  );
+};
+
+const styles = StyleSheet.create({});
+
+export default ModuleViewScreen;

src/components/screens/View/view.js

@@ -1,17 +0,0 @@
-export default function view() {
-  return (
-    <View style={styles.container}>
-      <Text>activity 1 complete on week 1 yay!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});