completed assignment task 3 - create event with img upload

package.json

@@ -1,53 +1,54 @@
 {
-    "main": "node_modules/expo/AppEntry.js",
-    "scripts": {
-        "start": "expo start",
-        "android": "expo start --android",
-        "ios": "expo start --ios",
-        "web": "expo start --web",
-        "eject": "expo eject"
-    },
-    "dependencies": {
-        "@expo-google-fonts/nunito": "^0.2.2",
-        "@expo/react-native-action-sheet": "^4.0.1",
-        "@react-native-async-storage/async-storage": "^1.17.11",
-        "@react-native-community/datetimepicker": "6.5.2",
-        "@react-native-masked-view/masked-view": "0.2.8",
-        "@react-navigation/native": "^6.0.16",
-        "@react-navigation/stack": "^6.3.7",
-        "axios": "^1.2.1",
-        "expo": "^47.0.0",
-        "expo-constants": "~14.0.2",
-        "expo-font": "~11.0.1",
-        "expo-image-picker": "~14.0.2",
-        "expo-linear-gradient": "~12.0.1",
-        "expo-location": "~15.0.1",
-        "expo-status-bar": "~1.4.2",
-        "expo-updates": "~0.15.6",
-        "json-server": "^0.17.1",
-        "json-server-auth": "^2.1.0",
-        "jwt-decode": "^3.1.2",
-        "react": "18.1.0",
-        "react-dom": "18.1.0",
-        "react-native": "0.70.5",
-        "react-native-gesture-handler": "~2.8.0",
-        "react-native-get-random-values": "~1.8.0",
-        "react-native-keyboard-aware-scroll-view": "^0.9.5",
-        "react-native-loading-spinner-overlay": "^3.0.1",
-        "react-native-maps": "1.3.2",
-        "react-native-modal-datetime-picker": "^14.0.0",
-        "react-native-reanimated": "~2.12.0",
-        "react-native-safe-area-context": "4.4.1",
-        "react-native-screens": "~3.18.0",
-        "react-native-web": "~0.18.7",
-        "uuid": "^9.0.0"
-    },
-    "devDependencies": {
-        "@types/react": "~18.0.24",
-        "@types/react-dom": "~18.0.8",
-        "@types/react-native": "~0.70.6",
-        "@types/uuid": "^9.0.0",
-        "typescript": "^4.6.3"
-    },
-    "private": true
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@expo-google-fonts/nunito": "^0.2.2",
+    "@expo/react-native-action-sheet": "^4.0.1",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/datetimepicker": "8.4.4",
+    "@react-native-community/netinfo": "11.4.1",
+    "@react-native-masked-view/masked-view": "0.3.2",
+    "@react-navigation/native": "^6.0.16",
+    "@react-navigation/stack": "^6.3.7",
+    "axios": "^1.2.1",
+    "expo": "^54.0.0",
+    "expo-constants": "~18.0.9",
+    "expo-font": "~14.0.9",
+    "expo-image-picker": "~17.0.8",
+    "expo-linear-gradient": "~15.0.7",
+    "expo-location": "~19.0.7",
+    "expo-status-bar": "~3.0.8",
+    "expo-updates": "~29.0.12",
+    "json-server": "^0.17.1",
+    "json-server-auth": "^2.1.0",
+    "jwt-decode": "^3.1.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-get-random-values": "~1.11.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-loading-spinner-overlay": "^3.0.1",
+    "react-native-maps": "1.20.1",
+    "react-native-modal-datetime-picker": "^14.0.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "^0.21.0",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.10",
+    "@types/react-dom": "~19.1.7",
+    "@types/react-native": "~0.70.6",
+    "@types/uuid": "^9.0.0",
+    "typescript": "~5.9.2"
+  },
+  "private": true
 }

src/components/BackHeader.tsx

@@ -0,0 +1,46 @@
+
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { Feather } from '@expo/vector-icons';
+import { useNavigation } from '@react-navigation/native';
+
+// header component with optional title
+type BackHeaderProps = {
+  title?: string;
+};
+
+export default function BackHeader({ title }: BackHeaderProps) {
+  // gives access to navigation
+  const navigation = useNavigation();
+
+  return (
+    <View style={styles.header}>
+      <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backBtn}>
+        <Feather name="arrow-left" size={22} color="#333" />
+      </TouchableOpacity>
+      <Text style={styles.title}>{title}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingTop: 50,
+    paddingBottom: 12,
+    paddingHorizontal: 16,
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderColor: '#e2e8f0',
+  },
+  backBtn: {
+    padding: 6,
+    marginRight: 8,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#0f172a',
+  },
+});