@umituz/react-native-auth 2.6.1 → 2.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "2.6.1",
+  "version": "2.6.3",
   "description": "Authentication service for React Native apps - Secure, type-safe, and production-ready. Provider-agnostic design with dependency injection, configurable validation, and comprehensive error handling.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -35,6 +35,7 @@
     "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-firebase-auth": "latest",
     "@umituz/react-native-localization": "latest",
+    "@umituz/react-native-avatar": "latest",
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-validation": "latest",
     "expo-linear-gradient": ">=13.0.0",

package/src/presentation/components/ProfileSection.tsx

@@ -7,6 +7,7 @@
 import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { Avatar } from "@umituz/react-native-avatar";
 
 export interface ProfileSectionConfig {
     displayName: string;
@@ -42,14 +43,7 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
         }
     };
 
-    const getInitials = (name: string): string => {
-        return name
-            .split(" ")
-            .map((n) => n[0])
-            .join("")
-            .toUpperCase()
-            .slice(0, 2);
-    };
+
 
     return (
         <TouchableOpacity
@@ -60,23 +54,13 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
         >
             <View style={styles.content}>
                 {/* Avatar */}
-                <View
-                    style={[
-                        styles.avatar,
-                        { backgroundColor: profile.isAnonymous ? tokens.colors.warning : tokens.colors.primary },
-                    ]}
-                >
-                    {profile.avatarUrl ? (
-                        <Text style={styles.avatarText}>
-                            {getInitials(profile.displayName)}
-                        </Text>
-                    ) : (
-                        <Text
-                            style={[styles.avatarText, { color: tokens.colors.onPrimary }]}
-                        >
-                            {getInitials(profile.displayName)}
-                        </Text>
-                    )}
+                <View style={styles.avatarContainer}>
+                    <Avatar
+                        uri={profile.avatarUrl}
+                        name={profile.displayName || (profile.isAnonymous ? anonymousText : signInText)}
+                        size="md"
+                        shape="circle"
+                    />
                 </View>
 
                 {/* User Info */}
@@ -161,18 +145,9 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
     },
-    avatar: {
-        width: 56,
-        height: 56,
-        borderRadius: 28,
-        justifyContent: "center",
-        alignItems: "center",
+    avatarContainer: {
         marginRight: 12,
     },
-    avatarText: {
-        fontSize: 20,
-        fontWeight: "600",
-    },
     info: {
         flex: 1,
     },

package/src/presentation/screens/EditProfileScreen.tsx

@@ -15,6 +15,7 @@ import {
     ActivityIndicator,
 } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { Avatar } from "@umituz/react-native-avatar";
 
 export interface EditProfileConfig {
     displayName: string;
@@ -66,6 +67,16 @@ export const EditProfileScreen: React.FC<EditProfileScreenProps> = ({
                 {config.labels.title}
             </Text>
 
+            {/* Avatar */}
+            <View style={styles.avatarContainer}>
+                <Avatar
+                    uri={config.photoURL || undefined}
+                    name={config.displayName}
+                    size="xl"
+                    shape="circle"
+                />
+            </View>
+
             {/* Display Name */}
             <View style={styles.field}>
                 <Text style={[styles.label, { color: tokens.colors.textSecondary }]}>
@@ -182,6 +193,10 @@ const styles = StyleSheet.create({
         fontWeight: "600",
         marginBottom: 24,
     },
+    avatarContainer: {
+        alignItems: "center",
+        marginBottom: 24,
+    },
     field: {
         marginBottom: 20,
     },