common component

src/screens/GroupCreation.tsx

@@ -0,0 +1,204 @@
+import { Picker } from "@react-native-picker/picker";
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import CustomButton from "../components/CustomButton";
+
+export default function GroupCreationForm() {
+  const navigation = useNavigation<any>();
+
+  const [form, setForm] = useState({
+    contributionAmount: "",
+    customCycleDays: "",
+    cycleType: "CUSTOM",
+    description: "",
+    endDate: "",
+    groupName: "",
+    maxParticipants: "",
+    minParticipants: "",
+    startDate: "",
+    visibility: "PRIVATE",
+  });
+
+  const handleChange = (key: string, value: string) => {
+    setForm({ ...form, [key]: value });
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={{ flex: 1, backgroundColor: "#f5f6fa", paddingTop: Platform.OS === "android" ? 40 : 0 }}
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+    >
+      <ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
+        <Text style={styles.title}>Group Creation</Text>
+
+        {/* Group Info */}
+        <Text style={styles.label}>Group Name</Text>
+        <TextInput
+          style={styles.input}
+          placeholderTextColor={"#a3a3a3ff"}
+          placeholder="Enter your group name"
+          value={form.groupName}
+          onChangeText={(val) => handleChange("groupName", val)}
+        />
+
+        <Text style={styles.label}>Description</Text>
+        <TextInput
+          style={[styles.input, { height: 80 }]}
+          placeholderTextColor={"#a3a3a3ff"}
+          placeholder="Enter a short description for the group"
+          value={form.description}
+          multiline
+          onChangeText={(val) => handleChange("description", val)}
+        />
+
+        <Text style={styles.label}>Visibility</Text>
+        <View style={styles.pickerWrapper}>
+          <Picker
+            selectedValue={form.visibility}
+            onValueChange={(val) => handleChange("visibility", val)}
+            style={styles.picker}
+          >
+            <Picker.Item label="Private (Only invited can join)" value="PRIVATE" />
+            <Picker.Item label="Public (Anyone can find)" value="PUBLIC" />
+          </Picker>
+        </View>
+
+        {/* Participants */}
+        <Text style={styles.label}>Minimum Participants</Text>
+        <TextInput
+          style={styles.input}
+          placeholderTextColor={"#a3a3a3ff"}
+          placeholder="Enter minimum number of participants"
+          keyboardType="numeric"
+          value={form.minParticipants}
+          onChangeText={(val) => handleChange("minParticipants", val)}
+        />
+
+        <Text style={styles.label}>Maximum Participants</Text>
+        <TextInput
+          style={styles.input}
+          placeholderTextColor={"#a3a3a3ff"}
+          placeholder="Enter maximum number of participants"
+          keyboardType="numeric"
+          value={form.maxParticipants}
+          onChangeText={(val) => handleChange("maxParticipants", val)}
+        />
+
+        {/* Contribution */}
+        <Text style={styles.label}>Contribution Amount (₹)</Text>
+        <TextInput
+          style={styles.input}
+          placeholderTextColor={"#a3a3a3ff"}
+          placeholder="Enter contribution amount (₹)"
+          keyboardType="numeric"
+          value={form.contributionAmount}
+          onChangeText={(val) => handleChange("contributionAmount", val)}
+        />
+
+        <Text style={styles.label}>Cycle Type</Text>
+        <View style={styles.pickerWrapper}>
+          <Picker
+            selectedValue={form.cycleType}
+            onValueChange={(val) => handleChange("cycleType", val)}
+            style={styles.picker}
+          >
+            <Picker.Item label="Custom (Set custom cycle days)" value="CUSTOM" />
+                  <Picker.Item label="Monthly" value="MONTHLY" />
+        <Picker.Item label="Quarterly" value="QUARTERLY" />
+        <Picker.Item label="Half Yearly" value="HALF_YEARLY" />
+        <Picker.Item label="Yearly" value="YEARLY" />
+        
+          </Picker>
+        </View>
+
+        {form.cycleType === "CUSTOM" && (
+          <>
+            <Text style={styles.label}>Custom Cycle Days</Text>
+            <TextInput
+              style={styles.input}
+              placeholderTextColor={"#a3a3a3ff"}
+              placeholder="Enter number of days for custom cycle"
+              keyboardType="numeric"
+              value={form.customCycleDays}
+              onChangeText={(val) => handleChange("customCycleDays", val)}
+            />
+          </>
+        )}
+
+        {/* Timeline */}
+        <Text style={styles.label}>Start Date</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="YYYY-MM-DD (e.g. 2025-09-12)"
+          placeholderTextColor={"#a3a3a3ff"}
+          value={form.startDate}
+          onChangeText={(val) => handleChange("startDate", val)}
+        />
+
+        <Text style={styles.label}>End Date</Text>
+        <TextInput
+          style={styles.input}
+          placeholderTextColor={"#a3a3a3ff"}
+          placeholder="YYYY-MM-DD (e.g. 2025-12-31)"
+          value={form.endDate}
+          onChangeText={(val) => handleChange("endDate", val)}
+        />
+
+        {/* Next Button
+        <TouchableOpacity
+          onPress={() => navigation.navigate("GroupReview", { form })}
+          style={styles.nextBtn}
+        >
+          <Text style={styles.btnText}>➡ Review</Text>
+        </TouchableOpacity> */}
+        <CustomButton
+          title="➡ Review"
+          onPress={() => navigation.navigate("GroupReview", { form })}
+        />
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flexGrow: 1, padding: 20 },
+  title: { fontSize: 22, fontWeight: "bold", marginBottom: 15, color: "#333" },
+  label: { fontSize: 14, fontWeight: "600", marginBottom: 5, color: "#444" },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 12,
+    padding: 12,
+    marginBottom: 15,
+    fontSize: 16,
+    backgroundColor: "#fff",
+    elevation: 1,
+  },
+  pickerWrapper: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 12,
+    marginBottom: 15,
+    backgroundColor: "#fff",
+    elevation: 1,
+  },
+  picker: { height: 60, width: "100%" },
+  nextBtn: {
+    backgroundColor: "#eb87a3ff",
+    paddingVertical: 16,
+    borderRadius: 12,
+    alignItems: "center",
+    marginTop: 10,
+  },
+  btnText: { color: "#fff", fontWeight: "bold", fontSize: 16 },
+});

