firtname and lastname before username

src/screens/Profile/Follows.js

@@ -13,6 +13,7 @@ import useDataFromRef from "../../hooks/useDataFromRef";
 import { Routes } from "../../navigation";
 import { useRoute } from "@react-navigation/native";
 import { navigate } from "../../navigation/NavigationService";
+import { getArtistDisplayName } from "../../utils/artistName";
 
 const Follows = () => {
   const { params } = useRoute();
@@ -84,34 +85,37 @@ const Follows = () => {
     </View>
   );
 
-  const UserRow = ({ user }) => (
-    <Pressable
-      style={{ gap: 14, ...Style.containerRow }}
-      onPress={() => navigate(Routes.SingerProfile, { userId: user?.id })}
-    >
-      <ExpoImage
-        source={
-          user?.profilePictureURL
-            ? { uri: user.profilePictureURL }
-            : img.profile
-        }
-        cachePolicy="memory-disk"
-        priority="high"
-        contentFit="cover"
-        transition={100}
-        style={{ ...size({ size: 60 }), borderRadius: 100 }}
-      />
-      <Text
-        style={{
-          fontSize: 12,
-          color: Palette.white,
-          fontFamily: FONT_FAMILY.InterRegular,
-        }}
+  const UserRow = ({ user }) => {
+    const displayName = getArtistDisplayName(user, "Utilisateur");
+    return (
+      <Pressable
+        style={{ gap: 14, ...Style.containerRow }}
+        onPress={() => navigate(Routes.SingerProfile, { userId: user?.id })}
       >
-        {user?.userName || "Utilisateur"}
-      </Text>
-    </Pressable>
-  );
+        <ExpoImage
+          source={
+            user?.profilePictureURL
+              ? { uri: user.profilePictureURL }
+              : img.profile
+          }
+          cachePolicy="memory-disk"
+          priority="high"
+          contentFit="cover"
+          transition={100}
+          style={{ ...size({ size: 60 }), borderRadius: 100 }}
+        />
+        <Text
+          style={{
+            fontSize: 12,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterRegular,
+          }}
+        >
+          {displayName}
+        </Text>
+      </Pressable>
+    );
+  };
 
   const list = selected === "Abonnés" ? followers : following;
   const loading = selected === "Abonnés" ? followersLoading : followingLoading;

src/screens/Profile/Profile.js

@@ -34,6 +34,7 @@ import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { push } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
+import { getArtistDisplayName } from "../../utils/artistName";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import Style, { gutters, size } from "../../styles/Style";
@@ -64,6 +65,18 @@ const Profile = () => {
   const [selectedProjectId, setSelectedProjectId] = useState(null);
   const [updatingPhoto, setUpdatingPhoto] = useState(false);
   const [webUploadMessage, setWebUploadMessage] = useState("");
+  const selfDisplayName = useMemo(
+    () => getArtistDisplayName(currentUserData, "MusicLand"),
+    [currentUserData]
+  );
+  const targetDisplayName = useMemo(
+    () => getArtistDisplayName(userData, "MusicLand"),
+    [userData]
+  );
+  const profileTitle = useMemo(
+    () => getArtistDisplayName(isSelf ? currentUserData : userData, "Profil"),
+    [currentUserData, isSelf, userData]
+  );
   const navigateToMusicDetails = useNavigateToMusicDetails();
   const onPressMenu = (item) => {
     setSelected(item);
@@ -191,10 +204,7 @@ const Profile = () => {
           renderItem={({ item }) => (
             <MusicCard
               title={item?.title || "Sans titre"}
-              subtitle={
-                (isSelf ? currentUserData?.userName : userData?.userName) ||
-                "MusicLand"
-              }
+              subtitle={isSelf ? selfDisplayName : targetDisplayName}
               imageUri={item?.coverUrl || null}
               projectId={item?.id}
               likedBy={item?.likedBy || []}
@@ -403,14 +413,13 @@ const Profile = () => {
                 <Text style={styles.webLoaderText}>{webUploadMessage}</Text>
               ) : null}
               <Text
-                style={{
-                  fontSize: 22,
-                  color: Palette.white,
-                  fontFamily: FONT_FAMILY.InterSemiBold,
-                }}
-              >
-                {(isSelf ? currentUserData?.userName : userData?.userName) ||
-                  "Profil"}
+              style={{
+                fontSize: 22,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterSemiBold,
+              }}
+            >
+                {profileTitle}
               </Text>
             </View>
             <View