feat(#19): integrate Mapbox for real-time location tracking in Map sc…

…reen

- Refactoring to use expo router
- added no found route with links to map and signup

apps/driver-app/app/+not-found.tsx

@@ -0,0 +1,34 @@
+import { Link, Stack } from "expo-router";
+import { StyleSheet, Text, View } from "react-native";
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: "Oops!" }} />
+      <View style={styles.container}>
+        <Text>This screen doesn't exist.</Text>
+        <Link href="/map" style={styles.link}>
+          <Text>Go to Map!</Text>
+        </Link>
+
+        <Link href="/signup" style={styles.link}>
+          <Text>Go to SignUp!</Text>
+        </Link>
+      </View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    backgroundColor: "white",
+  },
+  link: {
+    marginTop: 15,
+    paddingVertical: 15,
+  },
+});

apps/driver-app/app/_layout.tsx

@@ -1,31 +1,37 @@
-import React from "react";
-
-import useBackgroundLocation from "@/hooks/use-background-location";
-import MapScreen from "@/screens/map-screen";
+import useBackgroundLocation from "@/src/hooks/use-background-location";
+import useForegroundLocation from "@/src/hooks/use-foreground-location";
 import {
   Inter_400Regular,
   Inter_700Bold,
   useFonts,
 } from "@expo-google-fonts/inter";
 import { Poppins_700Bold } from "@expo-google-fonts/poppins";
 import Mapbox from "@rnmapbox/maps";
-import { QueryClient } from "@tanstack/react-query";
-import { LogBox, View } from "react-native";
-import useForegroundLocation from "./hooks/use-foreground-location";
-
-LogBox.ignoreLogs([
-  "Warning: CountryModal: Support for defaultProps will be removed from function components",
-]);
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Stack, useRootNavigationState } from "expo-router";
+import React, { useEffect } from "react";
+import { View } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 
 const queryClient = new QueryClient();
 
 Mapbox.setAccessToken(
   "sk.eyJ1IjoiY2dvbWV6bWVuZGV6IiwiYSI6ImNtMndhbDAwZjAzMXQyanNkMHF2NjR3bmUifQ.f6E28fydW9bkhLBP7L_lCQ"
 );
 
