Dev

MOBILE/frontend/navigation/AppNavigator.js

@@ -46,11 +46,6 @@ const AppNavigator = () => {
             <Stack.Screen name="MainApp" component={BottomTabNavigator} />
             <Stack.Screen name="QuestionDetail" component={QuestionDetailScreen} />
             <Stack.Screen name="PostQuestion" component={PostQuestionScreen} />
-            <Stack.Screen name="DailyChallenge" component={DailyChallengeScreen} />
-            <Stack.Screen name="Learn" component={LearnScreen} />
-            <Stack.Screen name="Lessons" component={Lessons} />
-
-
           </>
         )}
       </Stack.Navigator>

MOBILE/frontend/navigation/BottomTabNavigator.js

@@ -1,14 +1,13 @@
 // BottomTabNavigator.js
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import Forum from '../screens/main/Forum';
-import LearnScreen from '../screens/main/LearnScreen';
-import ProfileStack from '../navigation/profileNav'; 
-import UnitStack from '../navigation/unitsNav'; 
-import HomeScreen from '../components/HomeScreen';
-import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import ProfileStack from "../navigation/profileNav";
+import UnitStack from "../navigation/unitsNav";
+import HomeScreen from "../components/HomeScreen";
+import LearnStack from "./learnNav";
+import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
 
 const Tab = createBottomTabNavigator();
 
@@ -33,24 +32,24 @@ const BottomTabNavigator = () => {
         tabBarIcon: ({ focused }) => {
           let iconName;
           switch (route.name) {
-            case 'Learn':
-              iconName = 'home-outline';
+            case "Learn":
+              iconName = "home-outline";
               break;
-            case 'Forum':
-              iconName = 'chatbubble-ellipses-outline';
+            case "Forum":
+              iconName = "chatbubble-ellipses-outline";
               break;
-            case 'Profile':
-              iconName = 'person-outline';
+            case "Profile":
+              iconName = "person-outline";
               break;
             default:
-              iconName = 'help-outline';
+              iconName = "help-outline";
           }
           return (
             <View style={[styles.iconContainer, focused && styles.activeIcon]}>
               <Ionicons
                 name={iconName}
                 size={28}
-                color={focused ? '#fff' : '#bbb'}
+                color={focused ? "#fff" : "#bbb"}
               />
             </View>
           );
@@ -59,33 +58,39 @@ const BottomTabNavigator = () => {
       })}
     >
       <Tab.Screen
-  name="Learn"
-  component={UnitStack}
-  options={({ route }) => {
-    const routeName = getFocusedRouteNameFromRoute(route) ?? 'LearnScreen';
-    const hideTabBarScreens = ['Lessons', 'LessonDetail', 'quizScreen', 'quizResults'];
-
-    if (hideTabBarScreens.includes(routeName)) {
-      return {
-        tabBarStyle: { display: 'none' },
-      };
-    }
-    return {};
-  }}
+        name="Learn"
+        component={LearnStack}
+        options={({ route }) => {
+          const routeName =
+            getFocusedRouteNameFromRoute(route) ?? "LearnScreen";
+          const hideTabBarScreens = [
+            "Lessons",
+            "LessonDetail",
+            "QuizScreen",
+            "DailyChallenge",
+            "QuizResults",
+          ];
 
+          if (hideTabBarScreens.includes(routeName)) {
+            return {
+              tabBarStyle: { display: "none" },
+            };
+          }
+          return {};
+        }}
       />
-      <Tab.Screen 
-        name="Forum" 
+      <Tab.Screen
+        name="Forum"
         component={HomeScreen}
         options={{
-          tabBarLabel: 'Forum',
+          tabBarLabel: "Forum",
         }}
       />
-      <Tab.Screen 
-        name="Profile" 
+      <Tab.Screen
+        name="Profile"
         component={ProfileStack}
         options={{
-          tabBarLabel: 'Profile',
+          tabBarLabel: "Profile",
         }}
       />
     </Tab.Navigator>
@@ -97,43 +102,43 @@ export default BottomTabNavigator;
 const styles = StyleSheet.create({
   screen: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "white",
   },
   tabBar: {
-    backgroundColor: 'white',
+    backgroundColor: "white",
     borderTopWidth: 0,
     elevation: 10, // Shadow for Android
-    shadowColor: '#000', // Shadow for iOS
+    shadowColor: "#000", // Shadow for iOS
     shadowOffset: { width: 0, height: -2 }, // Shadow for iOS
     shadowOpacity: 0.1, // Shadow for iOS
     shadowRadius: 10, // Shadow for iOS
     height: 70, // Height of the tab bar
-    position: 'absolute', // Ensure it sticks to the bottom
+    position: "absolute", // Ensure it sticks to the bottom
     bottom: 0, // Stick to the bottom
     left: 0, // Stretch across the screen
     right: 0, // Stretch across the screen
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
     paddingHorizontal: 20,
     paddingBottom: 15,
   },
   iconContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     width: 50,
     height: 50,
   },
   activeIcon: {
-    backgroundColor: '#3B82F6', // Blue color for active icon
+    backgroundColor: "#3B82F6", // Blue color for active icon
     borderRadius: 25,
     padding: 10,
-    shadowColor: '#3B82F6',
+    shadowColor: "#3B82F6",
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.3,
     shadowRadius: 5,
     elevation: 5,
   },
-});
+});

MOBILE/frontend/navigation/learnNav.js

@@ -0,0 +1,62 @@
+import React, { useEffect } from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+import { BackHandler } from "react-native";
+
+// Learning Flow Screens
+import LearnScreen from "../screens/main/LearnScreen";
+import DailyChallengeScreen from "../screens/quiz/DailyChallengeScreen";
+import Lessons from "../screens/main/Lessons";
+import LessonDetail from "../screens/main/LessonDetail";
+import quizScreen from "../screens/quiz/quizScreen";
+import quizResults from "../screens/quiz/quizResults";
+
+const Stack = createStackNavigator();
+
+const LearnStack = ({ navigation }) => {
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      "hardwareBackPress",
+      () => {
+        const routeName = navigation.getCurrentRoute()?.name;
+        if (["DailyChallenge", "QuizScreen"].includes(routeName)) {
+          return true;
+        }
+        return false;
+      }
+    );
+
+    return () => backHandler.remove();
+  }, [navigation]);
+
+  return (
+    <Stack.Navigator
+      screenOptions={({ route }) => ({
+        headerShown: false,
+        gestureEnabled: !["DailyChallenge", "QuizScreen"].includes(route.name),
+      })}
+    >
+      <Stack.Screen name="LearnScreen" component={LearnScreen} />
+      <Stack.Screen name="DailyChallenge" component={DailyChallengeScreen} />
+      <Stack.Screen
+        name="Lessons"
+        component={Lessons}
+        options={({ route }) => ({
+          headerShown: true,
+          title: route.params?.unitTitle || "Lessons",
+        })}
+      />
+      <Stack.Screen name="LessonDetail" component={LessonDetail} />
+      <Stack.Screen name="QuizScreen" component={quizScreen} />
+      <Stack.Screen
+      name="QuizResults" 
+      component={quizResults} 
+      options={{
+        gestureEnabled: false, // Disable swipe back globally
+        headerLeft: () => null // Hide back button if needed
+      }}
+      />
+    </Stack.Navigator>
+  );
+};
+
+export default LearnStack;

MOBILE/frontend/navigation/unitsNav.js

@@ -17,7 +17,7 @@ const UnitStack = () => {
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-       
+
       }}
     >
       <Stack.Screen