@umituz/react-native-auth 4.3.71 → 4.3.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "4.3.71",
+  "version": "4.3.72",
   "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",

package/src/presentation/components/AccountActions.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+/**
+ * Account Actions Component
+ * Logout and delete account actions
+ * PERFORMANCE: Memoized with useCallback for stable alert action handlers
+ */
+
+import React, { memo, useCallback } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system/atoms";
@@ -26,7 +32,7 @@ interface AccountActionsProps {
   config: AccountActionsConfig;
 }
 
-export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
+export const AccountActions = memo<AccountActionsProps>(({ config }) => {
   const tokens = useAppDesignTokens();
   const alert = useAlert();
   const {
@@ -46,7 +52,8 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
     showChangePassword = false,
   } = config;
 
-  const handleLogout = () => {
+  // PERFORMANCE: Stable callback references prevent unnecessary re-renders
+  const handleLogout = useCallback(() => {
     alert.show(AlertType.WARNING, AlertMode.MODAL, logoutConfirmTitle, logoutConfirmMessage, {
       actions: [
         { id: "cancel", label: cancelText, style: "secondary", onPress: () => {} },
@@ -66,9 +73,9 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
         },
       ],
     });
-  };
+  }, [alert, logoutText, logoutConfirmTitle, logoutConfirmMessage, cancelText, onLogout]);
 
-  const handleDeleteAccount = () => {
+  const handleDeleteAccount = useCallback(() => {
     alert.show(AlertType.ERROR, AlertMode.MODAL, deleteConfirmTitle, deleteConfirmMessage, {
       actions: [
         { id: "cancel", label: cancelText, style: "secondary", onPress: () => {} },
@@ -86,7 +93,7 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
         },
       ],
     });
-  };
+  }, [alert, deleteAccountText, deleteConfirmTitle, deleteConfirmMessage, deleteErrorTitle, deleteErrorMessage, cancelText, onDeleteAccount]);
 
   return (
     <View style={styles.container}>
@@ -111,7 +118,9 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
       </TouchableOpacity>
     </View>
   );
