@umituz/react-native-auth 3.4.15 → 3.4.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "3.4.15",
+  "version": "3.4.19",
   "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",
@@ -36,10 +36,9 @@
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-tanstack": "latest",
-    "@umituz/react-native-validation": "latest"
+    "@umituz/react-native-validation": "^1.4.7"
   },
   "peerDependencies": {
-    "@gorhom/bottom-sheet": ">=4.0.0",
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",
     "@tanstack/react-query": ">=5.0.0",
@@ -50,15 +49,13 @@
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-gesture-handler": ">=2.0.0",
-    "react-native-reanimated": ">=3.0.0",
     "react-native-safe-area-context": ">=4.0.0",
     "react-native-svg": ">=13.0.0",
     "zustand": ">=4.0.0"
   },
   "devDependencies": {
     "@expo/vector-icons": "^15.0.3",
-    "@gorhom/bottom-sheet": "^5.0.0",
-    "@react-native-async-storage/async-storage": "^1.24.0",
+    "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.5.1",
     "@react-navigation/bottom-tabs": "^7.9.0",
     "@react-navigation/native": "^7.1.26",
@@ -68,15 +65,11 @@
     "@types/react": "~19.1.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
-    "@umituz/react-native-design-system": "^2.6.33",
+    "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-theme": "latest",
-    "@umituz/react-native-firebase": "latest",
+    "@umituz/react-native-filesystem": "latest",
     "@umituz/react-native-haptics": "latest",
-    "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-storage": "latest",
-    "@umituz/react-native-tanstack": "latest",
     "@umituz/react-native-uuid": "latest",
-    "@umituz/react-native-validation": "latest",
     "eslint": "^8.57.0",
     "expo-apple-authentication": "^6.0.0",
     "expo-application": "^7.0.8",
@@ -93,7 +86,6 @@
     "react": "~19.1.0",
     "react-native": "~0.81.5",
     "react-native-gesture-handler": "^2.0.0",
-    "react-native-reanimated": "^3.0.0",
     "react-native-safe-area-context": "^4.0.0",
     "react-native-svg": "^15.15.1",
     "rn-emoji-keyboard": "^1.7.0",

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

@@ -12,7 +12,7 @@ export const styles = StyleSheet.create({
     },
     scrollContent: {
         paddingHorizontal: 24,
-        paddingBottom: 40,
+        paddingBottom: 80,
     },
     closeButton: {
         position: "absolute",

package/src/presentation/components/AuthBottomSheet.tsx

@@ -3,15 +3,16 @@
  * Bottom sheet modal for authentication (Login/Register)
  */
 
-import React, { useEffect, useCallback, useRef, useState, useMemo } from "react";
-import { View, TouchableOpacity } from "react-native";
+import React, { useEffect, useCallback, useRef, useState } from "react";
+import { View, TouchableOpacity, ScrollView } from "react-native";
 import {
+  useAppDesignTokens,
+  AtomicText,
+  AtomicIcon,
+  AtomicKeyboardAvoidingView,
   BottomSheetModal,
-  BottomSheetBackdrop,
-  BottomSheetScrollView,
-} from "@gorhom/bottom-sheet";
-import type { BottomSheetBackdropProps } from "@gorhom/bottom-sheet";
-import { useAppDesignTokens, AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
+  type BottomSheetModalRef,
+} from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { useAuthModalStore } from "../stores/authModalStore";
 import { useAuth } from "../hooks/useAuth";
@@ -45,7 +46,7 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const { t } = useLocalization();
-  const modalRef = useRef<BottomSheetModal>(null);
+  const modalRef = useRef<BottomSheetModalRef>(null);
 
   const [googleLoading, setGoogleLoading] = useState(false);
   const [appleLoading, setAppleLoading] = useState(false);
@@ -107,33 +108,21 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
     }
   }, [onAppleSignIn]);
 
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} pressBehavior="close" />
-    ),
-    [],
-  );
-
-  const snapPoints = useMemo(() => ["95%"], []);
-
   return (
     <BottomSheetModal
       ref={modalRef}
-      index={0}
-      snapPoints={snapPoints}
-      backdropComponent={renderBackdrop}
       onDismiss={handleDismiss}
-      enablePanDownToClose
-      keyboardBehavior="interactive"
-      keyboardBlurBehavior="restore"
-      backgroundStyle={[styles.background, { backgroundColor: tokens.colors.backgroundPrimary }]}
-      handleIndicatorStyle={[styles.handleIndicator, { backgroundColor: tokens.colors.border }]}
+      preset="full"
+      backgroundColor={tokens.colors.backgroundPrimary}
     >
-      <BottomSheetScrollView
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-        keyboardShouldPersistTaps="handled"
+      <AtomicKeyboardAvoidingView
+        style={{ flex: 1 }}
       >
+        <ScrollView
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+          keyboardShouldPersistTaps="handled"
+        >
         <TouchableOpacity
           style={styles.closeButton}
           onPress={handleClose}
@@ -176,7 +165,8 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
             />
           )}
         </View>
