feat: Better Profile Modal

app/(modals)/profile.tsx

@@ -3,7 +3,6 @@ import { MenuView, NativeActionEvent } from "@react-native-menu/menu";
 import { useHeaderHeight } from "@react-navigation/elements";
 import { useTheme } from "@react-navigation/native";
 import * as ImagePicker from "expo-image-picker"
-import { router } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -19,13 +18,13 @@ import OnboardingInput from "@/components/onboarding/OnboardingInput";
 import { useAccountStore } from "@/stores/account";
 import Avatar from "@/ui/components/Avatar";
 import Button from "@/ui/components/Button";
-import Icon from "@/ui/components/Icon";
-import { NativeHeaderPressable, NativeHeaderSide } from "@/ui/components/NativeHeader";
 import Typography from "@/ui/components/Typography";
 import { getInitials } from "@/utils/chats/initials";
+import { useNavigation } from "expo-router";
 
 export default function CustomProfileScreen() {
   const { t } = useTranslation();
+  const navigation = useNavigation();
   const store = useAccountStore.getState();
   const accounts = useAccountStore((state) => state.accounts);
   const lastUsedAccount = useAccountStore((state) => state.lastUsedAccount);
@@ -44,13 +43,22 @@ export default function CustomProfileScreen() {
     }
   }, [account]);
 
+  // Automatic save
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('beforeRemove', () => {
+      updateAccountName();
+    });
+
+    return unsubscribe;
+  }, [navigation, firstName, lastName]);
+
   const insets = useSafeAreaInsets()
 
   const updateProfilePictureFromLibrary = async () => {
     const result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ['images', 'videos'],
+      mediaTypes: "images",
       allowsEditing: true,
-      aspect: [4, 3],
+      aspect: [1, 1],
       quality: 1,
       base64: true
     });
@@ -64,27 +72,37 @@ export default function CustomProfileScreen() {
   const updateProfilePictureFromService = async () => {
     Alert.alert(
       t("Feature_Soon"),
-      "Cette fonctionnalité n'est pas encore disponible, mais elle le sera dans une prochaine mise à jour.",
+      t("Feature_Soon_Notification"),
       [{ text: "OK" }]
     );
   }
 
+  const updateAccountName = () => {
+    const trimmedFirstName = firstName.trim();
+    const trimmedLastName = lastName.trim();
+
+    if (!trimmedFirstName || !trimmedLastName) return;
+
+    useAccountStore.getState().setAccountName(lastUsedAccount, trimmedFirstName, trimmedLastName);
+  }
+
   const { colors } = useTheme();
   const height = useHeaderHeight();
 
   return (
     <KeyboardAvoidingView
       behavior={"position"}
-      keyboardVerticalOffset={-insets.top * 3.2}
+      keyboardVerticalOffset={insets.bottom}
       style={{ flex: 1 }}
     >
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         style={{ height: "100%" }}
+        contentContainerStyle={{ flexGrow: 1, justifyContent: "center" }}
       >
-        <View style={{ paddingHorizontal: 50, alignItems: "center", gap: 15, paddingTop: 20 + (Platform.OS === "android" ? height : 0) }}>
+        <View style={{ paddingHorizontal: 50, alignItems: "center", gap: 15 }}>
           <Avatar
-            size={117}
+            size={150}
             initials={getInitials(`${firstName} ${lastName}`)}
             imageUrl={profilePictureUrl || undefined}
           />
@@ -145,38 +163,27 @@ export default function CustomProfileScreen() {
 
         <View style={{ paddingHorizontal: 20, paddingTop: 30, gap: 15 }}>
           <View style={{ gap: 10 }}>
-            <Typography color="secondary">Prénom</Typography>
+            <Typography color="secondary">{t("Label_FirstName")}</Typography>
             <OnboardingInput
-              placeholder={"Prénom"}
+              placeholder={t("Label_FirstName")}
               text={firstName}
               setText={setFirstName}
               icon={"Font"}
               inputProps={{}}
             />
-            <Typography color="secondary">Nom</Typography>
+
+            <Typography color="secondary">{t("Label_LastName")}</Typography>
             <OnboardingInput
-              placeholder={"Nom"}
+              placeholder={t("Label_LastName")}
               text={lastName}
               setText={setLastName}
               icon={"Bold"}
               inputProps={{}}
             />
           </View>
         </View>
-        <NativeHeaderSide side="Left" key={`${firstName}-${lastName}`}>
-          <NativeHeaderPressable
-            onPressIn={() => {
-              useAccountStore.getState().setAccountName(lastUsedAccount, firstName, lastName);
-              router.back();
-            }}
-          >
-            <Icon papicon size={26}>
-              <Papicons name="ArrowLeft" />
-            </Icon>
-          </NativeHeaderPressable>
 
-        </NativeHeaderSide>
       </ScrollView>
-    </ KeyboardAvoidingView >
+    </KeyboardAvoidingView >
   );
 }

app/(tabs)/index/atoms/UserProfile.tsx

@@ -23,7 +23,7 @@ const UserProfile = ({ subtitle, chevron, onPress }: { subtitle?: string, chevro
     >
       <TouchableOpacity
         onPress={() => {
-          router.push("/(modals)/profile");
+          router.navigate("/(modals)/profile");
         }}
       >
         <Avatar

components/onboarding/OnboardingInput.tsx

@@ -28,7 +28,7 @@ const OnboardingInput = ({ placeholder, text, setText, isPassword, icon, inputPr
         style={{
           flex: 1,
           padding: 20,
-          paddingVertical: Platform.OS === "ios" ? 20 : 10,
+          paddingVertical: Platform.OS === "ios" ? 20 : 5,
           backgroundColor: colors.text + (dark ? "15" : "08"),
           borderRadius: 300,
           borderWidth: 1,

locales/en.json

@@ -12,6 +12,8 @@
   "Button_Change_ProfilePicture_FromLibrary": "From photo library",
   "Button_Change_ProfilePicture_FromService": "Retrieve from your ENT",
   "Button_Change_ProfilePicture_Remove": "Remove picture",
+  "Label_FirstName": "First name",
+  "Label_LastName": "Last name",
   "Tab_Page": "Page",
   "Tab_Settings": "Settings",
   "Tab_News": "News",

locales/es.json

@@ -12,6 +12,8 @@
   "Button_Change_ProfilePicture_FromLibrary": "Desde la galería",
   "Button_Change_ProfilePicture_FromService": "Recuperar desde tu ENT",
   "Button_Change_ProfilePicture_Remove": "Eliminar la foto",
+  "Label_FirstName": "Nombre",
+  "Label_LastName": "Apellido",
   "Tab_Page": "Página",
   "Tab_Settings": "Configuración",
   "Tab_News": "Noticias",

locales/fr.json

@@ -13,6 +13,8 @@
   "Button_Change_ProfilePicture_FromLibrary": "Depuis la photothèque",
   "Button_Change_ProfilePicture_FromService": "Récupérer depuis ton ENT",
   "Button_Change_ProfilePicture_Remove": "Supprimer la photo",
+  "Label_FirstName": "Prénom",
+  "Label_LastName": "Nom de famille",
   "Tab_Page": "Page",
   "Tab_Settings": "Paramètres",
   "Tab_News": "Actualités",