api integration for joined user

src/components/common/Header.tsx

@@ -1,18 +1,24 @@
 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"
+import {Ionicons} from "@react-native-vector-icons/ionicons";
 
 type HeaderProps = {
   title: string;
   showBack?: boolean; // optional, default true
   onBackPress?: () => void; // optional custom back action
+  rightAction?: React.ReactNode; // allow passing JSX for right side
+  titleColor?:string;
+  arrowColor?:string
 };
 
 const Header: React.FC<HeaderProps> = ({
   title,
   showBack = true,
   onBackPress,
+  rightAction,
+  titleColor = 'pink',
+  arrowColor='pink'
 }) => {
   const navigation = useNavigation();
 
@@ -26,12 +32,15 @@ const Header: React.FC<HeaderProps> = ({
 
   return (
     <View style={styles.header}>
-      {showBack && (
-        <TouchableOpacity onPress={handleBack} style={styles.backButton}>
-          <Ionicons name="arrow-back" size={24} color="#000" />
+      {showBack ? (
+        <TouchableOpacity onPress={handleBack}>
+          <Ionicons name="arrow-back" size={24} color={arrowColor} />
         </TouchableOpacity>
+      ) : (
+        <View style={{ width: 24 }} /> // placeholder to keep spacing
       )}
-      <Text style={styles.headerTitle}>{title}</Text>
+      <Text style={[styles.headerTitle, {color:titleColor}]}>{title}</Text>
+      <View>{rightAction}</View>
     </View>
   );
 };
@@ -42,21 +51,11 @@ const styles = StyleSheet.create({
   header: {
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 16,
+    justifyContent: "space-between",
     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",
   },
 });