common component

App.tsx

@@ -12,13 +12,16 @@ import {
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import AppNavigator from './src/navigation/AppNavigator';
+import { PaperProvider } from 'react-native-paper';
 
 function App() {
   const isDarkMode = useColorScheme() === 'dark';
   
   return (
     <SafeAreaProvider>
-      <AppNavigator />
+      <PaperProvider>
+        <AppNavigator />
+      </PaperProvider>
     </SafeAreaProvider>
   );
 }

android/app/src/main/AndroidManifest.xml

@@ -1,26 +1,35 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <uses-permission android:name="android.permission.INTERNET" />
+  <uses-permission android:name="android.permission.INTERNET" />
 
-    <application
+  <application
-      android:name=".MainApplication"
+    android:name=".MainApplication"
+    android:label="@string/app_name"
+    android:icon="@mipmap/ic_launcher"
+    android:roundIcon="@mipmap/ic_launcher_round"
+    android:allowBackup="false"
+    android:theme="@style/AppTheme"
+    android:supportsRtl="true">
+    <activity
+      android:name=".MainActivity"
       android:label="@string/app_name"
-      android:icon="@mipmap/ic_launcher"
+      android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
-      android:roundIcon="@mipmap/ic_launcher_round"
+      android:launchMode="singleTask"
-      android:allowBackup="false"
+      android:windowSoftInputMode="adjustResize"
-      android:theme="@style/AppTheme"
+      android:exported="true">
-      android:supportsRtl="true">
+      <intent-filter>
-      <activity
+        <action android:name="android.intent.action.MAIN" />
-        android:name=".MainActivity"
+        <category android:name="android.intent.category.LAUNCHER" />
-        android:label="@string/app_name"
+      </intent-filter>
-        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
+      <intent-filter android:autoVerify="true">
-        android:launchMode="singleTask"
+        <action android:name="android.intent.action.VIEW" />
-        android:windowSoftInputMode="adjustResize"
+        <category android:name="android.intent.category.DEFAULT" />
-        android:exported="true">
+        <category android:name="android.intent.category.BROWSABLE" />
-        <intent-filter>
+        <data android:scheme="https"
-            <action android:name="android.intent.action.MAIN" />
+          android:host="api.godemo.in"
-            <category android:name="android.intent.category.LAUNCHER" />
+          android:pathPrefix="/EProcurementSB" />
-        </intent-filter>
+      </intent-filter>
-      </activity>
+
-    </application>
+    </activity>
+  </application>
 </manifest>

package-lock.json

@@ -9,7 +9,9 @@
       "version": "0.0.1",
       "dependencies": {
         "@react-native-async-storage/async-storage": "^2.2.0",
+        "@react-native-picker/picker": "^2.11.2",
         "@react-native-vector-icons/ionicons": "^12.3.0",
+        "@react-native-vector-icons/material-icons": "^12.3.0",
         "@react-native/new-app-screen": "0.81.1",
         "@react-navigation/bottom-tabs": "^7.4.7",
         "@react-navigation/elements": "^2.6.4",
@@ -24,8 +26,11 @@
         "react-native-elements": "^3.4.3",
         "react-native-image-picker": "^8.2.1",
         "react-native-keychain": "^10.0.0",
+        "react-native-linear-gradient": "^2.8.3",
+        "react-native-paper": "^5.14.5",
         "react-native-safe-area-context": "^5.6.1",
-        "react-native-screens": "^4.16.0"
+        "react-native-screens": "^4.16.0",
+        "react-native-walkthrough-tooltip": "^1.6.0"
       },
       "devDependencies": {
         "@babel/core": "^7.25.2",
@@ -1997,6 +2002,28 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@callstack/react-theme-provider": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz",
+      "integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@egjs/hammerjs": {
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
@@ -2953,6 +2980,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/@react-native-picker/picker": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.11.2.tgz",
+      "integrity": "sha512-2zyFdW4jgHjF+NeuDZ4nl3hJ+8suey69bI3yljqhNyowfklW2NwNrdDUaJ2iwtPCpk2pt7834aPF8TI6iyZRhA==",
+      "license": "MIT",
+      "workspaces": [
+        "example"
+      ],
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@react-native-vector-icons/common": {
       "version": "12.3.0",
       "resolved": "https://registry.npmjs.org/@react-native-vector-icons/common/-/common-12.3.0.tgz",
@@ -3079,6 +3119,22 @@
         "react-native": "*"
       }
     },
+    "node_modules/@react-native-vector-icons/material-icons": {
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/@react-native-vector-icons/material-icons/-/material-icons-12.3.0.tgz",
+      "integrity": "sha512-W9rhgfc8zKKXhZa/099un/RSNFgO6aHhJR2r6rodvTlO+ZRXq2GbU38CMBwhomJxyErcfmlR7En6wSdtLykYVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-native-vector-icons/common": "^12.3.0"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.81.1",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.1.tgz",
@@ -13059,6 +13115,12 @@
         }
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
+      "license": "MIT"
+    },
     "node_modules/react-freeze": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz",
