implemented home screen and catalog screen of user

careconnect/components/CatalogComponent.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { View, FlatList, SafeAreaView, StyleSheet } from "react-native";
+
+import { MultipleFilters } from "./ProfilesSearchBar";
+
+export const CatalogComponent = ({ data, renderItem }) => {
+  return (
+    <SafeAreaView style={{ flexGrow: 1 }}>
+      <View style={styles.container}>
+        <MultipleFilters />
+        <View style={{ width: "100%", height: "90%" }}>
+          <FlatList
+            data={data}
+            renderItem={renderItem}
+            keyExtractor={(item, index) => index.toString()}
+            horizontal={false}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={{ flexGrow: 1 }}
+          />
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#fff",
+  },
+});

careconnect/navigators/NannyHiringUserStackNavigator.js

@@ -0,0 +1,154 @@
+import React from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar";
+import NanniesCatalogUserScreen from "../screens/nannies catalog/NanniesCatalogUserScreen";
+import SettingsScreen from "../screens/settings/SettingsScreen";
+import ProfileScreen from "../screens/profile/ProfileScreen";
+import NotificationsScreen from "../screens/notifications/NotificationsScreen";
+import { useIsFocused, useNavigation } from "@react-navigation/native";
+
+import { Ionicons, MaterialCommunityIcons, MaterialIcons, FontAwesome } from "@expo/vector-icons";
+import { Image, StyleSheet, TouchableOpacity } from "react-native";
+
+const Tab = AnimatedTabBarNavigator();
+const Stack = createStackNavigator();
+
+const NannyHiringTabNavigator = () => {
+  const isFocused = useIsFocused();
+  const navigation = useNavigation();
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+      tabBarOptions={{
+        activeTintColor: "#FA89B8",
+        tabStyle: { height: 75 },
+      }}
+      appearance={{
+        topPadding: 10,
+        bottomPadding: -8,
+        activeTabBackgrounds: "#F1E7E8",
+        whenInactiveShow: "icon-only",
+        dotSize: "small",
+        tabButtonLayout: "vertical",
+      }}
+    >
+      <Tab.Screen
+        name="Nannies Catalog Page"
+        component={NanniesCatalogUserScreen}
+        options={{
+          tabBarLabel: "Home",
+          tabBarLabelStyle: {
+            fontFamily: "FiraSansRegular",
+            fontSize: 10,
+          },
+          tabBarIcon: ({ color, focused }) => (
+            <Ionicons
+              name={focused ? "home" : "home-outline"}
+              size={18}
+              color={color}
+              onPress={() => {
+                if (isFocused) {
+                  navigation.navigate("User", { screen: "User Home Page" });
+                }
+              }}
+            />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Settings Page"
+        component={SettingsScreen}
+        options={{
+          tabBarLabel: "Settings",
+          tabBarLabelStyle: {
+            fontFamily: "FiraSansRegular",
+            fontSize: 10,
+          },
+          tabBarIcon: ({ color, focused }) => (
+            <Ionicons name={focused ? "settings" : "settings-outline"} size={18} color={color} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Profile Page"
+        component={ProfileScreen}
+        options={{
+          tabBarLabel: "Profile",
+          tabBarLabelStyle: {
+            fontFamily: "FiraSansRegular",
+            fontSize: 10,
+          },
+          tabBarIcon: ({ color, focused }) => (
+            <MaterialCommunityIcons
+              name={focused ? "account" : "account-outline"}
+              size={18}
+              color={color}
+            />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Notifications Page"
+        component={NotificationsScreen}
+        options={{
+          tabBarLabel: "Notifications",
+          tabBarLabelStyle: {
+            fontFamily: "FiraSansRegular",
+            fontSize: 10,
+          },
+          tabBarIcon: ({ color, focused }) => (
+            <MaterialIcons
+              name={focused ? "notifications" : "notifications-none"}
+              size={18}
+              color={color}
+            />
+          ),
+        }}
+      />
+    </Tab.Navigator>
+  );
+};
+
+const NannyHiringUserStackNavigator = ({ navigation }) => {
+  const HeaderLogo = () => {
+    return <Image style={styles.logo} source={require("../assets/icons/logo-no-bg.png")} />;
+  };
+
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerBackTitleVisible: false,
+        headerTitle: HeaderLogo,
+        headerStyle: styles.headerStyle,
+        headerTintColor: "#fff",
+        // todo: icon should be profile pic of user
+        // headerRight: () => (
+        //   <TouchableOpacity
+        //     onPress={() => navigation.navigate("WelcomeScreen", { screen: "Welcome Page" })}
+        //   >
+        //     <FontAwesome name="user-circle" size={38} color="black" style={{ right: 10 }} />
+        //   </TouchableOpacity>
+        // ),
+      }}
+    >
+      <Stack.Screen name="NannyHiringTabNavigator" component={NannyHiringTabNavigator} />
+    </Stack.Navigator>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerStyle: {
+    backgroundColor: "#FA89B8",
+    height: 110,
+  },
+  logo: {
+    resizeMode: "contain",
+    aspectRatio: 0.9,
+    right: 85,
+    top: -5,
+  },
+});
+
+export default NannyHiringUserStackNavigator;

careconnect/navigators/NannyHiringStackNavigator.js → careconnect/navigators/NannyHiringVisitorStackNavigator.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar";
-import NanniesCatalogScreen from "../screens/nannies catalog/NanniesCatalogScreen";
+import NanniesCatalogVisitorScreen from "../screens/nannies catalog/NanniesCatalogVisitorScreen";
 import SettingsScreen from "../screens/settings/SettingsScreen";
 import { useIsFocused, useNavigation } from "@react-navigation/native";
 
@@ -34,7 +34,7 @@ const NannyHiringTabNavigator = () => {
     >
       <Tab.Screen
         name="Nannies Catalog Page"
-        component={NanniesCatalogScreen}
+        component={NanniesCatalogVisitorScreen}
         options={{
           tabBarLabel: "Home",
           tabBarLabelStyle: {
@@ -73,7 +73,7 @@ const NannyHiringTabNavigator = () => {
   );
 };
 
-const NannyHiringStackNavigator = ({ navigation }) => {
+const NannyHiringVisitorStackNavigator = ({ navigation }) => {
   const HeaderLogo = () => {
     return <Image style={styles.logo} source={require("../assets/icons/logo-no-bg.png")} />;
   };
@@ -112,4 +112,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default NannyHiringStackNavigator;
+export default NannyHiringVisitorStackNavigator;

careconnect/navigators/RootStackNavigator.js

@@ -5,7 +5,8 @@ import AuthStackNavigator from "./AuthStackNavigator";
 import NewAccountStackNavigator from "./NewAccountStackNavigator";
 import VisitorStackNavigator from "./VisitorStackNavigator";
 import UserStackNavigator from "./UserStackNavigator";
-import NannyHiringStackNavigator from "./NannyHiringStackNavigator";
+import NannyHiringVisitorStackNavigator from "./NannyHiringVisitorStackNavigator";
+import NannyHiringUserStackNavigator from "./NannyHiringUserStackNavigator";
 
 const RootStack = createStackNavigator();
 
@@ -23,7 +24,8 @@ const RootStackNavigator = () => {
       <RootStack.Screen name="NewAccount" component={NewAccountStackNavigator} />
       <RootStack.Screen name="Visitor" component={VisitorStackNavigator} />
       <RootStack.Screen name="User" component={UserStackNavigator} />
-      <RootStack.Screen name="NannyHiring" component={NannyHiringStackNavigator} />
+      <RootStack.Screen name="NannyHiringVisitor" component={NannyHiringVisitorStackNavigator} />
+      <RootStack.Screen name="NannyHiringUser" component={NannyHiringUserStackNavigator} />
     </RootStack.Navigator>
   );
 };