@umituz/react-native-firebase 2.3.4 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-firebase",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "description": "Unified Firebase package for React Native apps - Auth and Firestore services using Firebase JS SDK (no native modules).",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domains/account-deletion/index.ts

@@ -29,6 +29,3 @@ export {
 
 export { PasswordPromptScreen } from './presentation/components/PasswordPromptScreen';
 export type { PasswordPromptScreenProps } from './presentation/components/PasswordPromptScreen';
-
-export { usePasswordPrompt } from './presentation/hooks/usePasswordPrompt';
-export type { UsePasswordPromptOptions, UsePasswordPromptReturn } from './presentation/hooks/usePasswordPrompt';

package/src/domains/account-deletion/presentation/components/PasswordPromptScreen.tsx

@@ -1,11 +1,10 @@
 /**
  * Password Prompt Screen
- * Full-screen modal for password input during account deletion reauthentication
+ * Navigation screen for password input during account deletion reauthentication
  */
 
-import React, { useState } from 'react';
-import { View, StyleSheet, Modal, KeyboardAvoidingView, Platform, TouchableOpacity } from 'react-native';
-import { Portal } from '@gorhom/portal';
+import React, { useState, useEffect } from 'react';
+import { View, StyleSheet, KeyboardAvoidingView, Platform, TouchableOpacity } from 'react-native';
 import {
   AtomicInput,
   AtomicButton,
@@ -16,111 +15,112 @@ import {
 } from '@umituz/react-native-design-system';
 
 export interface PasswordPromptScreenProps {
-  visible: boolean;
-  onConfirm: (password: string) => void;
-  onCancel: () => void;
-  title?: string;
-  message?: string;
-  confirmText?: string;
-  cancelText?: string;
+  route: {
+    params: {
+      onComplete: (password: string | null) => void;
+      title?: string;
+      message?: string;
+      confirmText?: string;
+      cancelText?: string;
+    };
+  };
+  navigation: {
+    goBack: () => void;
+  };
 }
 
 export const PasswordPromptScreen: React.FC<PasswordPromptScreenProps> = ({
-  visible,
-  onConfirm,
-  onCancel,
-  title = 'Password Required',
-  message = 'Enter your password to continue',
-  confirmText = 'Confirm',
-  cancelText = 'Cancel',
+  route,
+  navigation,
 }) => {
   const tokens = useAppDesignTokens();
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
 
+  const {
+    onComplete,
+    title = 'Password Required',
+    message = 'Enter your password to continue',
+    confirmText = 'Confirm',
+    cancelText = 'Cancel',
+  } = route.params;
+
+  useEffect(() => {
+    return () => {
+      onComplete(null);
+    };
+  }, [onComplete]);
+
   const handleConfirm = () => {
     if (!password.trim()) {
       setError('Password is required');
       return;
     }
-    onConfirm(password);
-    setPassword('');
-    setError('');
+    onComplete(password);
+    navigation.goBack();
   };
 
   const handleCancel = () => {
-    setPassword('');
-    setError('');
-    onCancel();
+    onComplete(null);
+    navigation.goBack();
   };
 
-  if (!visible) return null;
-
   return (
-    <Portal>
-      <Modal
-        visible={visible}
-        animationType="slide"
-        presentationStyle="fullScreen"
-        onRequestClose={handleCancel}
-      >
-      <SafeAreaView style={[styles.safeArea, { backgroundColor: tokens.colors.background }]} edges={['top', 'bottom']}>
-        <View style={[styles.headerBar, { borderBottomColor: tokens.colors.border }]}>
-          <TouchableOpacity onPress={handleCancel} style={styles.closeButton}>
-            <AtomicIcon name="close" size="lg" color="textSecondary" />
-          </TouchableOpacity>
-          <AtomicText variant="h3" weight="semibold" color="textPrimary">
-            {title}
-          </AtomicText>
-          <View style={styles.placeholder} />
-        </View>
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: tokens.colors.background }]} edges={['top', 'bottom']}>
+      <View style={[styles.headerBar, { borderBottomColor: tokens.colors.border }]}>
+        <TouchableOpacity onPress={handleCancel} style={styles.closeButton}>
+          <AtomicIcon name="close" size="lg" color="textSecondary" />
+        </TouchableOpacity>
+        <AtomicText type="headlineLarge" fontWeight="600" color="textPrimary">
+          {title}
+        </AtomicText>
+        <View style={styles.placeholder} />
+      </View>
 
-        <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-          style={styles.keyboardView}
-        >
-          <View style={[styles.container, { padding: tokens.spacing.xl }]}>
-            <View style={styles.messageContainer}>
-              <AtomicText variant="body" color="textSecondary" style={styles.message}>
-                {message}
-              </AtomicText>
-            </View>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.keyboardView}
+      >
+        <View style={[styles.container, { padding: tokens.spacing.xl }]}>
+          <View style={styles.messageContainer}>
+            <AtomicText type="bodyMedium" color="textSecondary" style={styles.message}>
+              {message}
+            </AtomicText>
+          </View>
 
