handle user profile session

src/components/common/Header.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import { Ionicons } from  "@react-native-vector-icons/ionicons"
+
+type HeaderProps = {
+  title: string;
+  showBack?: boolean; // optional, default true
+  onBackPress?: () => void; // optional custom back action
+};
+
+const Header: React.FC<HeaderProps> = ({
+  title,
+  showBack = true,
+  onBackPress,
+}) => {
+  const navigation = useNavigation();
+
+  const handleBack = () => {
+    if (onBackPress) {
+      onBackPress();
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  return (
+    <View style={styles.header}>
+      {showBack && (
+        <TouchableOpacity onPress={handleBack} style={styles.backButton}>
+          <Ionicons name="arrow-back" size={24} color="#000" />
+        </TouchableOpacity>
+      )}
+      <Text style={styles.headerTitle}>{title}</Text>
+    </View>
+  );
+};
+
+export default Header;
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: "#fff",
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 6,
+    elevation: 3,
+  },
+  backButton: {
+    marginRight: 12,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#000",
+  },
+});