-export default function HomeLayout() {
+const App = () => {
+  const { routes } = useRootNavigationState();
+
+  useEffect(() => {
+    console.log(
+      "Registered routes:",
+      routes.map((route) => route.name)
+    );
+  }, [routes]);
+
   useBackgroundLocation();
   useForegroundLocation();
+
   const [fontsLoaded] = useFonts({
     Inter_400Regular,
     Inter_700Bold,
@@ -37,8 +43,14 @@ export default function HomeLayout() {
   }
 
   return (
-    <>
-      <MapScreen />
-    </>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <QueryClientProvider client={queryClient}>
+        <Stack initialRouteName="signup">
+          <Stack.Screen name="signup" options={{ headerShown: false }} />
+        </Stack>
+      </QueryClientProvider>
+    </GestureHandlerRootView>
   );
-}
+};
+
+export default App;

apps/driver-app/app/screens/map-screen.tsx → apps/driver-app/app/map.tsx

@@ -1,10 +1,10 @@
-import useUserLocation from "@/hooks/use-user-location";
+import useUserLocation from "@/src/hooks/use-user-location";
 import { Ionicons } from "@expo/vector-icons";
 import Mapbox from "@rnmapbox/maps";
 import React, { useEffect, useRef, useState } from "react";
 import { Alert, StyleSheet, TouchableOpacity, View } from "react-native";
 
-const MapScreen: React.FC = () => {
+export default function Map() {
   const { location: userLocation, fetchUserLocation } = useUserLocation();
   const [isMapInitialized, setIsMapInitialized] = useState(false);
   const cameraRef = useRef<Mapbox.Camera>(null);
@@ -57,7 +57,7 @@ const MapScreen: React.FC = () => {
       </TouchableOpacity>
     </View>
   );
-};
+}
 
 const styles = StyleSheet.create({
   button: {
@@ -72,5 +72,3 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
 });
-
-export default MapScreen;

apps/driver-app/app/signup.tsx

@@ -0,0 +1,35 @@
+import KeyboardDismiss from "@/src/components/keyboard-dismiss";
+import SignUpForm from "@/src/components/sign-up-form";
+import React from "react";
+import { KeyboardAvoidingView, Platform, StyleSheet, View } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export default function SignUp() {
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={{ flex: 1 }}
+      >
+        <ScrollView
+          contentContainerStyle={{
+            flexGrow: 1,
+          }}
+        >
+          <KeyboardDismiss>
+            <View style={styles.container}>
+              <SignUpForm />
+            </View>
+          </KeyboardDismiss>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

apps/driver-app/app/api/index.ts → apps/driver-app/src/api/index.ts

@@ -1,4 +1,4 @@
-import { ApiResponse, DriverData } from "@/api/models";
+import { ApiResponse, DriverData } from "./models";
 
 const API_BASE_URL = process.env.EXPO_PUBLIC_MORRO_API_BASE_URL;
 

apps/driver-app/src/components/__tests__/ThemedText-test.tsx

@@ -0,0 +1,10 @@
+// import * as React from 'react';
+
+
+// import { ThemedText } from '../defaults/ThemedText';
+
+it(`renders correctly`, () => {
+  // const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
+
+  // expect(tree).toMatchSnapshot();
+});

apps/driver-app/app/components/defaults/Collapsible.tsx → apps/driver-app/src/components/defaults/Collapsible.tsx

@@ -2,9 +2,9 @@ import Ionicons from '@expo/vector-icons/Ionicons';
 import { PropsWithChildren, useState } from 'react';
 import { StyleSheet, TouchableOpacity, useColorScheme } from 'react-native';
 
-import { ThemedText } from '@/components/defaults/ThemedText';
-import { ThemedView } from '@/components/defaults/ThemedView';
-import { Colors } from '@/constants/Colors';
+import { Colors } from '../../constants/Colors';
+import { ThemedText } from './ThemedText';
+import { ThemedView } from './ThemedView';
 
 export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
   const [isOpen, setIsOpen] = useState(false);

apps/driver-app/app/components/defaults/HelloWave.tsx → apps/driver-app/src/components/defaults/HelloWave.tsx

@@ -7,7 +7,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { ThemedText } from '@/components/defaults/ThemedText';
+import { ThemedText } from './ThemedText';
 
 export function HelloWave() {
   const rotationAnimation = useSharedValue(0);

apps/driver-app/app/components/defaults/ParallaxScrollView.tsx → apps/driver-app/src/components/defaults/ParallaxScrollView.tsx

@@ -7,7 +7,7 @@ import Animated, {
   useScrollViewOffset,
 } from 'react-native-reanimated';
 
-import { ThemedView } from '@/components/defaults/ThemedView';
+import { ThemedView } from './ThemedView';
 
 const HEADER_HEIGHT = 250;
 

apps/driver-app/app/components/defaults/ThemedText.tsx → apps/driver-app/src/components/defaults/ThemedText.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, Text, type TextProps } from 'react-native';
 
-import { useThemeColor } from '@/hooks/useThemeColor';
+import { useThemeColor } from '@/src/hooks/useThemeColor';
 
 export type ThemedTextProps = TextProps & {
   lightColor?: string;

apps/driver-app/app/components/defaults/ThemedView.tsx → apps/driver-app/src/components/defaults/ThemedView.tsx

@@ -1,6 +1,6 @@
 import { View, type ViewProps } from 'react-native';
 
-import { useThemeColor } from '@/hooks/useThemeColor';
+import { useThemeColor } from '@/src/hooks/useThemeColor';
 
 export type ThemedViewProps = ViewProps & {
   lightColor?: string;

apps/driver-app/app/components/input-text-field/index.tsx → apps/driver-app/src/components/input-text-field/index.tsx

@@ -1,6 +1,6 @@
-import InputPhone from "@/components/input-phone";
-import InputText from "@/components/input-text";
-import ObscuredInputText from "@/components/obscured-input-text";
+import InputPhone from "@/src/components/input-phone";
+import InputText from "@/src/components/input-text";
+import ObscuredInputText from "@/src/components/obscured-input-text";
 import React, { forwardRef } from "react";
 import { Text, View } from "react-native";
 import { IInputTextFieldProps } from "./props";

apps/driver-app/app/components/input-text-field/props.ts → apps/driver-app/src/components/input-text-field/props.ts

@@ -1,4 +1,4 @@
-import { IInputTextProps } from "@/components/input-text/props";
+import { IInputTextProps } from "@/src/components/input-text/props";
 
 export interface IInputTextFieldProps extends IInputTextProps {
     label: string;

apps/driver-app/app/components/obscured-input-text/index.tsx → apps/driver-app/src/components/obscured-input-text/index.tsx

@@ -1,5 +1,5 @@
-import InputText from "@/components/input-text";
-import { IInputTextProps } from "@/components/input-text/props";
+import InputText from "@/src/components/input-text";
+import { IInputTextProps } from "@/src/components/input-text/props";
 import { AntDesign } from "@expo/vector-icons";
 import React, { useState } from "react";
 

apps/driver-app/app/components/sign-up-form/index.tsx → apps/driver-app/src/components/sign-up-form/index.tsx

@@ -1,7 +1,7 @@
-import Checkbox from "@/components/checkbox";
-import InputTextField from "@/components/input-text-field";
-import RoundedButton from "@/components/rounded-button";
-import { useRegisterDriver } from "@/hooks/api/use-register-driver";
+import Checkbox from "@/src/components/checkbox";
+import InputTextField from "@/src/components/input-text-field";
+import RoundedButton from "@/src/components/rounded-button";
+import { useRegisterDriver } from "@/src/hooks/api/use-register-driver";
 import React, { useRef, useState } from "react";
 import { Keyboard, Text, View } from "react-native";
 import PhoneInput from "react-native-phone-number-input";

apps/driver-app/app/hooks/api/use-register-driver.ts → apps/driver-app/src/hooks/api/use-register-driver.ts

@@ -1,5 +1,5 @@
-import { registerDriver } from "@/api/index";
-import { ApiResponse, DriverData } from "@/api/models";
+import { registerDriver } from "@/src/api/index";
+import { ApiResponse, DriverData } from "@/src/api/models";
 import { useMutation, UseMutationResult } from "@tanstack/react-query";
 
 export const useRegisterDriver = (): UseMutationResult<

apps/driver-app/src/hooks/use-background-location.ts

@@ -0,0 +1,15 @@
+import { LOCATION_TASK_NAME } from "@/src/tasks/location-task";
+import { useEffect } from "react";
+import useLocationManager from "./use-location-manager";
+
+const useBackgroundLocation = () => {
+  const { startLocationUpdates } = useLocationManager(true);
+
+  useEffect(() => {
+    startLocationUpdates(LOCATION_TASK_NAME);
+  }, [startLocationUpdates]);
+
+  return null;
+};
+
+export default useBackgroundLocation;

apps/driver-app/app/hooks/use-foreground-location.ts → apps/driver-app/src/hooks/use-foreground-location.ts

@@ -1,6 +1,6 @@
-import useLocationManager from "@/hooks/use-location-manager";
-import useMQTTClient from "@/hooks/use-mqtt-client";
 import { useEffect } from "react";
+import useLocationManager from "./use-location-manager";
+import useMQTTClient from "./use-mqtt-client";
 
 const useForegroundLocation = () => {
   const { location } = useLocationManager(false); // Foreground mode, no task name needed