src/screens/GroupReview.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { View, Text, StyleSheet, TouchableOpacity, Alert, ScrollView } from "react-native";
+import axios from "axios";
+import { GROUP_CREATION_URL } from "../utils/ApiUrls";
+import App from "../../App";
+import AppView from "../components/AppView";
+import { apiCall } from "../utils/ApiHelper";
+
+export default function GroupReview({ route, navigation }: any) {
+  const { form } = route.params;
+
+  const handleSubmit = async () => {
+    const payload = {
+      ...form,
+      contributionAmount: Number(form.contributionAmount),
+      customCycleDays: Number(form.customCycleDays),
+      maxParticipants: Number(form.maxParticipants),
+      minParticipants: Number(form.minParticipants),
+    };
+    await apiCall(GROUP_CREATION_URL, "POST", payload);
+  };
+
+  const renderRow = (label: string, value: string | number) => (
+    <View style={styles.row}>
+      <Text style={styles.label}>{label}</Text>
+      <Text style={styles.value}>{value}</Text>
+    </View>
+  );
+
+  return (
+    <AppView>
+    <ScrollView contentContainerStyle={styles.container}>
+      <Text style={styles.title}>Review Your Group</Text>
+      <View style={styles.reviewBox}>
+        {renderRow("Group Name", form.groupName)}
+        {renderRow("Description", form.description)}
+        {renderRow("Min Participants", form.minParticipants)}
+        {renderRow("Max Participants", form.maxParticipants)}
+        {renderRow("Contribution", `₹${form.contributionAmount}`)}
+        {renderRow("Cycle Type", form.cycleType)}
+        {form.cycleType === "CUSTOM" && renderRow("Custom Cycle", `${form.customCycleDays} days`)}
+        {renderRow("Start Date", form.startDate)}
+        {renderRow("End Date", form.endDate)}
+        {renderRow("Visibility", form.visibility)}
+      </View>
+
+      <TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}>
+        <Text style={styles.btnText}> Submit</Text>
+      </TouchableOpacity>
+    </ScrollView>
+    </AppView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flexGrow: 1, padding: 20, backgroundColor: "#f5f5f5" },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    marginBottom: 20,
+    color: "#222",
+    textAlign: "center",
+  },
+  reviewBox: {
+    padding: 18,
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 16,
+    backgroundColor: "#fff",
+    marginBottom: 25,
+    elevation: 3,
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 5,
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: "#eee",
+  },
+  label: { fontSize: 16, fontWeight: "600", color: "#444" },
+  value: { fontSize: 16, fontWeight: "500", color: "#111" },
+  submitBtn: {
+    backgroundColor: "#008e02",
+    paddingVertical: 18,
+    borderRadius: 14,
+    alignItems: "center",
+    elevation: 2,
+  },
+  btnText: { color: "#fff", fontWeight: "bold", fontSize: 18 },
+});

