feat: added all the back arrows on screens that needed it (#234)

* feat: added all the back arrows

* test: updated tests

__test__/screens/EventCreation/EventCreationScreeen.test.tsx

@@ -240,7 +240,7 @@ describe("EventCreationScreen", () => {
 
   it("navigates back when the back button is pressed", () => {
     const { getByTestId } = render(<EventCreationScreen navigation={mockNavigation} />)
-    fireEvent.press(getByTestId("back-button"))
+    fireEvent.press(getByTestId("back-arrow"))
     //expect(mockGoBack).toHaveBeenCalled()
   })
 

__test__/screens/Maps/EventMap.test.tsx

@@ -75,7 +75,7 @@ describe('Map', () => {
 
   it('should navigate back when the back button is pressed', () => {
     const { getByTestId } = render(<Map />)
-    const backButton = getByTestId('back-button') 
+    const backButton = getByTestId('back-arrow') 
     fireEvent.press(backButton)
   })
 

__test__/screens/Profile/MyProfileScreen/MyProfileScreen.test.tsx

@@ -35,6 +35,17 @@ jest.mock("@expo/vector-icons/Ionicons", () => "Ionicons")
 //mock an alert with jest
 global.alert = jest.fn()
 
+const mockGoBack = jest.fn()
+
+jest.mock("@react-navigation/native", () => {
+  return {
+    ...jest.requireActual("@react-navigation/native"),
+    useNavigation: () => ({
+      goBack: mockGoBack,
+    }),
+  }
+})
+
 jest.mock('@react-native-async-storage/async-storage', () =>
   require('@react-native-async-storage/async-storage/jest/async-storage-mock')
 )

__test__/screens/Profile/MyQrCode/MyQrCodeScreen.test.tsx

@@ -2,6 +2,17 @@ import React from "react"
 import { render } from "@testing-library/react-native"
 import { MyQrCodeScreen } from "../../../../screens/Profile/MyQrCode/MyQrCodeScreen"
 
+const mockGoBack = jest.fn()
+
+jest.mock("@react-navigation/native", () => {
+  return {
+    ...jest.requireActual("@react-navigation/native"),
+    useNavigation: () => ({
+      goBack: mockGoBack,
+    }),
+  }
+})
+
 jest.mock("@react-native-async-storage/async-storage", () =>
   require("@react-native-async-storage/async-storage/jest/async-storage-mock")
 )

__test__/screens/Settings/SettingsScreen.test.tsx

@@ -52,7 +52,7 @@ describe("SettingsScreen", () => {
     )
 
     // Assert that the back button is rendered
-    const backButton = getByTestId("back-button")
+    const backButton = getByTestId("back-arrow")
     expect(backButton).toBeTruthy()
 
     // Assert that the menu items are rendered
@@ -78,7 +78,7 @@ describe("SettingsScreen", () => {
       </NavigationContainer>
     )
 
-    const backButton = getByTestId("back-button")
+    const backButton = getByTestId("back-arrow")
     fireEvent.press(backButton)
 
     expect(mockGoBack).toHaveBeenCalled()

screens/EventCreation/EventCreationScreen.tsx

@@ -16,6 +16,7 @@ import { getUserData, updateUserEvents } from "../../firebase/User"
 import { showErrorToast, showSuccessToast } from "../../components/ToastMessage/toast"
 import { getAuth } from "firebase/auth"
 import { User } from "../../types/User"
+import { BackArrow } from "../../components/BackArrow/BackArrow"
 
 interface EventCreationScreenProps {
   navigation: NavigationProp<ParamListBase>,
@@ -109,9 +110,7 @@ const EventCreationScreen = ({ navigation, isAnnouncement }: EventCreationScreen
   return (
     <ScrollView style={styles.container}>
       <View style={[styles.header, { paddingTop: insets.top + 5 }]}>
-        <Pressable onPress={() => navigation.goBack()} testID="back-button">
-          <Ionicons name="arrow-back-outline" size={24} color={peach} />
-        </Pressable>
+        <BackArrow/>
         <View style={styles.headerIcon}>
           <Ionicons name="add" size={24} color={peach} />
         </View>

screens/Maps/EventMap.tsx

@@ -1,10 +1,10 @@
 import MapView, { Callout, Marker, PROVIDER_GOOGLE } from "react-native-maps"
 import React from "react"
-import { RouteProp, useNavigation, useRoute } from "@react-navigation/native"
-import { View, Text, TouchableOpacity } from "react-native"
+import { RouteProp, useRoute } from "@react-navigation/native"
+import { View, Text } from "react-native"
 import styles from "./styles" // Import styles
-import { Ionicons } from "@expo/vector-icons"
 import { Event } from "../../types/Event"
+import { BackArrow } from "../../components/BackArrow/BackArrow"
 
 
 const INITIAL_REGION = {
@@ -24,7 +24,6 @@ type MapScreenRouteProp = RouteProp<RootStackParamList, 'EventMap'>;
 const EventMap = () => {
   const route = useRoute<MapScreenRouteProp>() 
   const events = route.params.events
-  const navigation = useNavigation()
 
   const computeEventDate = (date: string) => {
     const eventDate = new Date(date).toLocaleDateString("en-US", {
@@ -39,11 +38,8 @@ const EventMap = () => {
   return (
     <View style={styles.container}>
       {/* Navigation Bar */}
+      <BackArrow/>
       <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

screens/Maps/styles.ts

@@ -26,8 +26,10 @@ export default StyleSheet.create({
   navigationBar: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: "center",
     paddingTop: 10,
-    height: 100,
+    height: 80,
+    width: "100%",
     // Include other styling such as background color, height, etc.
   },
   backButton: {

screens/Profile/ExternalProfileScreen/ExternalProfileScreen.tsx

@@ -14,6 +14,7 @@ import { getAuth } from "firebase/auth"
 import LoadingScreen from "../../Loading/LoadingScreen"
 import { getUserData, addFriend, removeFriend } from "../../../firebase/User"
 import { User } from "../../../types/User"
+import { BackArrow } from "../../../components/BackArrow/BackArrow"
 
 type RootStackParamList = {
   ExternalProfile: {
@@ -77,6 +78,7 @@ const ExternalProfileScreen = () => {
 
   return (
     <View style={styles.container}>
+      <BackArrow/>
       <View style={profileStyles.profileContainer}>
         <View style={profileStyles.topProfileContainer}>
           <GeneralProfile

screens/Profile/MyProfileScreen/MyProfileScreen.tsx

@@ -16,6 +16,7 @@ import { User } from "../../../types/User"
 import { getUserData } from "../../../firebase/User"
 import LoadingScreen from "../../Loading/LoadingScreen"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
+import { BackArrow } from "../../../components/BackArrow/BackArrow"
 
 interface MyProfileScreenProps {
   navigation: NavigationProp<ParamListBase>
@@ -45,6 +46,7 @@ export const MyProfileScreen = ({ navigation }: MyProfileScreenProps) => {
   }
   return (
     <View style={styles.container}>
+      <BackArrow/>
       <View style={[profileStyles.profileContainer, {paddingTop: insets.top + 5}]}>
         <View style={styles.header}>
           <TouchableOpacity onPress={() => navigation.goBack()} testID="back-button">

screens/Profile/MyQrCode/MyQrCodeScreen.tsx

@@ -9,6 +9,7 @@ import { getAuth } from "firebase/auth"
 import { getUserData } from "../../../firebase/User"
 import LoadingScreen from "../../Loading/LoadingScreen"
 import { User } from "../../../types/User"
+import { BackArrow } from "../../../components/BackArrow/BackArrow"
 
 const generateLink = (uid: string) => {
   // this create the deep link that can directly redirect in the app when scanned from outside
@@ -39,6 +40,7 @@ export const MyQrCodeScreen = () => {
 
   return (
     <View style={styles.container}>
+        <BackArrow />
         <View style={styles.contactContainer}>
           <View style={styles.textContainer}>
             <Text style={globalStyles.boldText}>{user.firstName}</Text>

screens/Settings/SettingsScreen.tsx

@@ -2,10 +2,9 @@ import React from "react"
 import { View, Text, TouchableOpacity, Alert } from "react-native"
 import { styles } from "./styles"
 import { useNavigation } from "@react-navigation/native"
-import { Ionicons } from "@expo/vector-icons"
-import { peach } from "../../assets/colors/colors"
 import { Logout } from "../../firebase/Logout"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
+import { BackArrow } from "../../components/BackArrow/BackArrow"
 
 export const SettingsScreen = () => {
   const navigation = useNavigation()
@@ -27,14 +26,8 @@ export const SettingsScreen = () => {
 
   return (
     <View style={[styles.container, { paddingTop: insets.top }]}>
-      <View style={styles.header}>
-        <TouchableOpacity
-          onPress={() => navigation.goBack()}
-          testID="back-button"
-        >
-          <Ionicons name="arrow-back-outline" size={24} color={peach} />
-        </TouchableOpacity>
-      </View>
+      <BackArrow />
+      <View style={styles.header}/>
       <View style={styles.itemsContainer}>
         {menuItems.map((menuItem, index) => (
           <TouchableOpacity

screens/Settings/styles.ts

@@ -17,7 +17,7 @@ export const styles = StyleSheet.create({
   header: {
     alignItems: "center",
     flexDirection: "row",
-    marginBottom: 40,
+    marginBottom: 60,
     marginHorizontal: 20,
   },
   headerTitle: {