@umituz/react-native-auth 3.5.7 → 3.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "3.5.7",
+  "version": "3.5.9",
   "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/index.ts

@@ -168,7 +168,6 @@ export type {
 } from './presentation/navigation/AuthNavigator';
 
 // COMPONENTS
-export { AuthContainer } from './presentation/components/AuthContainer';
 export { AuthHeader } from './presentation/components/AuthHeader';
 export { LoginForm } from './presentation/components/LoginForm';
 export { RegisterForm } from './presentation/components/RegisterForm';

package/src/presentation/components/AuthErrorDisplay.tsx

@@ -4,8 +4,11 @@
  */
 
 import React from "react";
-import { View, StyleSheet } from "react-native";
-import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import {
+  AlertInline,
+  AlertService,
+  AlertMode,
+} from "@umituz/react-native-design-system";
 
 interface AuthErrorDisplayProps {
   error: string | null;
@@ -14,46 +17,20 @@ interface AuthErrorDisplayProps {
 export const AuthErrorDisplay: React.FC<AuthErrorDisplayProps> = ({
   error,
 }) => {
-  const tokens = useAppDesignTokens();
-
-  if (!error) {
+  const alert = React.useMemo(() => {
+    if (!error) return null;
+    return AlertService.createErrorAlert(error, undefined, {
+      mode: AlertMode.INLINE,
+    });
+  }, [error]);
+
+  if (!alert) {
     return null;
   }
 
-  return (
-    <View
-      style={[
-        styles.errorContainer,
-        {
-          backgroundColor: tokens.colors.errorLight,
-          borderColor: tokens.colors.error,
-        },
-      ]}
-    >
-      <AtomicText
-        type="bodyMedium"
-        color="error"
-        style={styles.errorText}
-      >
-        {error}
-      </AtomicText>
-    </View>
-  );
+  return <AlertInline alert={alert} />;
 };
 
-const styles = StyleSheet.create({
-  errorContainer: {
-    marginBottom: 16,
-    padding: 14,
-    borderRadius: 12,
-    borderWidth: 1,
-  },
-  errorText: {
-    textAlign: "center",
-    fontWeight: "500",
-  },
-});
-
 
 
 

package/src/presentation/screens/LoginScreen.tsx

@@ -4,28 +4,34 @@
  */
 
 import React from "react";
-import { useAppNavigation, AtomicCard } from "@umituz/react-native-design-system";
+import { useAppNavigation, AtomicCard, ScreenLayout, useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import type { AuthStackParamList } from "../navigation/AuthNavigator";
-import { AuthContainer } from "../components/AuthContainer";
 import { AuthHeader } from "../components/AuthHeader";
 import { LoginForm } from "../components/LoginForm";
 
 export const LoginScreen: React.FC = () => {
   const { t } = useLocalization();
   const navigation = useAppNavigation<AuthStackParamList>();
+  const tokens = useAppDesignTokens();
 
   const handleNavigateToRegister = () => {
     navigation.navigate("Register");
   };
 
   return (
-    <AuthContainer>
+    <ScreenLayout
+      scrollable
+      keyboardAvoiding
+      maxWidth={440}
+      contentContainerStyle={{ justifyContent: "center" }}
+      backgroundColor={tokens.colors.backgroundPrimary}
+    >
       <AuthHeader title={t("auth.title")} />
-      <AtomicCard variant="elevated" padding="large">
+      <AtomicCard variant="elevated" padding="lg">
         <LoginForm onNavigateToRegister={handleNavigateToRegister} />
       </AtomicCard>
-    </AuthContainer>
+    </ScreenLayout>
   );
 };
 

package/src/presentation/screens/RegisterScreen.tsx

@@ -4,10 +4,9 @@
  */
 
 import React from "react";
-import { useAppNavigation, AtomicCard } from "@umituz/react-native-design-system";
+import { useAppNavigation, AtomicCard, ScreenLayout, useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import type { AuthStackParamList } from "../navigation/AuthNavigator";
-import { AuthContainer } from "../components/AuthContainer";
 import { AuthHeader } from "../components/AuthHeader";
 import { RegisterForm } from "../components/RegisterForm";
 
@@ -26,15 +25,22 @@ export const RegisterScreen: React.FC<RegisterScreenProps> = ({
 }) => {
   const { t } = useLocalization();
   const navigation = useAppNavigation<AuthStackParamList>();
+  const tokens = useAppDesignTokens();
 
   const handleNavigateToLogin = () => {
     navigation.navigate("Login");
   };
 
   return (
-    <AuthContainer>
+    <ScreenLayout
+        scrollable
+        keyboardAvoiding
+        maxWidth={440}
+        contentContainerStyle={{ justifyContent: "center" }}
+        backgroundColor={tokens.colors.backgroundPrimary}
+    >
       <AuthHeader title={t("auth.createAccount")} />
-      <AtomicCard variant="elevated" padding="large">
+      <AtomicCard variant="elevated" padding="lg">
         <RegisterForm
           onNavigateToLogin={handleNavigateToLogin}
           termsUrl={termsUrl}
@@ -43,7 +49,7 @@ export const RegisterScreen: React.FC<RegisterScreenProps> = ({
           onPrivacyPress={onPrivacyPress}
         />
       </AtomicCard>
-    </AuthContainer>
+    </ScreenLayout>
   );
 };
 

package/src/presentation/components/AuthContainer.tsx

@@ -1,78 +0,0 @@
-/**
- * Auth Container Component
- * Main container for auth screens with background and scroll
- */
-
-import React, { useMemo } from "react";
-import {
-  View,
-  StyleSheet,
-  ScrollView,
-} from "react-native";
-import { useResponsive, useSafeAreaInsets, AtomicKeyboardAvoidingView, useAppDesignTokens } from "@umituz/react-native-design-system";
-
-/** Layout constants for auth screens */
-const AUTH_LAYOUT = {
-  VERTICAL_PADDING: 40,
-  HORIZONTAL_PADDING: 20,
-  MAX_CONTENT_WIDTH: 440,
-} as const;
-
-interface AuthContainerProps {
-  children: React.ReactNode;
-}
-
-export const AuthContainer: React.FC<AuthContainerProps> = ({ children }) => {
-  const insets = useSafeAreaInsets();
-  const { spacingMultiplier } = useResponsive();
-
-  const tokens = useAppDesignTokens();
-
-  const dynamicStyles = useMemo(() => ({
-    paddingTop: insets.top + (AUTH_LAYOUT.VERTICAL_PADDING * spacingMultiplier),
-    paddingBottom: insets.bottom + (AUTH_LAYOUT.VERTICAL_PADDING * spacingMultiplier),
-  }), [insets.top, insets.bottom, spacingMultiplier]);
-
-  return (
-    <AtomicKeyboardAvoidingView
-      style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-      behavior="padding"
-    >
-      <ScrollView
-        contentContainerStyle={[styles.scrollContent, dynamicStyles]}
-        keyboardShouldPersistTaps="handled"
-        showsVerticalScrollIndicator={false}
-      >
-        <View style={styles.content}>{children}</View>
-      </ScrollView>
-    </AtomicKeyboardAvoidingView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollContent: {
-    flexGrow: 1,
-    paddingHorizontal: AUTH_LAYOUT.HORIZONTAL_PADDING,
-  },
-  content: {
-    flex: 1,
-    justifyContent: "center",
-    maxWidth: AUTH_LAYOUT.MAX_CONTENT_WIDTH,
-    alignSelf: "center",
-    width: "100%",
-  },
-});
-
-
-
-
-
-
-
-
-
-
-