@umituz/react-native-auth 4.3.94 → 4.3.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "4.3.94",
+  "version": "4.3.95",
   "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/AuthBottomSheet.styles.ts

@@ -11,8 +11,8 @@ export const styles = StyleSheet.create({
         borderRadius: 2,
     },
     scrollContent: {
-        paddingHorizontal: 24,
-        paddingBottom: 80,
+        // paddingHorizontal ve paddingBottom artık component içinden responsive olarak verilecek
+        flexGrow: 1,
     },
     closeButton: {
         position: "absolute",
@@ -23,9 +23,9 @@ export const styles = StyleSheet.create({
     },
     header: {
         alignItems: "center",
-        marginBottom: 24,
-        marginTop: 8,
-        paddingTop: 16,
+        // marginBottom artık component içinden responsive olarak verilecek
+        // marginTop artık component içinden responsive olarak verilecek
+        // paddingTop artık component içinden responsive olarak verilecek
     },
     title: {
         marginBottom: 8,

package/src/presentation/components/AuthBottomSheet.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, TouchableOpacity, ScrollView } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import { AtomicText, AtomicIcon, AtomicKeyboardAvoidingView } from "@umituz/react-native-design-system/atoms";
 import { BottomSheetModal } from "@umituz/react-native-design-system/molecules";
 import { useAuthBottomSheet, type SocialAuthConfiguration } from "../hooks/useAuthBottomSheet";
@@ -44,6 +45,7 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
   onAuthSuccess,
 }) => {
   const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
 
   const {
     modalRef,
@@ -59,6 +61,23 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
     handleAppleSignIn,
   } = useAuthBottomSheet({ socialConfig, onGoogleSignIn, onAppleSignIn, onAuthSuccess });
 
+  const scrollContentStyle = useMemo(() => [
+    styles.scrollContent,
+    {
+      paddingHorizontal: responsive.horizontalPadding,
+      paddingBottom: responsive.verticalPadding * 3,
+    },
+  ], [responsive.horizontalPadding, responsive.verticalPadding]);
+
+  const headerStyle = useMemo(() => [
+    styles.header,
+    {
+      marginBottom: responsive.verticalPadding,
+      marginTop: responsive.horizontalPadding,
+      paddingTop: responsive.horizontalPadding,
+    },
+  ], [responsive.verticalPadding, responsive.horizontalPadding]);
+
   return (
     <BottomSheetModal
       ref={modalRef}
@@ -80,11 +99,11 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
         </TouchableOpacity>
 
         <ScrollView
-          contentContainerStyle={styles.scrollContent}
+          contentContainerStyle={scrollContentStyle}
           showsVerticalScrollIndicator={false}
           keyboardShouldPersistTaps="handled"
         >
-          <View style={styles.header}>
+          <View style={headerStyle}>
             <AtomicText type="headlineLarge" color="textPrimary" style={styles.title}>
               {mode === "login" ? translations.signIn : translations.createAccount}
             </AtomicText>

package/src/presentation/components/AuthHeader.tsx

@@ -7,6 +7,7 @@
 import React, { memo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
 
 interface AuthHeaderProps {
@@ -16,9 +17,10 @@ interface AuthHeaderProps {
 
 export const AuthHeader = memo<AuthHeaderProps>(({ title, subtitle }) => {
   const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
 
   return (
-    <View style={[styles.header, { marginBottom: tokens.spacing.xl, paddingHorizontal: tokens.spacing.md }]}>
+    <View style={[styles.header, { marginBottom: tokens.spacing.xl, paddingHorizontal: responsive.horizontalPadding }]}>
       <AtomicText
         type="headlineLarge"
         color="textPrimary"

package/src/presentation/components/LoginForm.tsx

@@ -1,6 +1,7 @@
-import React, { useRef, memo } from "react";
+import React, { useRef, memo, useMemo } from "react";
 import { StyleSheet, TextInput } from "react-native";
 import { AtomicButton } from "@umituz/react-native-design-system/atoms";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import { useLoginForm } from "../hooks/useLoginForm";
 import { AuthErrorDisplay } from "./AuthErrorDisplay";
 import { AuthLink } from "./AuthLink";
@@ -27,6 +28,7 @@ export const LoginForm = memo<LoginFormProps>(({
   onNavigateToRegister,
 }) => {
   const passwordRef = useRef<React.ElementRef<typeof TextInput>>(null);
+  const responsive = useResponsive();
   const {
     email,
     password,
@@ -39,6 +41,11 @@ export const LoginForm = memo<LoginFormProps>(({
     displayError,
   } = useLoginForm();
 
+  const signInButtonStyle = useMemo(() => [
+    styles.signInButton,
+    { marginBottom: responsive.verticalPadding },
+  ], [responsive.verticalPadding]);
+
   return (
     <>
       <FormEmailInput
@@ -71,7 +78,7 @@ export const LoginForm = memo<LoginFormProps>(({
         onPress={() => { void handleSignIn(); }}
         disabled={loading || !email.trim() || !password}
         fullWidth
-        style={styles.signInButton}
+        style={signInButtonStyle}
       >
         {translations.signIn}
       </AtomicButton>
@@ -87,9 +94,7 @@ export const LoginForm = memo<LoginFormProps>(({
 });
 
 const styles = StyleSheet.create({
-  signInButton: {
-    marginBottom: 16,
-  },
+  signInButton: {},
 });
 
 LoginForm.displayName = 'LoginForm';

package/src/presentation/components/SocialLoginButtons.tsx

@@ -7,6 +7,7 @@
 import React, { useMemo, memo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
 import type { SocialAuthProvider } from "../../domain/value-objects/AuthConfig";
 
@@ -27,6 +28,7 @@ interface SocialLoginButtonsProps {
 
 export const SocialLoginButtons = memo<SocialLoginButtonsProps>(({ translations, enabledProviders, onGooglePress, onApplePress, googleLoading = false, appleLoading = false }) => {
   const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
 
   // PERFORMANCE: Memoize provider checks to prevent recalculation on every render
   const { hasGoogle, hasApple } = useMemo(() => ({
@@ -34,12 +36,17 @@ export const SocialLoginButtons = memo<SocialLoginButtonsProps>(({ translations,
     hasApple: enabledProviders.includes("apple"),
   }), [enabledProviders]);
 
+  const containerStyle = useMemo(() => [
+    styles.container,
+    { marginTop: responsive.verticalPadding },
+  ], [responsive.verticalPadding]);
+
   if (!hasGoogle && !hasApple) {
     return null;
   }
 
   return (
-    <View style={[styles.container, { marginTop: tokens.spacing.lg }]}>
+    <View style={containerStyle}>
       <View style={styles.dividerContainer}>
         <View style={[styles.divider, { backgroundColor: tokens.colors.border }]} />
         <AtomicText type="bodySmall" color="textSecondary" style={styles.dividerText}>

package/src/presentation/screens/LoginScreen.tsx

@@ -9,6 +9,7 @@ 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";
 import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import { AuthHeader } from "../components/AuthHeader";
 import { LoginForm, type LoginFormTranslations } from "../components/LoginForm";
 
@@ -25,6 +26,7 @@ export interface LoginScreenProps {
 export const LoginScreen = memo<LoginScreenProps>(({ translations }) => {
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
 
   // PERFORMANCE: Stable callback reference
   const handleNavigateToRegister = useCallback(() => {
@@ -35,7 +37,7 @@ export const LoginScreen = memo<LoginScreenProps>(({ translations }) => {
     <ScreenLayout
       scrollable
       keyboardAvoiding
-      maxWidth={440}
+      maxWidth={responsive.maxContentWidth}
       contentContainerStyle={{ justifyContent: "center" }}
       backgroundColor={tokens.colors.backgroundPrimary}
     >

package/src/presentation/screens/RegisterScreen.tsx

@@ -9,6 +9,7 @@ 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";
 import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import { AuthHeader } from "../components/AuthHeader";
 import { RegisterForm, type RegisterFormTranslations } from "../components/RegisterForm";
 
@@ -29,6 +30,7 @@ export interface RegisterScreenProps {
 export const RegisterScreen = memo<RegisterScreenProps>(({ translations, termsUrl, privacyUrl, onTermsPress, onPrivacyPress }) => {
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
 
   // PERFORMANCE: Stable callback reference
   const handleNavigateToLogin = useCallback(() => {
@@ -39,7 +41,7 @@ export const RegisterScreen = memo<RegisterScreenProps>(({ translations, termsUr
     <ScreenLayout
       scrollable
       keyboardAvoiding
-      maxWidth={440}
+      maxWidth={responsive.maxContentWidth}
       contentContainerStyle={{ justifyContent: "center" }}
       backgroundColor={tokens.colors.backgroundPrimary}
     >