@umituz/react-native-auth 2.6.0 → 2.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "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",
@@ -28,34 +28,37 @@
     "url": "git+https://github.com/umituz/react-native-auth.git"
   },
   "peerDependencies": {
-    "firebase": ">=11.0.0",
-    "react": ">=18.2.0",
-    "react-native": ">=0.74.0",
-    "@umituz/react-native-firebase-auth": "latest",
-    "@react-navigation/stack": ">=6.0.0",
+    "@gorhom/bottom-sheet": ">=4.0.0",
     "@react-navigation/native": ">=6.0.0",
+    "@react-navigation/stack": ">=6.0.0",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-theme": "latest",
+    "@umituz/react-native-firebase-auth": "latest",
     "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-validation": "latest",
+    "@umituz/react-native-avatar": "latest",
     "@umituz/react-native-storage": "latest",
+    "@umituz/react-native-validation": "latest",
     "expo-linear-gradient": ">=13.0.0",
-    "react-native-safe-area-context": ">=4.0.0",
-    "zustand": ">=4.0.0",
-    "@gorhom/bottom-sheet": ">=4.0.0",
+    "firebase": ">=11.0.0",
+    "react": ">=18.2.0",
+    "react-native": ">=0.74.0",
+    "react-native-gesture-handler": ">=2.0.0",
     "react-native-reanimated": ">=3.0.0",
-    "react-native-gesture-handler": ">=2.0.0"
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-svg": ">=13.0.0",
+    "zustand": ">=4.0.0"
   },
   "devDependencies": {
-    "@types/react": "~19.1.0",
+    "@gorhom/bottom-sheet": "^5.0.0",
     "@types/node": "^20.0.0",
-    "typescript": "~5.9.2",
-    "react-native": "~0.76.0",
+    "@types/react": "~19.1.0",
     "firebase": "^11.0.0",
-    "zustand": "^4.0.0",
-    "@gorhom/bottom-sheet": "^5.0.0",
+    "react-native": "~0.76.0",
+    "react-native-gesture-handler": "^2.0.0",
     "react-native-reanimated": "^3.0.0",
-    "react-native-gesture-handler": "^2.0.0"
+    "react-native-svg": "^15.15.1",
+    "typescript": "~5.9.2",
+    "zustand": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"

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/components/SocialLoginButtons.tsx

@@ -1,9 +1,3 @@
-/**
- * SocialLoginButtons Component
- * Renders social sign-in buttons (Google, Apple)
- * Configurable via props - enabled providers shown dynamically
- */
-
 import React from "react";
 import {
   View,
@@ -16,6 +10,7 @@ import {
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { useLocalization } from "@umituz/react-native-localization";
 import type { SocialAuthProvider } from "../../domain/value-objects/AuthConfig";
+import { AppleIconSvg, GoogleIconSvg } from "./icons";
 
 export interface SocialLoginButtonsProps {
   /** Enabled providers to display */
@@ -76,7 +71,7 @@ export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
               <ActivityIndicator size="small" color={tokens.colors.textPrimary} />
             ) : (
               <>
-                <GoogleIcon />
+                <GoogleIconSvg size={20} />
                 <Text style={[styles.buttonText, { color: tokens.colors.textPrimary }]}>
                   Google
                 </Text>
@@ -100,7 +95,7 @@ export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
               <ActivityIndicator size="small" color={tokens.colors.textPrimary} />
             ) : (
               <>
-                <AppleIcon color={tokens.colors.textPrimary} />
+                <AppleIconSvg size={20} color={tokens.colors.textPrimary} />
                 <Text style={[styles.buttonText, { color: tokens.colors.textPrimary }]}>
                   Apple
                 </Text>
@@ -113,21 +108,6 @@ export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
   );
 };
 
-/**
- * Google Icon SVG as React Native component
- */
-const GoogleIcon: React.FC = () => (
-  <View style={styles.iconContainer}>
-    <Text style={styles.googleIcon}>G</Text>
-  </View>
-);
-
-/**
- * Apple Icon as simple text (uses SF Symbol on iOS)
- */
-const AppleIcon: React.FC<{ color: string }> = ({ color }) => (
-  <Text style={[styles.appleIcon, { color }]}></Text>
-);
 
 const styles = StyleSheet.create({
   container: {
@@ -167,18 +147,5 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: "600",
   },
-  iconContainer: {
-    width: 20,
-    height: 20,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  googleIcon: {
-    fontSize: 18,
-    fontWeight: "700",
-    color: "#4285F4",
-  },
-  appleIcon: {
-    fontSize: 20,
-  },
 });
+

package/src/presentation/components/icons/AppleIconSvg.tsx

@@ -0,0 +1,24 @@
+/**
+ * Apple Icon SVG
+ * Dark mode compatible Apple logo
+ */
+
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+export interface AppleIconSvgProps {
+    size?: number;
+    color: string;
+}
+
+export const AppleIconSvg: React.FC<AppleIconSvgProps> = ({
+    size = 20,
+    color,
+}) => (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+        <Path
+            d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.09l-.02-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"
+            fill={color}
+        />
+    </Svg>
+);

package/src/presentation/components/icons/GoogleIconSvg.tsx

@@ -0,0 +1,32 @@
+/**
+ * Google Icon SVG
+ * Standard Google logo with color
+ */
+
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+export interface GoogleIconSvgProps {
+    size?: number;
+}
+
+export const GoogleIconSvg: React.FC<GoogleIconSvgProps> = ({ size = 20 }) => (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+        <Path
+            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+            fill="#4285F4"
+        />
+        <Path
+            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+            fill="#34A853"
+        />
+        <Path
+            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+            fill="#FBBC05"
+        />
+        <Path
+            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+            fill="#EA4335"
+        />
+    </Svg>
+);

package/src/presentation/components/icons/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Social Login Icons
+ */
+
+export { AppleIconSvg } from "./AppleIconSvg";
+export { GoogleIconSvg } from "./GoogleIconSvg";