Amelioration du cote Front-end

Author: Kool04

package-lock.json

@@ -31,7 +31,8 @@
     "react-native-maps": "^1.15.6",
     "react-native-qrcode-svg": "^6.3.1",
     "react-native-safe-area-context": "4.10.1",
-    "react-native-screens": "3.31.1"
+    "react-native-screens": "3.31.1",
+    "react-native-swiper": "^1.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

package.json

@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     borderRadius: BORDERRADIUS.radius_20,
-    backgroundColor: COLORS.Orange,
+    backgroundColor: COLORS.Green,
   },
 });
 

src/components/AppHeader.tsx

@@ -1,23 +1,43 @@
-import React from "react";
-import { View, StyleSheet } from "react-native";
+import React, { useEffect, useState } from "react";
+import { View, StyleSheet, Image } from "react-native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import HomeScreen from "../screens/HomeScreen";
 import SearchScreen from "../screens/SearchScreen";
 import TicketScreen from "../screens/TicketScreen";
 import HomeScreenConcert from "../screens/HomeScreenConcert";
 import UserAccountScreen from "../screens/UserAccountScreen";
 import { COLORS, FONTSIZE, SPACING } from "../theme/Theme";
-import {
-  Entypo,
-  MaterialCommunityIcons,
-  Feather,
-  AntDesign,
-  Ionicons,
-} from "@expo/vector-icons";
+import { Ionicons, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
+import { getFirestore, doc, getDoc } from "firebase/firestore";
+import { getAuth } from "firebase/auth";
+import { initializeApp } from "firebase/app";
+import { firebaseConfig } from "../../firebase-config";
+
+const app = initializeApp(firebaseConfig);
+const db = getFirestore(app);
+const auth = getAuth();
 
 const Tab = createBottomTabNavigator();
 
 const TabNavigator = () => {
+  const [photoURL, setPhotoURL] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchUserProfile = async () => {
+      const user = auth.currentUser;
+      if (user) {
+        const userDoc = doc(db, "users", user.uid);
+        const userSnapshot = await getDoc(userDoc);
+        if (userSnapshot.exists()) {
+          const userData = userSnapshot.data();
+          setPhotoURL(userData.photoURL || null);
+        }
+      }
+    };
+
+    fetchUserProfile();
+  }, []);
+
   return (
     <Tab.Navigator
       screenOptions={{
@@ -45,7 +65,7 @@ const TabNavigator = () => {
               <Ionicons
                 name="home-sharp"
                 size={FONTSIZE.size_30}
-                color={focused ? COLORS.White : COLORS.White}
+                color={COLORS.White}
               />
             </View>
           ),
@@ -66,7 +86,7 @@ const TabNavigator = () => {
               <Feather
                 name="search"
                 size={FONTSIZE.size_30}
-                color={focused ? COLORS.White : COLORS.White}
+                color={COLORS.White}
               />
             </View>
           ),
@@ -87,7 +107,7 @@ const TabNavigator = () => {
               <MaterialCommunityIcons
                 name="ticket-confirmation-outline"
                 size={FONTSIZE.size_30}
-                color={focused ? COLORS.White : COLORS.White}
+                color={COLORS.White}
               />
             </View>
           ),
@@ -105,11 +125,15 @@ const TabNavigator = () => {
                 focused ? { backgroundColor: COLORS.Green } : {},
               ]}
             >
-              <AntDesign
-                name="user"
-                size={FONTSIZE.size_30}
-                color={focused ? COLORS.White : COLORS.White}
-              />
+              {photoURL ? (
+                <Image source={{ uri: photoURL }} style={styles.userImage} />
+              ) : (
+                <Ionicons
+                  name="person-circle"
+                  size={FONTSIZE.size_30}
+                  color={COLORS.White}
+                />
+              )}
             </View>
           ),
         }}
@@ -124,8 +148,10 @@ const styles = StyleSheet.create({
     padding: SPACING.space_18,
     borderRadius: SPACING.space_18 * 10,
   },
-  tabBackground: {
-    padding: SPACING.space_18,
+  userImage: {
+    width: FONTSIZE.size_30,
+    height: FONTSIZE.size_30,
+    borderRadius: FONTSIZE.size_16, // make it circular
   },
 });
 

src/navigator/TabNavigator.tsx

@@ -19,9 +19,8 @@ import {
   BORDERRADIUS,
 } from "../theme/Theme";
 
-import InputHeader from "../components/InputHeader";
 import CategoryHeader from "../components/CategoryHeader";
-import SubMovieCard from "../components/SubMovieCard";
+
 import MovieCard from "../components/MovieCard";
 import { firebaseConfig } from "../../firebase-config";
 import { initializeApp } from "firebase/app";