fix: resolved fallback problem on App and ScrollView on Event Screen,…

App.tsx

@@ -14,7 +14,7 @@ import { SafeAreaProvider } from "react-native-safe-area-context"
 import { StatusBar } from "expo-status-bar"
 import * as WebBrowser from "expo-web-browser"
 import * as Linking from "expo-linking"
-import HomeScreen from "./screens/Home/HomeScreen"
+// import HomeScreen from "./screens/Home/HomeScreen"
 
 SplashScreen.preventAutoHideAsync()
 
@@ -52,7 +52,7 @@ export default function App() {
     <GestureHandlerRootView style={styles.gestureHandler}>
       <StatusBar style="dark" />
       <SafeAreaProvider>
-        <NavigationContainer linking={linking} fallback={<HomeScreen/>}>
+        <NavigationContainer linking={linking}>
           <MainStackNavigator/>
         </NavigationContainer>
       </SafeAreaProvider>

__test__/components/Graph/graph-algorithms/FruchtermanReingold.test.tsx

@@ -22,7 +22,7 @@ describe("fruchtermanReingold", () => {
       { source: "node3", target: "node1", strength: 1 },
     ]
     constrainedNodeId = "someNodeId"
-    width = 800
+    width = 900
     height = 600
     iterations = 100
   })

__test__/screens/Maps/Maps.test.tsx → __test__/screens/Maps/EventMap.test.tsx

@@ -3,15 +3,20 @@ import Map from '../../../screens/Maps/EventMap'
 import React from 'react'
 
 jest.mock('@react-navigation/native', () => {
+    const actualNav = jest.requireActual('@react-navigation/native')
     return {
-      ...jest.requireActual('@react-navigation/native'),
+      ...actualNav,
       useRoute: () => ({
         params: {
           events: [
             { title: "Balelek 2023", location: "EPFL, Agora", latitude: 46.51858962578904, longitude: 6.566048509782951, date: "2023-04-04" },
             { title: "Event 2", location: "EPFL, CM", latitude: 46.51858962578904, longitude: 6.566048509782951, date: "2022-08-04" }
           ]
         }
+      }),
+      useNavigation: () => ({
+        navigate: jest.fn(),
+        goBack: jest.fn()
       })
     }
   })
@@ -61,6 +66,13 @@ describe('Map', () => {
         fireEvent.press(calloutText)
         expect(console.log).toHaveBeenCalledWith("Callout pressed:", "Balelek 2023")
     })
+
+
+  it('should navigate back when the back button is pressed', () => {
+    const { getByTestId } = render(<Map />)
+    const backButton = getByTestId('back-button') 
+    fireEvent.press(backButton)
+  })
 
 })
 

components/EventCard/EventCard.tsx

@@ -28,9 +28,9 @@ const EventCard: React.FC<EventCardProps> = ({
         <Text style={styles.title}>{title}</Text>
         <Text>{date}</Text>
         <View style={styles.locationContainer}>
-          <Text style={styles.location}>{location}</Text>
-          <Text>{latitude}</Text>
-          <Text>{longitude}</Text>
+          <Text style={styles.location}>{location +  "  "}</Text>
+          <Text>{Number(latitude).toFixed(2) + "  "}</Text>
+          <Text>{Number(longitude).toFixed(2)}</Text>
         </View>
         <Text style={styles.description}>{description}</Text>
       </View>

screens/Home/HomeScreen.tsx

@@ -1,8 +1,6 @@
 import {
   View,
   Text,
-  TouchableWithoutFeedback,
-  Keyboard,
   TextInput,
 } from "react-native"
 
@@ -26,6 +24,7 @@ export interface event {
   imageUrl: string
 }
 
+
 const events = [
   {
     title: "Balelek 2023",
@@ -103,7 +102,7 @@ const HomeScreen = () => {
     date: string
     imageUrl: string
   }) => (
-    <TouchableOpacity>
+    <TouchableOpacity >
       <EventCard
         title={event.title}
         location={event.location}
@@ -118,14 +117,15 @@ const HomeScreen = () => {
   )
 
   return (
-    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+    //<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
       <View
         style={[
           styles.view,
           { paddingBottom: insets.bottom, paddingTop: insets.top },
         ]}
       >
         {/* Add the choose tab component from Gael pull request */}
+
         <View style={styles.searchAndMap}>
           <View>
             <TextInput
@@ -134,6 +134,7 @@ const HomeScreen = () => {
               onChangeText={handleSearch}
             />
           </View>
+          {/* Need to style the opacity to render it smaller*/}
           <TouchableOpacity
             style={styles.map}
             onPress={() =>
@@ -155,7 +156,7 @@ const HomeScreen = () => {
           </ScrollView>
         </View>
       </View>
-    </TouchableWithoutFeedback>
+    //</TouchableWithoutFeedback>
   )
 }
 

screens/Maps/EventMap.tsx

@@ -1,9 +1,10 @@
 import MapView, { Callout, Marker, PROVIDER_GOOGLE } from "react-native-maps"
 import React from "react"
-import { RouteProp, useRoute } from "@react-navigation/native"
+import { RouteProp, useNavigation, useRoute } from "@react-navigation/native"
 import { event } from "../Home/HomeScreen"
-import { View, Text } from "react-native"
+import { View, Text, TouchableOpacity } from "react-native"
 import styles from "./styles" // Import styles
+import { Ionicons } from "@expo/vector-icons"
 
 const INITIAL_REGION = {
   latitude: 46.51858962578904,
@@ -17,10 +18,18 @@ type MapScreenRouteProp = RouteProp<{ params: { events: event[] } }, "params">
 export default function EventMap() {
   const route = useRoute<MapScreenRouteProp>()
   const events = route.params.events
-  //const navigation = useNavigation()
+  const navigation = useNavigation()
 
   return (
     <View style={styles.container}>
+      {/* Navigation Bar */}
+      <View style={styles.navigationBar}>
+        <TouchableOpacity testID='back-button' onPress={() => navigation.goBack()} style={styles.backButton}>
+          {/* Using Ionicons for the back button icon */}
+          <Ionicons name="arrow-back" size={24} color="black" />
+        </TouchableOpacity>
+        <Text style={styles.screenTitle}>Event Map</Text>
+      </View>
       <MapView
         style={styles.map}
         initialRegion={INITIAL_REGION}

screens/Maps/styles.ts

@@ -1,17 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react-native/sort-styles */
 // MapStyles.ts
 import { StyleSheet } from "react-native"
 import { white } from "../../assets/colors/colors"
 
 export default StyleSheet.create({
-  backButton: {
-    backgroundColor: white, // Change as needed
-    borderRadius: 5,
-    left: 10,
-    padding: 10,
-    position: "absolute",
-    top: 10,
-    zIndex: 10, // Make sure the button is above the map
-  },
   calloutTextLocation: {
     fontSize: 14,
   },
@@ -30,4 +23,20 @@ export default StyleSheet.create({
     height: "100%",
     width: "100%",
   },
+  navigationBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingTop: 10,
+    height: 100,
+    // Include other styling such as background color, height, etc.
+  },
+  backButton: {
+    marginRight: 10, // Provide some spacing between the back button and the title
+  },
+  screenTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    // Include other styling as needed for the screen title
+  },
+
 })