common component

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 {Ionicons} from '@react-native-vector-icons/ionicons';
+import { View, Text, StyleSheet, Platform } from "react-native";
+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" }}>
-      <Text>🏠 Home</Text>
+    <View style={styles.screen}>
+      <Text style={styles.text}>🏠 Home</Text>
     </View>
   );
 }
 
 function SettingsScreen() {
   return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <Text>⚙️ Settings</Text>
+    <View style={styles.screen}>
+      <Text style={styles.text}>⚙️ Settings</Text>
     </View>
   );
 }
@@ -28,24 +39,72 @@ export default function BottomTabs() {
     <Tab.Navigator
       screenOptions={({ route }) => ({
         headerShown: false,
-        tabBarShowLabel: true,
-        tabBarStyle: { backgroundColor: "#111", paddingBottom: 5, height: 60 },
-        tabBarActiveTintColor: "#FF7A00",
-        tabBarInactiveTintColor: "gray",
-        tabBarIcon: ({ color, size }) => {
-          let iconName: React.ComponentProps<typeof Ionicons>['name'] = "home-outline";
+        tabBarStyle: styles.tabBar,
+        tabBarActiveTintColor: TAB_CONFIG.activeColor,
+        tabBarInactiveTintColor: TAB_CONFIG.inactiveColor,
+        tabBarLabelStyle: {
+          fontSize: TAB_CONFIG.labelSize,
+          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";
-          else if (route.name === "Profile") iconName = "person-outline";
-          else if (route.name === "Settings") iconName = "settings-outline";
+          if (route.name === "Home") iconName = focused ? "home" : "home-outline";
+          else if (route.name === "Profile")
+            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,
+  },
+});