@@ -13204,6 +13266,36 @@
         "node": ">=16"
       }
     },
+    "node_modules/react-native-linear-gradient": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz",
+      "integrity": "sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-paper": {
+      "version": "5.14.5",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.14.5.tgz",
+      "integrity": "sha512-eaIH5bUQjJ/mYm4AkI6caaiyc7BcHDwX6CqNDi6RIxfxfWxROsHpll1oBuwn/cFvknvA8uEAkqLk/vzVihI3AQ==",
+      "license": "MIT",
+      "workspaces": [
+        "example",
+        "docs"
+      ],
+      "dependencies": {
+        "@callstack/react-theme-provider": "^3.0.9",
+        "color": "^3.1.2",
+        "use-latest-callback": "^0.2.3"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": "*"
+      }
+    },
     "node_modules/react-native-ratings": {
       "version": "8.0.4",
       "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-8.0.4.tgz",
@@ -13310,6 +13402,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-native-walkthrough-tooltip": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/react-native-walkthrough-tooltip/-/react-native-walkthrough-tooltip-1.6.0.tgz",
+      "integrity": "sha512-8DHpcqsF+2VULYnKJCSZtllhlFUFiZcWCwOlw5RLkS451ElxPWJn9ShOFVZtkPMcwQAirq3SovumVM7Y/li0Fw==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.6.1",
+        "react-fast-compare": "^2.0.4"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8.24"
+      }
+    },
     "node_modules/react-native/node_modules/commander": {
       "version": "12.1.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",

package.json

@@ -11,7 +11,9 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-picker/picker": "^2.11.2",
     "@react-native-vector-icons/ionicons": "^12.3.0",
+    "@react-native-vector-icons/material-icons": "^12.3.0",
     "@react-native/new-app-screen": "0.81.1",
     "@react-navigation/bottom-tabs": "^7.4.7",
     "@react-navigation/elements": "^2.6.4",
@@ -26,8 +28,11 @@
     "react-native-elements": "^3.4.3",
     "react-native-image-picker": "^8.2.1",
     "react-native-keychain": "^10.0.0",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-paper": "^5.14.5",
     "react-native-safe-area-context": "^5.6.1",
-    "react-native-screens": "^4.16.0"
+    "react-native-screens": "^4.16.0",
+    "react-native-walkthrough-tooltip": "^1.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

src/components/AppView.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { StatusBar, StyleSheet, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+type AppViewProps = {
+  children: React.ReactNode;
+  backgroundColor?: string;
+  barStyle?: "default" | "light-content" | "dark-content";
+};
+
+export default function AppView({
+  children,
+  backgroundColor = "#f5f5f5",
+  barStyle = "dark-content",
+}: AppViewProps) {
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor }]}>
+      <StatusBar
+        translucent={false}
+        backgroundColor={backgroundColor}
+        barStyle={barStyle}
+      />
+      <View style={styles.container}>{children}</View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 8,
+  },
+});