src/screens/GroupScreen.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { FAB, Portal, Provider } from "react-native-paper";
+import Tooltip from "react-native-walkthrough-tooltip";
+import { MaterialIcons } from '@react-native-vector-icons/material-icons';
+import { useNavigation } from "@react-navigation/native";
+import { StackNavigationProp } from "@react-navigation/stack";
+import { RootStackParamList } from "../navigation/AppNavigator";
+
+export default function GroupScreen() {
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+      const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+  return (
+    <Provider>
+      <View style={styles.container}>
+        <Text style={styles.title}>Groups</Text>
+
+
+    <FAB
+      style={styles.fab}
+      icon={() => <MaterialIcons name="group-add" size={24} color="#eb87a3ff" />}
+      onPress={() => {
+        navigation.navigate('GroupCreation')
+      }}
+    />
+
+
+      </View>
+    </Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#dae4ed",
+    padding: 16,
+    paddingTop: 40,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: "bold",
+    color: "#333",
+  },
+  fab: {
+    position: "absolute",
+    right: 20,
+    bottom: 90,
+    width: 70,
+    height: 70,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#dae4ed",
+    borderRadius: 60,
+  },
+  tooltipText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});

src/screens/OrgnizerRagister.tsx

@@ -0,0 +1,149 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  StyleSheet,
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+} from "react-native";
+import axios from "axios";
+import { ORGRAGISTRATION } from "../utils/ApiUrls";
+import * as Keychain from "react-native-keychain";
+
+const theme = {
+  primary: "#111",
+  accent: "#FF7A00",
+  background: "#F9F9F9",
+  text: "#1A1A1A",
+  subText: "#6B6B6B",
+  outline: "#E5E5E5",
+};
+
+export default function OrganizerRegisterScreen() {
+  const [bankAccountNumber, setBankAccountNumber] = useState("");
+  const [bankName, setBankName] = useState("");
+  const [branchCode, setBranchCode] = useState("");
+  const [loading, setLoading] = useState(false);
+const handleSubmit = async () => {
+  if (!bankAccountNumber || !bankName || !branchCode) {
+    Alert.alert("Error", "All fields are required.");
+    return;
+  }
+
+  try {
+    setLoading(true);
+
+    // 🔑 get token from Keychain
+    const creds = await Keychain.getGenericPassword();
+    const token = creds ? creds.password : null;
+
+    if (!token) {
+      Alert.alert("Error", "No token found. Please log in again.");
+      setLoading(false);
+      return;
+    }
+
+    const payload = {
+      bankAccountNumber,
+      bankName,
+      branchCode,
+    };
+
+    const res = await axios.post(
+      ORGRAGISTRATION, // your API endpoint
+      payload,
+      {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`, // 👈 token added here
+        },
+      }
+    );
+
+    console.log("✅ Organizer Registered:", res.data);
+    Alert.alert("Success", "Organizer registered successfully!");
+  } catch (err: any) {
+    console.error("❌ Register Error:", err?.response?.data || err.message);
+    Alert.alert("Error", "Failed to register. Please try again.");
+  } finally {
+    setLoading(false);
+  }
+};
+
+
+  return (
+    <KeyboardAvoidingView
+      style={{ flex: 1, backgroundColor: theme.background }}
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+    >
+      <ScrollView contentContainerStyle={styles.container}>
+        <Text style={styles.title}>Organizer Registration 📝</Text>
+
+        <TextInput
+          placeholder="Bank Account Number"
+          style={styles.input}
+          value={bankAccountNumber}
+          onChangeText={setBankAccountNumber}
+          keyboardType="numeric"
+        />
+
+        <TextInput
+          placeholder="Bank Name"
+          style={styles.input}
+          value={bankName}
+          onChangeText={setBankName}
+        />
+
+        <TextInput
+          placeholder="Branch Code"
+          style={styles.input}
+          value={branchCode}
+          onChangeText={setBranchCode}
+        />
+
+        <Pressable style={styles.button} onPress={handleSubmit} disabled={loading}>
+          <Text style={styles.buttonText}>{loading ? "Submitting..." : "Submit"}</Text>
+        </Pressable>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    justifyContent: "center",
+    padding: 20,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: "700",
+    color: theme.text,
+    marginBottom: 20,
+    textAlign: "center",
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: theme.outline,
+    borderRadius: 12,
+    padding: 14,
+    marginBottom: 15,
+    fontSize: 16,
+    backgroundColor: "#fff",
+  },
+  button: {
+    backgroundColor: theme.primary,
+    paddingVertical: 16,
+    borderRadius: 12,
+    alignItems: "center",
+  },
+  buttonText: {
+    color: "#fff",
+    fontWeight: "600",
+    fontSize: 16,
+  },
+});

src/screens/SplashScreen.tsx

@@ -1,12 +1,13 @@
-import React, { useEffect } from "react";
-import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
+import React, { useEffect, useRef } from "react";
+import { View, Text, StyleSheet, ActivityIndicator, Animated } from "react-native";
 import * as Keychain from "react-native-keychain";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { useNavigation } from "@react-navigation/native";
 import { RootStackParamList } from "../navigation/AppNavigator"; // adjust path
 
 const SplashScreen = () => {
-    const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+  const fadeAnim = useRef(new Animated.Value(1)).current; // opacity starts at 1
 
   useEffect(() => {
     const checkLogin = async () => {
@@ -16,7 +17,7 @@ const SplashScreen = () => {
           console.log("🔑 Found token:", creds.password);
           navigation.replace("Home"); // go to bottom tabs if logged in
         } else {
-          navigation.replace("Login"); // go to login if not logged in
+          navigation.replace("Login");
         }
       } catch (error) {
         console.error("Error checking login:", error);
@@ -24,12 +25,22 @@ const SplashScreen = () => {
       }
     };
 
-    setTimeout(checkLogin, 1500); // show splash for 1.5s
-  }, [navigation]);
+    // Start fade out animation
+    Animated.timing(fadeAnim, {
+      toValue: 0,
+      duration: 1500, // fade out in 1.5s
+      useNativeDriver: true,
+      delay: 1500, // wait before fading
+    }).start(() => {
+      checkLogin(); // only navigate after animation
+    });
+  }, [navigation, fadeAnim]);
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Circle Collect</Text>
+      <Animated.Text style={[styles.title, { opacity: fadeAnim }]}>
+        Circle Collect
+      </Animated.Text>
       <ActivityIndicator size="large" color="#FF7A00" style={{ marginTop: 20 }} />
     </View>
   );
@@ -42,7 +53,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#111111",
+    backgroundColor: "#FFFFFF", // white background
   },
   title: {
     fontSize: 28,

src/screens/profile/Profile.tsx

@@ -10,113 +10,16 @@ import {
   ActivityIndicator,
   StatusBar,
   TextInput,
+  KeyboardAvoidingView,
+  Platform,
 } from "react-native";
 import * as Keychain from "react-native-keychain";
-import {Ionicons} from "@react-native-vector-icons/ionicons";
+import { Ionicons } from "@react-native-vector-icons/ionicons";
 import { launchImageLibrary } from "react-native-image-picker";
-import { IconProps } from "react-native-elements";
 import { base_URL } from "../../utils/ApiUrls";
+import { CustomButton, CustomInput } from "../../components/common/Custom";
 
 
-type CustomButtonProps = {
-  title: string;
-  onPress: () => void;
-  type?: "primary" | "secondary" | "danger" | "outline";
-  icon?: React.ComponentProps<typeof Ionicons>['name'];
-  style?: any;
-};
-
-const CustomButton = ({ 
-  title, 
-  onPress, 
-  type = "primary", 
-  icon,
-  style 
-}: CustomButtonProps) => {
-  const getButtonStyle = () => {
-    switch (type) {
-      case "secondary":
-        return [styles.button, styles.buttonSecondary];
-      case "danger":
-        return [styles.button, styles.buttonDanger];
-      case "outline":
-        return [styles.button, styles.buttonOutline];
-      default:
-        return styles.button;
-    }
-  };
-
-  const getTextStyle = () => {
-    switch (type) {
-      case "secondary":
-        return [styles.buttonText, styles.buttonTextSecondary];
-      case "danger":
-        return [styles.buttonText, styles.buttonTextDanger];
-      case "outline":
-        return [styles.buttonText, styles.buttonTextOutline];
-      default:
-        return styles.buttonText;
-    }
-  };
-
-  return (
-    <TouchableOpacity 
-      style={[getButtonStyle(), style]} 
-      onPress={onPress}
-      activeOpacity={0.8}
-    >
-      {icon && (
-        <Ionicons
-          name={icon}
-          size={18}
-          color={
-            Array.isArray(getTextStyle())
-              ? getTextStyle().find((s: any) => s && typeof s === "object" && "color" in s)?.color || "#fff"
-              : (getTextStyle() as any).color || "#fff"
-          }
-          style={styles.buttonIcon}
-        />
-      )}
-      <Text style={getTextStyle()}>{title}</Text>
-    </TouchableOpacity>
-  );
-};
-
-// Custom Input Component
-type CustomInputProps = {
-  label?: string;
-  placeholder?: string;
-  value?: string;
-  onChangeText?: (text: string) => void;
-  icon?: React.ComponentProps<typeof Ionicons>['name'];
-  [key: string]: any;
-};
-
-const CustomInput = ({ 
-  label, 
-  placeholder, 
-  value, 
-  onChangeText, 
-  icon,
-  ...props 
-}: CustomInputProps) => {
-  return (
-    <View style={styles.inputContainer}>
-      {label && <Text style={styles.inputLabel}>{label}</Text>}
-      <View style={styles.inputWrapper}>
-        {icon && <Ionicons name={icon} size={20} color="#666" style={styles.inputIcon} />}
-        <TextInput
-          style={[styles.input, icon && styles.inputWithIcon]}
-          placeholder={placeholder}
-          placeholderTextColor="#999"
-          value={value}
-          onChangeText={onChangeText}
-          {...props}
-        />
-      </View>
-    </View>
-  );
-};
 
 type UserProfile = {
   id: string;
@@ -236,64 +139,64 @@ const Profile = () => {
   };
 
   const handleUpdateImage = async () => {
-  try {
-    const credentials = await Keychain.getGenericPassword();
-    if (!credentials) {
-      Alert.alert("Error", "You are not logged in");
-      return;
-    }
-    const token = credentials.password;
-
-    if (!user?.filePath) {
-      Alert.alert("Error", "Please select an image first");
-      return;
-    }
-
-    setImageUpdating(true);
-
-    const formData = new FormData();
-    formData.append("file", {
-      uri: user.filePath,
-      type: "image/jpeg",
-      name: "profile.jpg",
-    } as any);
-
-    const response = await fetch(
-      `${base_URL}user/update/userImg`,
-      {
-        method: "PUT",
-        headers: {
-          Accept: "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-        body: formData,
+    try {
+      const credentials = await Keychain.getGenericPassword();
+      if (!credentials) {
+        Alert.alert("Error", "You are not logged in");
+        return;
       }
-    );
+      const token = credentials.password;
 
-    const result = await response.json();
-    if (result.status === "success") {
-      Alert.alert("Success", "Profile image updated successfully");
+      if (!user?.filePath) {
+        Alert.alert("Error", "Please select an image first");
+        return;
+      }
 
-      // If API returns updated image, set it
-      if (result.data?.imageBlob) {
-        setUser((prev) => prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev);
+      setImageUpdating(true);
+
+      const formData = new FormData();
+      formData.append("file", {
+        uri: user.filePath,
+        type: "image/jpeg",
+        name: "profile.jpg",
+      } as any);
+
+      const response = await fetch(
+        `${base_URL}user/update/userImg`,
+        {
+          method: "PUT",
+          headers: {
+            Accept: "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: formData,
+        }
+      );
+
+      const result = await response.json();
+      if (result.status === "success") {
+        Alert.alert("Success", "Profile image updated successfully");
+
+        // If API returns updated image, set it
+        if (result.data?.imageBlob) {
+          setUser((prev) => prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev);
+        } else {
+          // Otherwise, keep the local filePath until next fetch
+          setUser((prev) => prev ? { ...prev, filePath: user.filePath } : prev);
+        }
+
+        // Refresh profile from API as well
+        fetchUserProfile();
       } else {
-        // Otherwise, keep the local filePath until next fetch
-        setUser((prev) => prev ? { ...prev, filePath: user.filePath } : prev);
+        Alert.alert("Error", result.message || "Failed to update profile image");
       }
-
-      // Refresh profile from API as well
-      fetchUserProfile();
-    } else {
-      Alert.alert("Error", result.message || "Failed to update profile image");
+    } catch (error) {
+      console.error("❌ Error updating profile image:", error);
+      Alert.alert("Error", "Could not update profile image");
+    } finally {
+      setImageUpdating(false);
     }
-  } catch (error) {
-    console.error("❌ Error updating profile image:", error);
-    Alert.alert("Error", "Could not update profile image");
-  } finally {
-    setImageUpdating(false);
-  }
-};
+  };
 
 
   useEffect(() => {
@@ -301,15 +204,15 @@ const Profile = () => {
   }, []);
 
   console.log("user image :", user?.filePath);
-const getProfileImage = () => {
-  if (user?.imageBlob) {
-    return `data:image/jpeg;base64,${user.imageBlob}`;
-  }
-  if (user?.filePath) {
-    return user.filePath;
-  }
-  return "https://randomuser.me/api/portraits/men/1.jpg";
-};
+  const getProfileImage = () => {
+    if (user?.imageBlob) {
+      return `data:image/jpeg;base64,${user.imageBlob}`;
+    }
+    if (user?.filePath) {
+      return user.filePath;
+    }
+    return "https://randomuser.me/api/portraits/men/1.jpg";
+  };
 
 
   if (fetching || !user) {
@@ -324,7 +227,7 @@ const getProfileImage = () => {
   return (
     <View style={styles.container}>
       <StatusBar backgroundColor="#6366f1" barStyle="light-content" />
-      
+
       {/* Header */}
       <View style={styles.header}>
         <Text style={styles.headerTitle}>User Profile</Text>
@@ -332,201 +235,207 @@ const getProfileImage = () => {
           <Ionicons name="refresh" size={24} color="#fff" />
         </TouchableOpacity>
       </View>
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+      >
+        <ScrollView
+          contentContainerStyle={{ flexGrow: 1 }}
+          keyboardShouldPersistTaps="handled"
+        >
+          {/* Profile Card */}
+          <View style={styles.profileCard}>
+            {/* Profile Image Section */}
+            <View style={styles.profileImageSection}>
+              <View style={styles.avatarContainer}>
+                <Image
+                  source={{ uri: getProfileImage() }}
+                  style={styles.avatar}
+                  onError={() => console.log("Error loading image")}
+                />
+                <TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
+                  <Ionicons name="camera" size={18} color="white" />
+                </TouchableOpacity>
+              </View>
 
-      <ScrollView style={styles.scrollContainer}>
-        {/* Profile Card */}
-        <View style={styles.profileCard}>
-          {/* Profile Image Section */}
-          <View style={styles.profileImageSection}>
-            <View style={styles.avatarContainer}>
-              <Image 
-                source={{ uri: getProfileImage()  }} 
-                style={styles.avatar} 
-                onError={() => console.log("Error loading image")}
-              />
-              <TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
-                <Ionicons name="camera" size={18} color="white" />
-              </TouchableOpacity>
-            </View>
-            
-            <CustomButton 
-              title={imageUpdating ? "Updating..." : "Update Image"} 
-              onPress={handleUpdateImage}
-              icon={imageUpdating ? undefined : "cloud-upload"}
-              style={styles.updateImageButton}
+              <CustomButton
+                title={imageUpdating ? "Updating..." : "Update Image"}
+                onPress={handleUpdateImage}
+                icon={imageUpdating ? undefined : "cloud-upload"}
+                style={styles.updateImageButton}
               // disabled={imageUpdating}
-            />
-          </View>
 
-          {!editing ? (
-            <>
-              {/* Profile Details */}
-              <View style={styles.detailsSection}>
-                <Text style={styles.sectionTitle}>Personal Information</Text>
-                <View style={{ marginBottom: 16 }}>
-                  
-                  <Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
-                </View>
-
-                <View style={styles.detailRow}>
-                  <Ionicons name="person" size={20} color="#6366f1" style={styles.detailIcon} />
-                  <View>
-                    <Text style={styles.detailLabel}>Name</Text>
-                    <Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
-                  </View>
-                </View>
-                
-                <View style={styles.detailRow}>
-                  <Ionicons name="mail" size={20} color="#6366f1" style={styles.detailIcon} />
-                  <View>
-                    <Text style={styles.detailLabel}>Email</Text>
-                    <Text style={styles.detailText}>{user.email || "Not provided"}</Text>
-                  </View>
-                </View>
-                
-                <View style={styles.detailRow}>
-                  <Ionicons name="call" size={20} color="#6366f1" style={styles.detailIcon} />
-                  <View>
-                    <Text style={styles.detailLabel}>Mobile</Text>
-                    <Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
-                  </View>
-                </View>
-                
-                <View style={styles.detailRow}>
-                  <Ionicons name="at-circle" size={20} color="#6366f1" style={styles.detailIcon} />
-                  <View>
-                    <Text style={styles.detailLabel}>Username</Text>
-                    <Text style={styles.detailText}>{user.username}</Text>
-                  </View>
-                </View>
-                
-                <View style={styles.detailRow}>
-                  <Ionicons name="location" size={20} color="#6366f1" style={styles.detailIcon} />
-                  <View>
-                    <Text style={styles.detailLabel}>Address</Text>
-                    <Text style={styles.detailText}>{user.address || "Not provided"}</Text>
-                  </View>
-                </View>
-                
-                <View style={styles.detailRow}>
-                  <Ionicons name="male-female" size={20} color="#6366f1" style={styles.detailIcon} />
-                  <View>
-                    <Text style={styles.detailLabel}>Gender</Text>
-                    <Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
-                  </View>
-                </View>
-                
-                <View style={styles.detailRow}>
-                  <Ionicons name="key" size={20} color="#6366f1" style={styles.detailIcon} />
-                  <View>
-                    <Text style={styles.detailLabel}>Role</Text>
-                    <Text style={styles.detailText}>{user.role || "User"}</Text>
-                  </View>
-                </View>
-              </View>
-
-              <CustomButton 
-                title="Edit Profile" 
-                onPress={() => setEditing(true)}
-                icon="create"
-                style={styles.editButton}
               />
-            </>
-          ) : (
-            <>
-              {/* Edit Form */}
-              <View style={styles.editSection}>
-                <Text style={styles.sectionTitle}>Edit Profile</Text>
-                
-                <CustomInput
-                  label="First Name"
-                  placeholder="Enter first name"
-                  value={user.firstName ?? ""}
-                  onChangeText={(text) => setUser({ ...user, firstName: text })}
-                  icon="person"
-                />
-                
-                <CustomInput
-                  label="Last Name"
-                  placeholder="Enter last name"
-                  value={user.lastName ?? ""}
-                  onChangeText={(text) => setUser({ ...user, lastName: text })}
-                  icon="person"
-                />
-                
-                <CustomInput
-                  label="Email"
-                  placeholder="Enter email"
-                  value={user.email ?? ""}
-                  onChangeText={(text) => setUser({ ...user, email: text })}
-                  icon="mail"
-                  keyboardType="email-address"
-                />
-                
-                <CustomInput
-                  label="Username"
-                  placeholder="Enter username"
-                  value={user.username ?? ""}
-                  onChangeText={(text) => setUser({ ...user, username: text })}
-                  icon="at"
-                />
-                
-                <CustomInput
-                  label="Address"
-                  placeholder="Enter address"
-                  value={user.address ?? ""}
-                  onChangeText={(text) => setUser({ ...user, address: text })}
-                  icon="location"
-                  multiline
-                />
-                
-                <CustomInput
-                  label="Gender"
-                  placeholder="Enter gender"
-                  value={user.gender ?? ""}
-                  onChangeText={(text) => setUser({ ...user, gender: text })}
-                  icon="male-female"
-                />
-              </View>
+            </View>
+
+            {!editing ? (
+              <>
+                {/* Profile Details */}
+                <View style={styles.detailsSection}>
+                  <Text style={styles.sectionTitle}>Personal Information</Text>
+                  <View style={{ marginBottom: 16 }}>
+
+                    <Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
+                  </View>
+
+                  <View style={styles.detailRow}>
+                    <Ionicons name="person" size={20} color="#6366f1" style={styles.detailIcon} />
+                    <View>
+                      <Text style={styles.detailLabel}>Name</Text>
+                      <Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
+                    </View>
+                  </View>
+
+                  <View style={styles.detailRow}>
+                    <Ionicons name="mail" size={20} color="#6366f1" style={styles.detailIcon} />
+                    <View>
+                      <Text style={styles.detailLabel}>Email</Text>
+                      <Text style={styles.detailText}>{user.email || "Not provided"}</Text>
+                    </View>
+                  </View>
+
+                  <View style={styles.detailRow}>
+                    <Ionicons name="call" size={20} color="#6366f1" style={styles.detailIcon} />
+                    <View>
+                      <Text style={styles.detailLabel}>Mobile</Text>
+                      <Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
+                    </View>
+                  </View>
+
+                  <View style={styles.detailRow}>
+                    <Ionicons name="at-circle" size={20} color="#6366f1" style={styles.detailIcon} />
+                    <View>
+                      <Text style={styles.detailLabel}>Username</Text>
+                      <Text style={styles.detailText}>{user.username}</Text>
+                    </View>
+                  </View>
+
+                  <View style={styles.detailRow}>
+                    <Ionicons name="location" size={20} color="#6366f1" style={styles.detailIcon} />
+                    <View>
+                      <Text style={styles.detailLabel}>Address</Text>
+                      <Text style={styles.detailText}>{user.address || "Not provided"}</Text>
+                    </View>
+                  </View>
+
+                  <View style={styles.detailRow}>
+                    <Ionicons name="male-female" size={20} color="#6366f1" style={styles.detailIcon} />
+                    <View>
+                      <Text style={styles.detailLabel}>Gender</Text>
+                      <Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
+                    </View>
+                  </View>
+
+                  <View style={styles.detailRow}>
+                    <Ionicons name="key" size={20} color="#6366f1" style={styles.detailIcon} />
+                    <View>
+                      <Text style={styles.detailLabel}>Role</Text>
+                      <Text style={styles.detailText}>{user.role || "User"}</Text>
+                    </View>
+                  </View>
+                </View>
 
-              <View style={styles.editButtons}>
-                <CustomButton 
-                  title="Save Changes" 
-                  onPress={updateProfile}
-                  icon="save"
-                  style={styles.saveButton}
-                />
                 <CustomButton
-                  title="Cancel"
-                  type="outline"
-                  onPress={() => setEditing(false)}
-                  icon="close"
-                  style={styles.cancelButton}
+                  title="Edit Profile"
+                  onPress={() => setEditing(true)}
+                  icon="create"
+                  style={styles.editButton}
                 />
-              </View>
-            </>
-          )}
-        </View>
-      </ScrollView>
+              </>
+            ) : (
+              <>
+                {/* Edit Form */}
+                <View style={styles.editSection}>
+                  <Text style={styles.sectionTitle}>Edit Profile</Text>
+
+                  <CustomInput
+                    label="First Name"
+                    placeholder="Enter first name"
+                    value={user.firstName ?? ""}
+                    onChangeText={(text) => setUser({ ...user, firstName: text })}
+                    icon="person"
+                  />
+
+                  <CustomInput
+                    label="Last Name"
+                    placeholder="Enter last name"
+                    value={user.lastName ?? ""}
+                    onChangeText={(text) => setUser({ ...user, lastName: text })}
+                    icon="person"
+                  />
+
+                  <CustomInput
+                    label="Email"
+                    placeholder="Enter email"
+                    value={user.email ?? ""}
+                    onChangeText={(text) => setUser({ ...user, email: text })}
+                    icon="mail"
+                    keyboardType="email-address"
+                  />
+
+                  <CustomInput
+                    label="Username"
+                    placeholder="Enter username"
+                    value={user.username ?? ""}
+                    onChangeText={(text) => setUser({ ...user, username: text })}
+                    icon="at"
+                  />
+                  <CustomInput
+                    label="Address"
+                    placeholder="Enter address"
+                    value={user.address ?? ""}
+                    onChangeText={(text) => setUser({ ...user, address: text })}
+                    icon="location"
+                    multiline
+                  />
+                  <CustomInput
+                    label="Gender"
+                    placeholder="Enter gender"
+                    value={user.gender ?? ""}
+                    onChangeText={(text) => setUser({ ...user, gender: text })}
+                    icon="male-female"
+                  />
+                </View>
+                <View style={styles.editButtons}>
+                  <CustomButton
+                    title="Save Changes"
+                    onPress={updateProfile}
+                    icon="save"
+                    style={styles.saveButton}
+                  />
+                  <CustomButton
+                    title="Cancel"
+                    type="outline"
+                    onPress={() => setEditing(false)}
+                    icon="close"
+                    style={styles.cancelButton}
+                  />
+                </View>
+              </>
+            )}
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  container: { 
-    flex: 1, 
-    backgroundColor: "#f8fafc" 
+  container: {
+    flex: 1,
+    backgroundColor: "#f8fafc",
+    marginBottom: '30%',
   },
-  loadingContainer: { 
-    flex: 1, 
-    justifyContent: "center", 
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
     alignItems: "center",
     backgroundColor: "#f8fafc"
   },
-  loadingText: { 
-    marginTop: 10, 
-    fontSize: 16, 
-    color: "#64748b" 
+  loadingText: {
+    marginTop: 10,
+    fontSize: 16,
+    color: "#64748b"
   },
   header: {
     flexDirection: "row",
@@ -543,17 +452,15 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.2,
     shadowRadius: 4,
   },
-  headerTitle: { 
-    fontSize: 22, 
-    fontWeight: "700", 
-    color: "#fff" 
+  headerTitle: {
+    fontSize: 22,
+    fontWeight: "700",
+    color: "#fff"
   },
   refreshButton: {
     padding: 4,
   },
-  scrollContainer: {
-    flex: 1,
-  },
+
   profileCard: {
     borderRadius: 20,
     margin: 16,
@@ -576,10 +483,10 @@ const styles = StyleSheet.create({
     position: "relative",
     marginBottom: 16,
   },
-  avatar: { 
-    width: 120, 
-    height: 120, 
-    borderRadius: 60, 
+  avatar: {
+    width: 120,
+    height: 120,
+    borderRadius: 60,
     borderWidth: 4,
     borderColor: "#e2e8f0",
   },
@@ -636,6 +543,7 @@ const styles = StyleSheet.create({
   },
   editSection: {
     marginBottom: 20,
+    flex: 1,
   },
   editButtons: {
     gap: 12,