firtname and lastname before username

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