src/components/CustomButton.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet, ActivityIndicator, ViewStyle } from "react-native";
+
+type CustomButtonProps = {
+  title: string;
+  onPress: () => void;
+  backgroundColor?: string;
+  textColor?: string;
+  loading?: boolean;
+  style?: ViewStyle;
+};
+
+export default function CustomButton({
+  title,
+  onPress,
+  backgroundColor = "#6C63FF",
+  textColor = "#fff",
+  loading = false,
+  style,
+}: CustomButtonProps) {
+  return (
+    <TouchableOpacity
+      style={[styles.button, { backgroundColor }, style]}
+      onPress={onPress}
+      disabled={loading}
+      activeOpacity={0.8}
+    >
+      {loading ? (
+        <ActivityIndicator color={textColor} />
+      ) : (
+        <Text style={[styles.text, { color: textColor }]}>{title}</Text>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    marginVertical: 5,
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+});

src/components/common/Custom.tsx

@@ -6,12 +6,15 @@ import {
   TextInput,
   TouchableOpacity,
 } from "react-native";
+import { TextInputProps } from "react-native";
+import {Ionicons} from "@react-native-vector-icons/ionicons";
 
-type CustomInputProps = {
+type CustomInputProps = TextInputProps & {
   label: string;
   value: string;
   placeholder: string;
   onChangeText: (text: string) => void;
+  icon?: string;
 };
 
 const CustomInput: React.FC<CustomInputProps> = ({
@@ -19,29 +22,38 @@ const CustomInput: React.FC<CustomInputProps> = ({
   value,
   placeholder,
   onChangeText,
+  icon,
+  ...rest
 }) => (
   <View style={styles.inputContainer}>
     <Text style={styles.inputLabel}>{label}</Text>
-    <TextInput
+    <View style={styles.inputWrapper}>
-      style={styles.input}
+      {icon && <Ionicons name={icon} size={20} color="#555" style={styles.inputIcon} />}
-      placeholder={placeholder}
+      <TextInput
-      value={value}
+        style={[styles.input, icon && { paddingLeft: 36 }]}
-      placeholderTextColor="#999"
+        placeholder={placeholder}
-      onChangeText={onChangeText}
+        value={value}
-    />
+        placeholderTextColor="#999"
+        onChangeText={onChangeText}
+        {...rest}
+      />
+    </View>
   </View>
 );
 
 type CustomButtonProps = {
   title: string;
   onPress: () => void;
-  type?: "primary" | "secondary" | "danger";
+  type?: "primary" | "secondary" | "danger" | "outline";
+  icon?: string | null;
+  style?: object;
 };
 
 const CustomButton: React.FC<CustomButtonProps> = ({
   title,
   onPress,
   type = "primary",
+  icon,
 }) => (
   <TouchableOpacity
     style={[
@@ -52,15 +64,18 @@ const CustomButton: React.FC<CustomButtonProps> = ({
     onPress={onPress}
     activeOpacity={0.8}
   >
-    <Text
+    <View style={styles.buttonContent}>
-      style={[
+      {icon && <Ionicons name={icon || 'user'} size={20} color={type === "secondary" ? "#333" : "#fff"} style={{ marginRight: 8 }} />}
-        styles.buttonText,
+      <Text
-        type === "secondary" && styles.buttonTextSecondary,
+        style={[
-        type === "danger" && styles.buttonTextDanger,
+          styles.buttonText,
-      ]}
+          type === "secondary" && styles.buttonTextSecondary,
-    >
+          type === "danger" && styles.buttonTextDanger,
-      {title}
+        ]}
-    </Text>
+      >
+        {title}
+      </Text>
+    </View>
   </TouchableOpacity>
 );
 
@@ -110,11 +125,23 @@ const styles = StyleSheet.create({
   },
   inputContainer: { marginBottom: 12 },
   inputLabel: { fontSize: 14, fontWeight: "500", color: "#555", marginBottom: 6 },
+  inputWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    position: "relative",
+  },
+  inputIcon: {
+    position: "absolute",
+    left: 10,
+    zIndex: 1,
+  },
   input: {
+    flex: 1,
     borderWidth: 1,
     borderColor: "#ddd",
     borderRadius: 10,
     padding: 12,
+    paddingLeft: 12,
     backgroundColor: "#fdfdfd",
     color: "#000",
     fontSize: 15,
@@ -136,9 +163,13 @@ const styles = StyleSheet.create({
   buttonDanger: {
     backgroundColor: "#ff3b30",
   },
+  buttonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
   buttonText: { color: "#fff", fontSize: 16, fontWeight: "600" },
   buttonTextSecondary: { color: "#333" },
   buttonTextDanger: { color: "#fff" },
 });
 
-export { CustomInput, CustomButton, styles };
+export { CustomInput, styles, CustomButton };

src/navigation/AppNavigator.tsx

@@ -4,9 +4,12 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { View, Text, Button } from "react-native";
 import LoginScreen from "../screens/LoginScreen";
 import OtpVerificationScreen from "../screens/OtpVarificationScreen";
-import BottomTabs from "./BottomTabs";
 import SplashScreen from "../screens/SplashScreen";
 import Profile from "../screens/profile/Profile";
+import OrganizerRegisterScreen from "../screens/OrgnizerRagister";
+import GroupCreation from "../screens/GroupCreation";
+import GroupReview from "../screens/GroupReview";
+import BottomTabs from "./BottomTabs";
 
 const Stack = createNativeStackNavigator();
 export type RootStackParamList = {
@@ -15,6 +18,10 @@ export type RootStackParamList = {
   Home: undefined
   HomeTabs: undefined
   splash: undefined
+  OrganizerRegister:undefined
+  Profile: undefined;
+  GroupCreation: undefined;
+  GroupReview: undefined;
 
 };
 
@@ -32,14 +39,25 @@ function HomeScreen() {
 
 
 export default function AppNavigator() {
+  const linking = {
+  prefixes: ["myapp://", "https://api.godemo.in"], // supports both
+  config: {
+    screens: {
+       Profile: "EProcurementSB", // dynamic route
+    },
+  },
+};
   return (
-    <NavigationContainer>
+    <NavigationContainer linking={linking}  >
       <Stack.Navigator initialRouteName="Splash">
         <Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }} />
         <Stack.Screen name="Home" component={BottomTabs} options={{ headerShown: false }} />
         <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
         <Stack.Screen name="OtpVarify" component={OtpVerificationScreen} options={{ headerShown: false }} />
-        <Stack.Screen name="Profile" component={Profile} />
+         <Stack.Screen name="OrganizerRegister" component={OrganizerRegisterScreen}   options={{ headerShown: false }} />
+        <Stack.Screen name="Profile" component={Profile} options={{ headerShown: false }}/>
+         <Stack.Screen name="GroupCreation" component={GroupCreation}options={{ headerShown: false }} />
+         <Stack.Screen name="GroupReview" component={GroupReview}options={{ headerShown: false }} />
       </Stack.Navigator>
     </NavigationContainer>
   );

src/navigation/BottomTabs.tsx

@@ -1,24 +1,35 @@
 import React from "react";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { View, Text } from "react-native";
+import { View, Text, StyleSheet, Platform } from "react-native";
-import {Ionicons} from '@react-native-vector-icons/ionicons';
+import { Ionicons } from '@react-native-vector-icons/ionicons';
+import GroupScreen from "../screens/GroupScreen";
 import Profile from "../screens/profile/Profile";
 
 const Tab = createBottomTabNavigator();
 
-// Dummy screens for now
+const TAB_CONFIG = {
+  activeColor: "#eb87a3ff", // coffee-like orange
+  inactiveColor: "#000000ff",
+  backgroundColor: "#e3e9efff",
+  height: 80,
+  iconSize: 30,
+  labelSize: 12,
+  labelWeight: "600",
+};
+
+// Dummy Screens
 function HomeScreen() {
   return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+    <View style={styles.screen}>
-      <Text>🏠 Home</Text>
+      <Text style={styles.text}>🏠 Home</Text>
     </View>
   );
 }
 
 function SettingsScreen() {
   return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+    <View style={styles.screen}>
-      <Text>⚙️ Settings</Text>
+      <Text style={styles.text}>⚙️ Settings</Text>
     </View>
   );
 }
@@ -28,24 +39,72 @@ export default function BottomTabs() {
     <Tab.Navigator
       screenOptions={({ route }) => ({
         headerShown: false,
-        tabBarShowLabel: true,
+        tabBarStyle: styles.tabBar,
-        tabBarStyle: { backgroundColor: "#111", paddingBottom: 5, height: 60 },
+        tabBarActiveTintColor: TAB_CONFIG.activeColor,
-        tabBarActiveTintColor: "#FF7A00",
+        tabBarInactiveTintColor: TAB_CONFIG.inactiveColor,
-        tabBarInactiveTintColor: "gray",
+        tabBarLabelStyle: {
-        tabBarIcon: ({ color, size }) => {
+          fontSize: TAB_CONFIG.labelSize,
-          let iconName: React.ComponentProps<typeof Ionicons>['name'] = "home-outline";
+          fontWeight: TAB_CONFIG.labelWeight as any,
+          marginBottom: Platform.OS === "ios" ? 0 : 5,
+        },
+        tabBarIcon: ({ color, focused }) => {
+          let iconName:
+            | "home"
+            | "home-outline"
+            | "person"
+            | "person-outline"
+            | "settings"
+            | "settings-outline"
+            | "people"
+            | "people-outline" = "home-outline";
 
-          if (route.name === "Home") iconName = "home-outline";
+          if (route.name === "Home") iconName = focused ? "home" : "home-outline";
-          else if (route.name === "Profile") iconName = "person-outline";
+          else if (route.name === "Profile")
-          else if (route.name === "Settings") iconName = "settings-outline";
+            iconName = focused ? "person" : "person-outline";
+          else if (route.name === "Settings")
+            iconName = focused ? "settings" : "settings-outline";
+          else if (route.name === "Group")
+            iconName = focused ? "people" : "people-outline";
 
-          return <Ionicons name={iconName} size={size} color={color} />;
+          return <Ionicons name={iconName} size={TAB_CONFIG.iconSize} color={color} />;
         },
       })}
     >
       <Tab.Screen name="Home" component={HomeScreen} />
       <Tab.Screen name="Profile" component={Profile} />
+         <Tab.Screen name="Group" component={GroupScreen} />
       <Tab.Screen name="Settings" component={SettingsScreen} />
     </Tab.Navigator>
   );
 }
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#dae4ed",
+  },
+  text: {
+    fontSize: 20,
+    fontWeight: "600",
+    color: "#111",
+  },
+  tabBar: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: TAB_CONFIG.height,
+    backgroundColor: TAB_CONFIG.backgroundColor,
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+    shadowColor: "#000",
+    shadowOpacity: 0.10,
+    shadowOffset: { width: 0, height: -2 },
+    shadowRadius: 8,
+    elevation: 20,
+    paddingTop:10,
+    borderTopWidth: 0,
+  },
+});

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 React, { useEffect, useRef } from "react";
-import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
+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
+    // Start fade out animation
-  }, [navigation]);
+    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 {
+    try {
-    const credentials = await Keychain.getGenericPassword();
+      const credentials = await Keychain.getGenericPassword();
-    if (!credentials) {
+      if (!credentials) {
-      Alert.alert("Error", "You are not logged in");
+        Alert.alert("Error", "You are not logged in");
-      return;
+        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,
       }
-    );
+      const token = credentials.password;
 
-    const result = await response.json();
+      if (!user?.filePath) {
-    if (result.status === "success") {
+        Alert.alert("Error", "Please select an image first");
-      Alert.alert("Success", "Profile image updated successfully");
+        return;
+      }
 
-      // If API returns updated image, set it
+      setImageUpdating(true);
-      if (result.data?.imageBlob) {
+
-        setUser((prev) => prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev);
+      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
+        Alert.alert("Error", result.message || "Failed to update profile image");
-        setUser((prev) => prev ? { ...prev, filePath: user.filePath } : prev);
       }
-
+    } catch (error) {
-      // Refresh profile from API as well
+      console.error("❌ Error updating profile image:", error);
-      fetchUserProfile();
+      Alert.alert("Error", "Could not update profile image");
-    } else {
+    } finally {
-      Alert.alert("Error", result.message || "Failed to update profile image");
+      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 = () => {
+  const getProfileImage = () => {
-  if (user?.imageBlob) {
+    if (user?.imageBlob) {
-    return `data:image/jpeg;base64,${user.imageBlob}`;
+      return `data:image/jpeg;base64,${user.imageBlob}`;
-  }
+    }
-  if (user?.filePath) {
+    if (user?.filePath) {
-    return user.filePath;
+      return user.filePath;
-  }
+    }
-  return "https://randomuser.me/api/portraits/men/1.jpg";
+    return "https://randomuser.me/api/portraits/men/1.jpg";
-};
+  };
 
 
   if (fetching || !user) {
@@ -332,182 +235,187 @@ const getProfileImage = () => {
           <Ionicons name="refresh" size={24} color="#fff" />
         </TouchableOpacity>
       </View>
-
+      <KeyboardAvoidingView
-      <ScrollView style={styles.scrollContainer}>
+        style={{ flex: 1 }}
-        {/* Profile Card */}
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
-        <View style={styles.profileCard}>
+      >
-          {/* Profile Image Section */}
+        <ScrollView
-          <View style={styles.profileImageSection}>
+          contentContainerStyle={{ flexGrow: 1 }}
-            <View style={styles.avatarContainer}>
+          keyboardShouldPersistTaps="handled"
-              <Image 
+        >
-                source={{ uri: getProfileImage()  }} 
+          {/* Profile Card */}
-                style={styles.avatar} 
+          <View style={styles.profileCard}>
-                onError={() => console.log("Error loading image")}
+            {/* Profile Image Section */}
-              />
+            <View style={styles.profileImageSection}>
-              <TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
+              <View style={styles.avatarContainer}>
-                <Ionicons name="camera" size={18} color="white" />
+                <Image
-              </TouchableOpacity>
+                  source={{ uri: getProfileImage() }}
-            </View>
+                  style={styles.avatar}
-            
+                  onError={() => console.log("Error loading image")}
-            <CustomButton 
+                />
-              title={imageUpdating ? "Updating..." : "Update Image"} 
+                <TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
-              onPress={handleUpdateImage}
+                  <Ionicons name="camera" size={18} color="white" />
-              icon={imageUpdating ? undefined : "cloud-upload"}
+                </TouchableOpacity>
-              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" 
+                title={imageUpdating ? "Updating..." : "Update Image"}
-                onPress={() => setEditing(true)}
+                onPress={handleUpdateImage}
-                icon="create"
+                icon={imageUpdating ? undefined : "cloud-upload"}
-                style={styles.editButton}
+                style={styles.updateImageButton}
+              // disabled={imageUpdating}
+
               />
-            </>
+            </View>
-          ) : (
-            <>
-              {/* Edit Form */}
-              <View style={styles.editSection}>
-                <Text style={styles.sectionTitle}>Edit Profile</Text>
 
-                <CustomInput
+            {!editing ? (
-                  label="First Name"
+              <>
-                  placeholder="Enter first name"
+                {/* Profile Details */}
-                  value={user.firstName ?? ""}
+                <View style={styles.detailsSection}>
-                  onChangeText={(text) => setUser({ ...user, firstName: text })}
+                  <Text style={styles.sectionTitle}>Personal Information</Text>
-                  icon="person"
+                  <View style={{ marginBottom: 16 }}>
-                />
 
-                <CustomInput
+                    <Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
-                  label="Last Name"
+                  </View>
-                  placeholder="Enter last name"
-                  value={user.lastName ?? ""}
-                  onChangeText={(text) => setUser({ ...user, lastName: text })}
-                  icon="person"
-                />
 
-                <CustomInput
+                  <View style={styles.detailRow}>
-                  label="Email"
+                    <Ionicons name="person" size={20} color="#6366f1" style={styles.detailIcon} />
-                  placeholder="Enter email"
+                    <View>
-                  value={user.email ?? ""}
+                      <Text style={styles.detailLabel}>Name</Text>
-                  onChangeText={(text) => setUser({ ...user, email: text })}
+                      <Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
-                  icon="mail"
+                    </View>
-                  keyboardType="email-address"
+                  </View>
-                />
 
-                <CustomInput
+                  <View style={styles.detailRow}>
-                  label="Username"
+                    <Ionicons name="mail" size={20} color="#6366f1" style={styles.detailIcon} />
-                  placeholder="Enter username"
+                    <View>
-                  value={user.username ?? ""}
+                      <Text style={styles.detailLabel}>Email</Text>
-                  onChangeText={(text) => setUser({ ...user, username: text })}
+                      <Text style={styles.detailText}>{user.email || "Not provided"}</Text>
-                  icon="at"
+                    </View>
-                />
+                  </View>
 
-                <CustomInput
+                  <View style={styles.detailRow}>
-                  label="Address"
+                    <Ionicons name="call" size={20} color="#6366f1" style={styles.detailIcon} />
-                  placeholder="Enter address"
+                    <View>
-                  value={user.address ?? ""}
+                      <Text style={styles.detailLabel}>Mobile</Text>
-                  onChangeText={(text) => setUser({ ...user, address: text })}
+                      <Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
-                  icon="location"
+                    </View>
-                  multiline
+                  </View>
-                />
 
-                <CustomInput
+                  <View style={styles.detailRow}>
-                  label="Gender"
+                    <Ionicons name="at-circle" size={20} color="#6366f1" style={styles.detailIcon} />
-                  placeholder="Enter gender"
+                    <View>
-                  value={user.gender ?? ""}
+                      <Text style={styles.detailLabel}>Username</Text>
-                  onChangeText={(text) => setUser({ ...user, gender: text })}
+                      <Text style={styles.detailText}>{user.username}</Text>
-                  icon="male-female"
+                    </View>
-                />
+                  </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" 
+                  title="Edit Profile"
-                  onPress={updateProfile}
+                  onPress={() => setEditing(true)}
-                  icon="save"
+                  icon="create"
-                  style={styles.saveButton}
+                  style={styles.editButton}
                 />
-                <CustomButton
+              </>
-                  title="Cancel"
+            ) : (
-                  type="outline"
+              <>
-                  onPress={() => setEditing(false)}
+                {/* Edit Form */}
-                  icon="close"
+                <View style={styles.editSection}>
-                  style={styles.cancelButton}
+                  <Text style={styles.sectionTitle}>Edit Profile</Text>
-                />
+
-              </View>
+                  <CustomInput
-            </>
+                    label="First Name"
-          )}
+                    placeholder="Enter first name"
-        </View>
+                    value={user.firstName ?? ""}
-      </ScrollView>
+                    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>
   );
 };
@@ -515,7 +423,8 @@ const getProfileImage = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#f8fafc" 
+    backgroundColor: "#f8fafc",
+    marginBottom: '30%',
   },
   loadingContainer: {
     flex: 1,
@@ -551,9 +460,7 @@ const styles = StyleSheet.create({
   refreshButton: {
     padding: 4,
   },
-  scrollContainer: {
+
-    flex: 1,
-  },
   profileCard: {
     borderRadius: 20,
     margin: 16,
@@ -636,6 +543,7 @@ const styles = StyleSheet.create({
   },
   editSection: {
     marginBottom: 20,
+    flex: 1,
   },
   editButtons: {
     gap: 12,

src/utils/ApiHelper.tsx

@@ -0,0 +1,53 @@
+import axios, { AxiosRequestConfig } from "axios";
+import * as Keychain from "react-native-keychain";
+
+/**
+ * Generic API call function with proper error handling and optional auth.
+ * @param url - API endpoint
+ * @param method - HTTP method: GET, POST, PUT, DELETE
+ * @param data - Request body for POST/PUT
+ * @param config - Optional Axios config (headers, params, etc.)
+ */
+export async function apiCall<T>(
+  url: string,
+  method: "GET" | "POST" | "PUT" | "DELETE" = "GET",
+  data?: any,
+  config?: AxiosRequestConfig
+): Promise<T | null> {
+  try {
+    // Get saved credentials from Keychain
+    const creds = await Keychain.getGenericPassword();
+
+    const headers = {
+      "Content-Type": "application/json",
+      ...(creds ? { Authorization: `Bearer ${creds.password}` } : {}),
+      ...config?.headers,
+    };
+
+    const response = await axios({
+      url,
+      method,
+      data,
+      ...config,
+      headers,
+    });
+
+    return response.data;
+  } catch (error: any) {
+    if (error.response) {
+      // Server responded with a status other than 2xx
+      console.error(
+        "API Error:",
+        `Status: ${error.response.status}`,
+        `Data: ${JSON.stringify(error.response.data)}`
+      );
+    } else if (error.request) {
+      // Request was made but no response received
+      console.error("API Error: No response received", error.request);
+    } else {
+      // Something else went wrong while setting up the request
+      console.error("API Error:", error.message);
+    }
+    return null; // return null so the caller can handle it
+  }
+}