-      </BottomSheetScrollView>
+      </ScrollView>
+    </AtomicKeyboardAvoidingView>
     </BottomSheetModal>
   );
 };

package/src/presentation/components/LoginForm.tsx

@@ -3,8 +3,8 @@
  * Single Responsibility: Render login form UI
  */
 
-import React from "react";
-import { View, StyleSheet } from "react-native";
+import React, { useRef } from "react";
+import { View, StyleSheet, TextInput } from "react-native";
 import { AtomicInput, AtomicButton } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { useLoginForm } from "../hooks/useLoginForm";
@@ -17,6 +17,7 @@ interface LoginFormProps {
 
 export const LoginForm: React.FC<LoginFormProps> = ({ onNavigateToRegister }) => {
   const { t } = useLocalization();
+  const passwordRef = useRef<TextInput>(null);
   const {
     email,
     password,
@@ -42,20 +43,27 @@ export const LoginForm: React.FC<LoginFormProps> = ({ onNavigateToRegister }) =>
           disabled={loading}
           state={emailError ? "error" : "default"}
           helperText={emailError || undefined}
+          returnKeyType="next"
+          onSubmitEditing={() => passwordRef.current?.focus()}
+          blurOnSubmit={false}
         />
       </View>
 
       <View style={styles.inputContainer}>
         <AtomicInput
+          ref={passwordRef}
           label={t("auth.password")}
           value={password}
           onChangeText={handlePasswordChange}
           placeholder={t("auth.passwordPlaceholder")}
           secureTextEntry
+          showPasswordToggle
           autoCapitalize="none"
           disabled={loading}
           state={passwordError ? "error" : "default"}
           helperText={passwordError || undefined}
+          returnKeyType="done"
+          onSubmitEditing={() => { void handleSignIn(); }}
         />
       </View>
 

package/src/presentation/components/RegisterForm.tsx

@@ -3,8 +3,8 @@
  * Single Responsibility: Render register form UI
  */
 
-import React from "react";
-import { View, StyleSheet } from "react-native";
+import React, { useRef } from "react";
+import { View, StyleSheet, TextInput } from "react-native";
 import { AtomicInput, AtomicButton } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { useRegisterForm } from "../hooks/useRegisterForm";
@@ -30,6 +30,10 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
   onPrivacyPress,
 }) => {
   const { t } = useLocalization();
+  const emailRef = useRef<TextInput>(null);
+  const passwordRef = useRef<TextInput>(null);
+  const confirmPasswordRef = useRef<TextInput>(null);
+
   const {
     displayName,
     email,
@@ -61,11 +65,15 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
           disabled={loading}
           state={fieldErrors.displayName ? "error" : "default"}
           helperText={fieldErrors.displayName || undefined}
+          returnKeyType="next"
+          onSubmitEditing={() => emailRef.current?.focus()}
+          blurOnSubmit={false}
         />
       </View>
 
       <View style={styles.inputContainer}>
         <AtomicInput
+          ref={emailRef}
           label={t("auth.email")}
           value={email}
           onChangeText={handleEmailChange}
@@ -75,20 +83,28 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
           disabled={loading}
           state={fieldErrors.email ? "error" : "default"}
           helperText={fieldErrors.email || undefined}
+          returnKeyType="next"
+          onSubmitEditing={() => passwordRef.current?.focus()}
+          blurOnSubmit={false}
         />
       </View>
 
       <View style={styles.inputContainer}>
         <AtomicInput
+          ref={passwordRef}
           label={t("auth.password")}
           value={password}
           onChangeText={handlePasswordChange}
           placeholder={t("auth.passwordPlaceholder")}
           secureTextEntry
+          showPasswordToggle
           autoCapitalize="none"
           disabled={loading}
           state={fieldErrors.password ? "error" : "default"}
           helperText={fieldErrors.password || undefined}
+          returnKeyType="next"
+          onSubmitEditing={() => confirmPasswordRef.current?.focus()}
+          blurOnSubmit={false}
         />
         {password.length > 0 && (
           <PasswordStrengthIndicator requirements={passwordRequirements} />
@@ -97,6 +113,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
 
       <View style={styles.inputContainer}>
         <AtomicInput
+          ref={confirmPasswordRef}
           label={t("auth.confirmPassword")}
           value={confirmPassword}
           onChangeText={handleConfirmPasswordChange}
@@ -104,10 +121,13 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
             t("auth.confirmPasswordPlaceholder")
           }
           secureTextEntry
+          showPasswordToggle
           autoCapitalize="none"
           disabled={loading}
           state={fieldErrors.confirmPassword ? "error" : "default"}
           helperText={fieldErrors.confirmPassword || undefined}
+          returnKeyType="done"
+          onSubmitEditing={() => { void handleSignUp(); }}
         />
         {confirmPassword.length > 0 && (
           <PasswordMatchIndicator isMatch={passwordsMatch} />