-            <View style={styles.content}>
-              <AtomicInput
-                value={password}
-                onChangeText={(text: string) => {
-                  setPassword(text);
-                  setError('');
-                }}
-                placeholder="Password"
-                secureTextEntry
-                autoFocus
-                state={error ? 'error' : 'default'}
-                helperText={error}
-                style={{ marginBottom: tokens.spacing.md }}
-              />
-            </View>
+          <View style={styles.content}>
+            <AtomicInput
+              value={password}
+              onChangeText={(text: string) => {
+                setPassword(text);
+                setError('');
+              }}
+              placeholder="Password"
+              secureTextEntry
+              autoFocus
+              state={error ? 'error' : 'default'}
+              helperText={error}
+              style={{ marginBottom: tokens.spacing.md }}
+            />
+          </View>
 
-            <View style={[styles.buttons, { gap: tokens.spacing.sm }]}>
-              <AtomicButton
-                title={cancelText}
-                onPress={handleCancel}
-                variant="secondary"
-                style={styles.button}
-              />
-              <AtomicButton
-                title={confirmText}
-                onPress={handleConfirm}
-                variant="primary"
-                style={styles.button}
-              />
-            </View>
+          <View style={[styles.buttons, { gap: tokens.spacing.sm }]}>
+            <AtomicButton
+              title={cancelText}
+              onPress={handleCancel}
+              variant="secondary"
+              style={styles.button}
+            />
+            <AtomicButton
+              title={confirmText}
+              onPress={handleConfirm}
+              variant="primary"
+              style={styles.button}
+            />
           </View>
-        </KeyboardAvoidingView>
-      </SafeAreaView>
-      </Modal>
-    </Portal>
+        </View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
   );
 };
 

package/src/domains/account-deletion/presentation/hooks/usePasswordPrompt.tsx

@@ -1,66 +0,0 @@
-/**
- * Password Prompt Hook
- * Manages password prompt modal state and logic
- */
-
-import React, { useState, useCallback, useMemo } from 'react';
-import { PasswordPromptScreen } from '../components/PasswordPromptScreen';
-
-export interface UsePasswordPromptOptions {
-  title?: string;
-  message?: string;
-  confirmText?: string;
-  cancelText?: string;
-}
-
-export interface UsePasswordPromptReturn {
-  showPasswordPrompt: () => Promise<string | null>;
-  PasswordPromptComponent: React.ReactNode;
-}
-
-export const usePasswordPrompt = (options: UsePasswordPromptOptions = {}): UsePasswordPromptReturn => {
-  const [isVisible, setIsVisible] = useState(false);
-  const [resolvePromise, setResolvePromise] = useState<((value: string | null) => void) | null>(null);
-
-  const showPasswordPrompt = useCallback((): Promise<string | null> => {
-    console.log("[usePasswordPrompt] showPasswordPrompt called - opening modal");
-    return new Promise((resolve) => {
-      setResolvePromise(() => resolve);
-      setIsVisible(true);
-      console.log("[usePasswordPrompt] Modal visibility set to true");
-    });
-  }, []);
-
-  const handleConfirm = useCallback((password: string) => {
-    if (resolvePromise) {
-      resolvePromise(password);
-    }
-    setIsVisible(false);
-    setResolvePromise(null);
-  }, [resolvePromise]);
-
-  const handleCancel = useCallback(() => {
-    if (resolvePromise) {
-      resolvePromise(null);
-    }
-    setIsVisible(false);
-    setResolvePromise(null);
-  }, [resolvePromise]);
-
-  const PasswordPromptComponent = useMemo(() => (
-    <PasswordPromptScreen
-      visible={isVisible}
-      onConfirm={handleConfirm}
-      onCancel={handleCancel}
-      title={options.title}
-      message={options.message}
-      confirmText={options.confirmText}
-      cancelText={options.cancelText}
-    />
-  ), [isVisible, handleConfirm, handleCancel, options.title, options.message, options.confirmText, options.cancelText]);
-
-  return {
-    showPasswordPrompt,
-    PasswordPromptComponent,
-  };
-};