@umituz/react-native-auth 2.6.3 → 2.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "2.6.3",
+  "version": "2.6.5",
   "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",
@@ -68,4 +68,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/presentation/components/AuthBottomSheet.styles.ts

@@ -0,0 +1,48 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+    background: {
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    handleIndicator: {
+        width: 40,
+        height: 4,
+        borderRadius: 2,
+    },
+    scrollContent: {
+        paddingHorizontal: 24,
+        paddingBottom: 20, // Reduced from 40 to 20 to save space
+    },
+    closeButton: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        padding: 8,
+        zIndex: 10,
+    },
+    closeIcon: {
+        fontSize: 24,
+        fontWeight: "400",
+    },
+    header: {
+        alignItems: "center",
+        marginBottom: 16, // Reduced from 24
+        marginTop: 8,
+        paddingTop: 8, // Reduced from 16
+    },
+    title: {
+        fontSize: 24, // Reduced from 28
+        fontWeight: "700",
+        marginBottom: 4, // Reduced from 8
+        textAlign: "center",
+    },
+    subtitle: {
+        fontSize: 14, // Reduced from 15
+        textAlign: "center",
+        lineHeight: 20, // Reduced from 22
+    },
+    formContainer: {
+        flex: 1,
+    },
+});

package/src/presentation/components/AuthBottomSheet.tsx

@@ -3,8 +3,8 @@
  * Bottom sheet modal for authentication (Login/Register)
  */
 
-import React, { useEffect, useCallback, useRef, useState } from "react";
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import React, { useEffect, useCallback, useRef, useState, useMemo } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
 import {
   BottomSheetModal,
   BottomSheetBackdrop,
@@ -18,6 +18,7 @@ import { useAuth } from "../hooks/useAuth";
 import { LoginForm } from "./LoginForm";
 import { RegisterForm } from "./RegisterForm";
 import { SocialLoginButtons } from "./SocialLoginButtons";
+import { styles } from "./AuthBottomSheet.styles";
 import type { SocialAuthProvider } from "../../domain/value-objects/AuthConfig";
 
 export interface AuthBottomSheetProps {
@@ -113,7 +114,7 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
     [],
   );
 
-  const snapPoints = ["85%"];
+  const snapPoints = useMemo(() => ["94%"], []);
 
   return (
     <BottomSheetModal
@@ -180,49 +181,3 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  background: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-  },
-  handleIndicator: {
-    width: 40,
-    height: 4,
-    borderRadius: 2,
-  },
-  scrollContent: {
-    paddingHorizontal: 24,
-    paddingBottom: 40,
-  },
-  closeButton: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    padding: 8,
-    zIndex: 10,
-  },
-  closeIcon: {
-    fontSize: 24,
-    fontWeight: "400",
-  },
-  header: {
-    alignItems: "center",
-    marginBottom: 24,
-    marginTop: 8,
-    paddingTop: 16,
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: "700",
-    marginBottom: 8,
-    textAlign: "center",
-  },
-  subtitle: {
-    fontSize: 15,
-    textAlign: "center",
-    lineHeight: 22,
-  },
-  formContainer: {
-    flex: 1,
-  },
-});

package/src/presentation/components/RegisterForm.tsx

@@ -153,14 +153,14 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
 
 const styles = StyleSheet.create({
   inputContainer: {
-    marginBottom: 20,
+    marginBottom: 16,
   },
   buttonContainer: {
-    marginBottom: 16,
+    marginBottom: 12,
     marginTop: 8,
   },
   signUpButton: {
-    minHeight: 52,
+    minHeight: 48,
   },
 });
 

package/src/presentation/components/SocialLoginButtons.tsx

@@ -111,12 +111,12 @@ export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: 24,
+    marginTop: 16,
   },
   dividerContainer: {
     flexDirection: "row",
     alignItems: "center",
-    marginBottom: 20,
+    marginBottom: 16,
   },
   divider: {
     flex: 1,
@@ -135,7 +135,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    paddingVertical: 14,
+    paddingVertical: 12,
     borderRadius: 12,
     borderWidth: 1,
     gap: 8,