-};
+});
+
+AccountActions.displayName = 'AccountActions';
 
 const styles = StyleSheet.create({
   container: { gap: 12 },

package/src/presentation/components/AuthHeader.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+/**
+ * Auth Header Component
+ * Displays auth screen title and optional subtitle
+ * PERFORMANCE: Memoized to prevent unnecessary re-renders
+ */
+
+import React, { memo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
@@ -8,7 +14,7 @@ interface AuthHeaderProps {
   subtitle?: string;
 }
 
-export const AuthHeader: React.FC<AuthHeaderProps> = ({ title, subtitle }) => {
+export const AuthHeader = memo<AuthHeaderProps>(({ title, subtitle }) => {
   const tokens = useAppDesignTokens();
 
   return (
@@ -34,7 +40,9 @@ export const AuthHeader: React.FC<AuthHeaderProps> = ({ title, subtitle }) => {
       )}
     </View>
   );
-};
+});
+
+AuthHeader.displayName = 'AuthHeader';
 
 const styles = StyleSheet.create({
   header: {

package/src/presentation/components/AuthLink.tsx

@@ -1,9 +1,10 @@
 /**
  * Auth Link Component
  * Link text with button for navigation between auth screens
+ * PERFORMANCE: Memoized to prevent unnecessary re-renders
  */
 
-import React from "react";
+import React, { memo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
@@ -15,20 +16,12 @@ interface AuthLinkProps {
   disabled?: boolean;
 }
 
-export const AuthLink: React.FC<AuthLinkProps> = ({
-  text,
-  linkText,
-  onPress,
-  disabled = false,
-}) => {
+export const AuthLink = memo<AuthLinkProps>(({ text, linkText, onPress, disabled = false }) => {
   const tokens = useAppDesignTokens();
 
   return (
     <View style={[styles.container, { marginTop: tokens.spacing.xs, paddingTop: tokens.spacing.xs }]}>
-      <AtomicText
-        type="bodyMedium"
-        color="textSecondary"
-      >
+      <AtomicText type="bodyMedium" color="textSecondary">
         {text}{" "}
       </AtomicText>
       <AtomicButton
@@ -41,7 +34,9 @@ export const AuthLink: React.FC<AuthLinkProps> = ({
       </AtomicButton>
     </View>
   );
-};
+});
+
+AuthLink.displayName = 'AuthLink';
 
 const styles = StyleSheet.create({
   container: {

package/src/presentation/components/SocialLoginButtons.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+/**
+ * Social Login Buttons Component
+ * Google and Apple sign-in buttons
+ * PERFORMANCE: Memoized and provider checks memoized to prevent re-renders
+ */
+
+import React, { useMemo, memo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
@@ -19,17 +25,14 @@ interface SocialLoginButtonsProps {
   appleLoading?: boolean;
 }
 
-export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
-  translations,
-  enabledProviders,
-  onGooglePress,
-  onApplePress,
-  googleLoading = false,
-  appleLoading = false,
-}) => {
+export const SocialLoginButtons = memo<SocialLoginButtonsProps>(({ translations, enabledProviders, onGooglePress, onApplePress, googleLoading = false, appleLoading = false }) => {
   const tokens = useAppDesignTokens();
-  const hasGoogle = enabledProviders.includes("google");
-  const hasApple = enabledProviders.includes("apple");
+
+  // PERFORMANCE: Memoize provider checks to prevent recalculation on every render
+  const { hasGoogle, hasApple } = useMemo(() => ({
+    hasGoogle: enabledProviders.includes("google"),
+    hasApple: enabledProviders.includes("apple"),
+  }), [enabledProviders]);
 
   if (!hasGoogle && !hasApple) {
     return null;
@@ -74,7 +77,9 @@ export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
       </View>
     </View>
   );
-};
+});
+
+SocialLoginButtons.displayName = 'SocialLoginButtons';
 
 const styles = StyleSheet.create({
   container: {},

package/src/presentation/screens/AccountScreen.tsx

@@ -2,9 +2,10 @@
  * Account Screen
  * Pure UI component for account management
  * Business logic provided via props from app layer
+ * PERFORMANCE: Memoized to prevent unnecessary re-renders
  */
 
-import React from "react";
+import React, { memo } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system/atoms";
@@ -29,7 +30,7 @@ export interface AccountScreenProps {
     config: AccountScreenConfig;
 }
 
-export const AccountScreen: React.FC<AccountScreenProps> = ({ config }) => {
+export const AccountScreen = memo<AccountScreenProps>(({ config }) => {
     const tokens = useAppDesignTokens();
 
     return (
@@ -74,7 +75,9 @@ export const AccountScreen: React.FC<AccountScreenProps> = ({ config }) => {
             {config.PasswordPromptComponent}
         </>
     );
-};
+});
+
+AccountScreen.displayName = 'AccountScreen';
 
 const styles = StyleSheet.create({
     content: {

package/src/presentation/screens/LoginScreen.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+/**
+ * Login Screen Component
+ * Login form screen with navigation
+ * PERFORMANCE: Memoized to prevent unnecessary re-renders
+ */
+
+import React, { memo, useCallback } from "react";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicCard } from "@umituz/react-native-design-system/atoms";
 import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
@@ -16,13 +22,14 @@ export interface LoginScreenProps {
   translations: LoginScreenTranslations;
 }
 
-export const LoginScreen: React.FC<LoginScreenProps> = ({ translations }) => {
+export const LoginScreen = memo<LoginScreenProps>(({ translations }) => {
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
 
-  const handleNavigateToRegister = () => {
+  // PERFORMANCE: Stable callback reference
+  const handleNavigateToRegister = useCallback(() => {
     navigation.navigate("Register");
-  };
+  }, [navigation]);
 
   return (
     <ScreenLayout
@@ -41,4 +48,6 @@ export const LoginScreen: React.FC<LoginScreenProps> = ({ translations }) => {
       </AtomicCard>
     </ScreenLayout>
   );
-};
+});
+
+LoginScreen.displayName = 'LoginScreen';

package/src/presentation/screens/RegisterScreen.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+/**
+ * Register Screen Component
+ * Registration form screen with navigation
+ * PERFORMANCE: Memoized to prevent unnecessary re-renders
+ */
+
+import React, { memo, useCallback } from "react";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicCard } from "@umituz/react-native-design-system/atoms";
 import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
@@ -20,19 +26,14 @@ export interface RegisterScreenProps {
   onPrivacyPress?: () => void;
 }
 
-export const RegisterScreen: React.FC<RegisterScreenProps> = ({
-  translations,
-  termsUrl,
-  privacyUrl,
-  onTermsPress,
-  onPrivacyPress,
-}) => {
+export const RegisterScreen = memo<RegisterScreenProps>(({ translations, termsUrl, privacyUrl, onTermsPress, onPrivacyPress }) => {
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
 
-  const handleNavigateToLogin = () => {
+  // PERFORMANCE: Stable callback reference
+  const handleNavigateToLogin = useCallback(() => {
     navigation.navigate("Login");
-  };
+  }, [navigation]);
 
   return (
     <ScreenLayout
@@ -55,4 +56,6 @@ export const RegisterScreen: React.FC<RegisterScreenProps> = ({
       </AtomicCard>
     </ScreenLayout>
   );
-};
+});
+
+RegisterScreen.displayName = 'RegisterScreen';